--- name: anima-local-dev-loop description: 'Set up iterative design-to-code development loop with Anima SDK. Use when rapidly iterating on Figma-to-code output, comparing framework outputs, or building a local preview server for generated components. Trigger with: "anima local dev", "anima dev loop", "anima preview", "anima iteration". ' allowed-tools: Read, Write, Edit, Bash(npm:*), Grep version: 2.0.0 argument-hint: "[figma-file-key] [node-id]" model: inherit effort: high license: MIT author: Jeremy Longshore tags: - saas - design - figma - anima - development compatibility: Requires Node.js 20+, approved Anima API access, current Anima SDK documentation, and authorized Figma or website source access --- # Anima Local Dev Loop ## Overview Iterate on one approved Figma node with supported React or HTML settings. Preserve the source revision and settings for each run, preview locally, and accept a result only after deterministic code and visual checks. ## 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 ```bash 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 ```typescript // scripts/generate-preview.ts import { Anima } from '@animaapp/anima-sdk'; import fs from 'fs'; import path from 'path'; 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 }, 'react-plain-css': { language: 'typescript' as const, framework: 'react' as const, styling: 'plain_css' as const }, 'html-plain-css': { language: 'javascript' as const, framework: 'html' as const, styling: 'plain_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 [fileName, file] of Object.entries(files)) { if (file.isBinary) throw new Error(`Handle binary output separately: ${fileName}`); const root = path.resolve(outputDir); const target = path.resolve(root, fileName); if (!target.startsWith(`${root}${path.sep}`)) throw new Error('Unsafe output path'); fs.mkdirSync(path.dirname(target), { recursive: true }); fs.writeFileSync(target, file.content); } console.log(`${preset}: ${Object.keys(files).length} files generated`); } // Compare all presets async function compareOutputs(nodeId: string) { for (const preset of Object.keys(SETTINGS_PRESETS) as Array) { await generateWithPreset(preset, nodeId); // Stop on provider/Figma rate limits; apply the bounded rate-limit workflow. } console.log('\nAll presets generated in ./generated/'); } const nodeId = process.argv[2] || '1:2'; compareOutputs(nodeId).catch(() => { console.error({ failureClass: 'preview-generation-failed' }); process.exitCode = 1; }); ``` ### Step 3: Development Scripts ```json { "scripts": { "generate": "tsx scripts/generate-preview.ts", "generate:node": "tsx scripts/generate-preview.ts", "preview": "vite", "dev": "npm run generate && npm run preview" } } ``` ## 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 - Multi-preset code generation comparison - Side-by-side supported React/HTML output for the 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 | Error | Cause | Solution | |-------|-------|----------| | Rate limited | Too many generations | Add 2s delay between calls | | Different outputs each run | Anima AI variation | Pin settings; use consistent node IDs | ## Resources - [Anima SDK GitHub](https://github.com/AnimaApp/anima-sdk) - [Vite](https://vitejs.dev/) --- Source attribution: jeremylongshore Original project: https://github.com/jeremylongshore/claude-code-plugins-plus-skills/blob/ab85a061f7bcc039dac13ee193de7a4cd4388571/plugins/saas-packs/anima-pack/skills/anima-local-dev-loop/SKILL.md License: MIT License information: https://opensource.org/license/mit Original upstream instructions; downloaded from Mega AI Hub. ## Upstream license notice MIT License Copyright (c) 2025 Jeremy Longshore Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. # Mega AI Hub resource metadata Creator / publisher: jeremylongshore Original project: https://github.com/jeremylongshore/claude-code-plugins-plus-skills/blob/ab85a061f7bcc039dac13ee193de7a4cd4388571/plugins/saas-packs/anima-pack/skills/anima-local-dev-loop/SKILL.md Attribution basis: Source repository record Fields of work: Design, Development & Engineering, Product Management Roles: Design System Lead, Frontend Developer, Growth Product Manager, Product Designer, UX Designer Specialties: Design, Frontend Tools: Figma, Anima Sdk Country applicability: Country not specified Classification basis: Source catalog labels Instruction SHA-256: 293d4051bec95bd4ea7b9e16b236043d89fc26bae48c81599f73304b1f9c93d9