npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin anima-packThis skill is limited to using the following tools:
| Error | Root Cause | Fix |
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.
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.
Guides Next.js Cache Components and Partial Prerendering (PPR): 'use cache' directives, cacheLife(), cacheTag(), revalidateTag() for caching, invalidation, static/dynamic optimization. Auto-activates on cacheComponents: true.
Share bugs, ideas, or general feedback.
| 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.