Imported from jeremylongshore/tons-of-skills-marketplace (skills/.curated/anima-local-dev-loop/SKILL.md). Install upstream with npx skills add jeremylongshore/tons-of-skills-marketplace --skill anima-local-dev-loop. Copyright stays with the author (MIT).

Anima Local Dev Loop

Overview

Iterative development workflow for Anima design-to-code: generate from Figma, preview in browser, tweak settings, regenerate. Includes side-by-side comparison of React vs Vue vs HTML output.

Prerequisites

• A staging Figma file and allowlisted node IDs, with scoped credentials loaded from an ignored local environment file or development secret store.
• A disposable generated-output directory that is not imported by the production application until code and visual review pass.
• Agreed comparison criteria for accessibility, design-token use, responsive behavior, dependencies, and generation settings.

Instructions

Step 1: Project Setup

mkdir anima-dev && cd anima-dev
npm init -y
npm install @animaapp/anima-sdk dotenv
npm install -D vite @vitejs/plugin-react typescript

Step 2: Generate and Preview Script

// scripts/generate-preview.ts
import { Anima } from '@animaapp/anima-sdk';
import fs from 'fs';
import 'dotenv/config';

const anima = new Anima({ auth: { token: process.env.ANIMA_TOKEN! } });

const SETTINGS_PRESETS = {
  'react-tailwind': { language: 'typescript' as const, framework: 'react' as const, styling: 'tailwind' as const },
  'react-shadcn': { language: 'typescript' as const, framework: 'react' as const, styling: 'tailwind' as const, uiLibrary: 'shadcn' as const },
  'vue-tailwind': { language: 'typescript' as const, framework: 'vue' as const, styling: 'tailwind' as const },
  'html-css': { language: 'javascript' as const, framework: 'html' as const, styling: 'css' as const },
};

async function generateWithPreset(preset: keyof typeof SETTINGS_PRESETS, nodeId: string) {
  const settings = SETTINGS_PRESETS[preset];
  const outputDir = `./generated/${preset}`;
  fs.mkdirSync(outputDir, { recursive: true });

  const { files } = await anima.generateCode({
    fileKey: process.env.FIGMA_FILE_KEY!,
    figmaToken: process.env.FIGMA_TOKEN!,
    nodesId: [nodeId],
    settings,
  });

  for (const file of files) {
    fs.writeFileSync(`${outputDir}/${file.fileName}`, file.content);
  }
  console.log(`${preset}: ${files.length} files generated`);
}

// Compare all presets
async function compareOutputs(nodeId: string) {
  for (const preset of Object.keys(SETTINGS_PRESETS) as Array<keyof typeof SETTINGS_PRESETS>) {
    await generateWithPreset(preset, nodeId);
    await new Promise(r => setTimeout(r, 2000)); // Rate limit
  }
  console.log('\nAll presets generated in ./generated/');
}

const nodeId = process.argv[2] || '1:2';
compareOutputs(nodeId).catch(console.error);

Step 3: Development Scripts

{
  "scripts": {
    "generate": "tsx scripts/generate-preview.ts",
    "generate:node": "tsx scripts/generate-preview.ts",
    "preview": "vite",
    "dev": "npm run generate && npm run preview"
  }
}

Output

• Multi-preset code generation comparison
• Side-by-side React/Vue/HTML output for same design
• Vite preview server for instant component viewing
• Iterative generate-preview-tweak loop

Examples

Select one approved staging frame and run only the react-tailwind preset first. Preview the result locally, compare it to the design for semantics and responsive behavior, and run the project formatter/type check before trying a second preset. Store the Figma version and preset alongside the generated review artifact so the comparison is repeatable. If generation hits a rate limit, output changes unexpectedly, or an unapproved dependency appears, stop the loop, preserve the sanitized error, and correct the fixture or settings instead of continuously regenerating.

Error Handling

Resources

• Anima SDK GitHub
• Vite

Next Steps

For SDK patterns and best practices, see anima-sdk-patterns.