anima-common-errors

v2026.09.24

Diagnose and fix common Anima SDK design-to-code errors. Use when encountering Figma token errors, code generation failures, node not found issues, or output quality problems. Trigger with: "anima error", "anima not working", "anima debug", "figma to code error".

GitHub
安装命令
npx skhub add jeremylongshore/anima-common-errors
Markdown
SKILL.md

Anima Common Errors

Overview

Use this guide to diagnose design-to-code failures without widening design-file access or leaking tokens. Start from a reproducible file/node/settings tuple and use a least-privilege development credential for all verification.

Prerequisites

  • A sanitized error record with the design file identifier, node identifier, selected generation settings, timestamp, and request ID where available.
  • Scoped Anima and Figma credentials held in a secret store; never paste a personal access token into a ticket, source file, or shared diagnostic log.
  • A staging or disposable design fixture so fixes can be reproduced without mutating a production design file.

Instructions

  1. Classify the failure as authentication, file/node resolution, generator configuration, timeout/rate limit, or rendered-output quality.
  2. Reproduce it with the smallest approved frame/component and the diagnostic commands, capturing only sanitized results.
  3. Correct the matching design input, entitlement, or generation configuration and rerun only that fixture.
  4. Validate the generated file location, lint/build result, and visual review before updating a broader component set.

Error Reference

Authentication Errors

ErrorRoot CauseFix
Invalid Anima tokenToken not provisioned or expiredRequest new token from Anima team
Invalid Figma tokenPAT expired or revokedGenerate new PAT: Figma > Settings > Access Tokens
UnauthorizedToken lacks file accessEnsure Figma PAT has file read permission

File & Node Errors

ErrorRoot CauseFix
File not foundWrong file keyExtract from Figma URL: figma.com/file/{KEY}/...
Node not foundInvalid node IDCopy node link from Figma: right-click > Copy link
No renderable contentSelected a page or groupSelect a frame, component, or component set
Empty files recordNode is empty or hiddenUnhide layers; ensure node has visible content

Code Generation Errors

// Classify without printing provider messages, which can contain source details.
async function safeGenerate(anima: Anima, params: Parameters<Anima['generateCode']>[0]) {
  try {
    return await anima.generateCode(params);
  } catch (error: unknown) {
    const status = typeof error === 'object' && error !== null && 'status' in error
      ? Number(error.status)
      : undefined;
    const failureClass = status === 401 || status === 403
      ? 'authentication-or-permission'
      : status === 429
        ? 'rate-limited'
        : status !== undefined && status >= 500
          ? 'provider-transient'
          : 'generation-failed';
    console.error({ failureClass, status });
    return null;
  }
}

Output Quality Issues

SymptomCauseFix
Messy layoutNo auto-layout in FigmaConvert frames to auto-layout
Wrong colorsHardcoded hex instead of Figma variablesUse Figma color variables/styles
Missing textText is inside masked groupsFlatten masks before generating
Extra wrappersDeeply nested groupsFlatten group hierarchy
Wrong component namesUnnamed Figma layersName layers descriptively

Valid Settings Combinations

FrameworkLanguageStylingUI Library
reacttypescript, javascriptplain_css, tailwind, inline_stylesomit, mui, antd, radix, shadcn, clean_react, custom_design_system
htmltypescript, javascriptplain_css, tailwind, inline_stylesomit

Diagnostic Script

# 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'

Tool Discipline

Use Read and Grep to inspect the existing integration and generated diff before changing anything. Use Write or Edit only inside the approved generated-code, test, or configuration paths. Use the declared Bash commands only for the explicit install, validation, or diagnostic steps in this workflow; never print tokens, source designs, generated source, or private website captures.

Output

  • Error classified and root cause identified
  • Valid settings matrix for reference
  • Diagnostic commands for token and file verification

Examples

When a staging generation returns Node not found, compare the copied node ID with the approved Figma link, then run the file-access diagnostic using a scoped development token. Regenerate only that small frame after correcting the ID and confirm files are emitted to the expected generated-code directory. If access is denied, the node remains hidden, or output is empty, stop the run and ask the file owner to correct permissions or visibility; do not expand the token’s scope or substitute a personal token to get past the error.

Error Handling

FailureResponse
Token is invalid, expired, or over-scopedStop the diagnostic, replace it through managed secret rotation, and avoid logging the value.
File or node cannot be resolvedVerify the approved link and visibility with the design owner before retrying.
Generator times out or rate-limitsUse bounded backoff or simplify the fixture; do not fan out uncontrolled retries.
Generated output is unsafe or wrongKeep it out of the main branch, correct source design/settings, and rerun targeted validation.

Resources

发现
标签

此技能尚未发布标签。

版本
最新版本元数据

版本

v2026.09.24

发布时间

Sep 24, 2026

分类

未分类

许可证

MIT

源路径

skills/.curated/anima-common-errors

默认分支

main

最新提交

e5a6c3b

Tree SHA

c2dc8e8