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-packInstalls @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.
Diagnoses and fixes common Figma REST API and Plugin API errors including 400/403/404/429/500 HTTP issues, token problems, rate limits, and file access errors.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.