Anima Prod Checklist

Anima Production Checklist

Overview

Anima converts Figma designs into production-ready code for React, Vue, and HTML. A failed design-to-code pipeline means engineers receive broken components, mismatched tokens, or stale screens that drift from the source of truth. This checklist ensures your Anima integration produces reliable, framework-compliant output before it reaches CI/CD.

Authentication & Secrets

• ANIMA_API_KEY stored in secrets manager (never in source)
• Figma personal access token scoped to read-only with expiration
• Separate API keys for dev/staging/prod environments
• Key rotation schedule documented (90-day cycle recommended)
• Tokens excluded from client bundles and build artifacts

API Integration

• Production base URL configured (https://api.animaapp.com)
• Rate limit handling for standard tier (10 generations/min)
• Generation cache prevents redundant API calls for unchanged screens
• Figma file version polling detects design changes automatically
• Webhook or polling configured for async generation completion
• Component mapping rules tested for target framework (React/Vue/HTML)

Error Handling & Resilience

• Circuit breaker configured for Anima API outages
• Retry with exponential backoff for 429/5xx responses
• Graceful fallback when Figma PAT expires mid-pipeline
• Generated code validated against ESLint/Prettier before merge
• Design token mismatches flagged before component output
• Empty generation results handled (missing layers, unsupported elements)

Monitoring & Alerting

• API latency tracked per generation request
• Error rate alerts set (threshold: >5% over 5 minutes)
• Generation quality score monitored (component render pass rate)
• Figma sync failures trigger immediate notification
• Daily digest of generation counts and token usage

Validation Script

async function checkAnimaReadiness(): Promise<void> {
  const checks: { name: string; pass: boolean; detail: string }[] = [];
  // Verify Anima API connectivity
  try {
    const res = await fetch('https://api.animaapp.com/v1/projects', {
      headers: { Authorization: `Bearer ${process.env.ANIMA_API_KEY}` },
    });
    checks.push({ name: 'Anima API', pass: res.ok, detail: res.ok ? 'Connected' : `HTTP ${res.status}` });
  } catch (e: any) { checks.push({ name: 'Anima API', pass: false, detail: e.message }); }
  // Verify Figma access
  try {
    const res = await fetch('https://api.figma.com/v1/me', {
      headers: { 'X-Figma-Token': process.env.FIGMA_TOKEN! },
    });
    checks.push({ name: 'Figma Access', pass: res.ok, detail: res.ok ? 'Authenticated' : `HTTP ${res.status}` });
  } catch (e: any) { checks.push({ name: 'Figma Access', pass: false, detail: e.message }); }
  // Token leak check
  const fs = await import('fs');
  if (fs.existsSync('./dist')) {
    const content = fs.readdirSync('./dist').map(f => fs.readFileSync(`./dist/${f}`, 'utf8')).join('');
    const leaked = content.includes(process.env.ANIMA_API_KEY || '');
    checks.push({ name: 'Token Safety', pass: !leaked, detail: leaked ? 'KEY IN BUILD!' : 'Clean' });
  }
  for (const c of checks) console.log(`[${c.pass ? 'PASS' : 'FAIL'}] ${c.name}: ${c.detail}`);
}
checkAnimaReadiness();

Error Handling

Resources

• Anima API Docs
• Anima Status

Next Steps

See anima-security-basics for secret management and access control patterns.

Source: jeremylongshore/claude-code-plugins-plus-skills → skills/.curated/anima-prod-checklist/SKILL.md

Also appears in: jeremylongshore/claude-code-plugins-plus-skills/plugins/saas-packs/anima-pack/skills/anima-prod-checklist/SKILL.md