From anima-pack
Diagnoses and fixes Anima SDK errors in Figma-to-code generation, including auth failures, node not found, code gen issues, and poor output quality.
How this skill is triggered — by the user, by Claude, or both
Slash command
/anima-pack:anima-common-errorsThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
| Error | Root Cause | Fix |
| Error | Root Cause | Fix |
|---|---|---|
Invalid Anima token | Token not provisioned or expired | Request new token from Anima team |
Invalid Figma token | PAT expired or revoked | Generate new PAT: Figma > Settings > Access Tokens |
Unauthorized | Token lacks file access | Ensure Figma PAT has file read permission |
| Error | Root Cause | Fix |
|---|---|---|
File not found | Wrong file key | Extract from Figma URL: figma.com/file/{KEY}/... |
Node not found | Invalid node ID | Copy node link from Figma: right-click > Copy link |
No renderable content | Selected a page or group | Select a frame, component, or component set |
Empty files array | Node is empty or hidden | Unhide layers; ensure node has visible content |
// Common generation error handler
async function safeGenerate(anima: Anima, params: any) {
try {
return await anima.generateCode(params);
} catch (err: any) {
if (err.message?.includes('rate limit')) {
console.error('Rate limited — wait 60s before retrying');
} else if (err.message?.includes('timeout')) {
console.error('Generation timed out — simplify the Figma node');
} else if (err.message?.includes('Invalid settings')) {
console.error('Invalid settings combo — check framework/styling/uiLibrary compatibility');
} else {
console.error('Generation error:', err.message);
}
return null;
}
}
| Symptom | Cause | Fix |
|---|---|---|
| Messy layout | No auto-layout in Figma | Convert frames to auto-layout |
| Wrong colors | Hardcoded hex instead of Figma variables | Use Figma color variables/styles |
| Missing text | Text is inside masked groups | Flatten masks before generating |
| Extra wrappers | Deeply nested groups | Flatten group hierarchy |
| Wrong component names | Unnamed Figma layers | Name layers descriptively |
| Framework | Language | Styling | UI Library |
|---|---|---|---|
react | typescript, javascript | tailwind, css, styled-components | none, mui, antd, shadcn |
vue | typescript, javascript | tailwind, css | none |
html | javascript | css, tailwind | none |
# Verify Figma token
curl -s "https://api.figma.com/v1/me" \
-H "X-Figma-Token: ${FIGMA_TOKEN}" | jq '.handle // .err'
# Verify file access
curl -s "https://api.figma.com/v1/files/${FIGMA_FILE_KEY}" \
-H "X-Figma-Token: ${FIGMA_TOKEN}" | jq '.name // .err'
For collecting debug data, see anima-debug-bundle.
npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin anima-pack7plugins reuse this skill
First indexed Jul 10, 2026
Showing the 6 earliest of 7 plugins
Installs @animaapp/anima-sdk and configures Figma/Anima tokens for server-side code generation from Figma designs to React, Vue, or HTML with Tailwind/MUI styling.
Diagnose and fix common Figma REST API and Plugin API errors. Use when encountering HTTP errors, plugin sandbox crashes, or unexpected API responses from Figma. Trigger with phrases like "figma error", "fix figma", "figma not working", "figma 403", "figma 429".
Guides collaborative design exploration before implementation: explores context, asks clarifying questions, proposes approaches, and writes a design doc for user approval.