Agent skill
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".
Install this agent skill to your Project
npx add-skill https://github.com/jeremylongshore/claude-code-plugins-plus-skills/tree/main/plugins/saas-packs/anima-pack/skills/anima-upgrade-migration
SKILL.md
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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
dockerfile-generator
Dockerfile Generator - Auto-activating skill for DevOps Basics. Triggers on: dockerfile generator, dockerfile generator Part of the DevOps Basics skill category.
branch-naming-helper
Branch Naming Helper - Auto-activating skill for DevOps Basics. Triggers on: branch naming helper, branch naming helper Part of the DevOps Basics skill category.
readme-generator
Readme Generator - Auto-activating skill for DevOps Basics. Triggers on: readme generator, readme generator Part of the DevOps Basics skill category.
makefile-generator
Makefile Generator - Auto-activating skill for DevOps Basics. Triggers on: makefile generator, makefile generator Part of the DevOps Basics skill category.
gitignore-generator
Gitignore Generator - Auto-activating skill for DevOps Basics. Triggers on: gitignore generator, gitignore generator Part of the DevOps Basics skill category.
pre-commit-hook-setup
Pre Commit Hook Setup - Auto-activating skill for DevOps Basics. Triggers on: pre commit hook setup, pre commit hook setup Part of the DevOps Basics skill category.
Didn't find tool you were looking for?