Anima upgrade migration
Upgrade @animaapp/anima-sdk versions and handle API changes. Use when upgrading SDK versions, migrating from the Figma plugin workflow to SDK-based automation, or adapting to new Anima API features. Trigger: "anima upgrade", "anima migration", "anima SDK update".From its SKILL.md
npx -y skills add ComeOnOliver/skillshub --skill anima-upgrade-migrationAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
What its file declares
Copied from the file, not written here
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
3.0 KB, 673 tokens by cl100k_base, as published. Nobody here has run it
Anima Upgrade & Migration
Migration Paths
| From | To | Complexity |
|---|---|---|
| Figma plugin (manual) | SDK automation | Medium |
| SDK v1 → v2 | SDK latest | Low |
| Anima Playground | SDK API | Low |
Instructions
Step 1: Upgrade SDK
# Check current version
npm list @animaapp/anima-sdk
# Upgrade to latest
npm install @animaapp/anima-sdk@latest
# Check for breaking changes
npm info @animaapp/anima-sdk changelog
Step 2: Migrate from Manual Plugin to SDK
// BEFORE: Manual Figma plugin workflow
// 1. Open Figma → Plugins → Anima
// 2. Select component → Export → React
// 3. Copy-paste generated code into project
// 4. Manually repeat for each component change
// AFTER: Automated SDK workflow
import { Anima } from '@animaapp/anima-sdk';
const anima = new Anima({ auth: { token: process.env.ANIMA_TOKEN! } });
// Automated: runs in CI on Figma file version change
async function syncDesignToCode() {
const { files } = await anima.generateCode({
fileKey: process.env.FIGMA_FILE_KEY!,
figmaToken: process.env.FIGMA_TOKEN!,
nodesId: ['1:2', '3:4', '5:6'], // All design system components
settings: { language: 'typescript', framework: 'react', styling: 'tailwind' },
});
// Write to project, run through linter, create PR
for (const file of files) {
require('fs').writeFileSync(`src/components/generated/${file.fileName}`, file.content);
}
}
Step 3: API Changes Checklist
// Common API changes between versions:
// - New settings options (e.g., uiLibrary: 'shadcn' added later)
// - New frameworks (e.g., Next.js-specific output)
// - Response format changes in files array
// - New authentication methods
// Test after upgrade:
async function testUpgrade() {
const anima = new Anima({ auth: { token: process.env.ANIMA_TOKEN! } });
const { files } = await anima.generateCode({
fileKey: process.env.FIGMA_FILE_KEY!,
figmaToken: process.env.FIGMA_TOKEN!,
nodesId: ['1:2'],
settings: { language: 'typescript', framework: 'react', styling: 'tailwind' },
});
console.log(`Upgrade test: ${files.length} files generated`);
}
Output
- SDK upgraded to latest version
- Migrated from manual plugin to automated SDK
- All generation tests passing after upgrade
Resources
Next Steps
For CI/CD setup, see anima-ci-integration.
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.