Agent skill
anima-install-auth
Install the Anima SDK and configure authentication for Figma-to-code generation. Use when setting up design-to-code automation, configuring Figma token access, or initializing the @animaapp/anima-sdk for server-side code generation. Trigger: "install anima", "setup anima", "anima auth", "anima figma token".
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-install-auth
SKILL.md
Anima Install & Auth
Overview
Install @animaapp/anima-sdk and configure authentication tokens. Anima converts Figma designs into production-ready React, Vue, or HTML code with Tailwind, MUI, AntD, or shadcn styling. The SDK runs server-side only.
Prerequisites
- Node.js 18+ (SDK is server-side only)
- Figma account with API access
- Anima API token (request at animaapp.com)
- Figma Personal Access Token
Instructions
Step 1: Install the Anima SDK
npm install @animaapp/anima-sdk
Step 2: Get Your Tokens
# 1. Figma Personal Access Token:
# Figma > Settings > Account > Personal Access Tokens > Generate
# 2. Anima API Token:
# Request from Anima team (currently limited partner access)
# https://docs.animaapp.com/docs/anima-api
# Store securely
cat > .env << 'EOF'
ANIMA_TOKEN=your-anima-api-token
FIGMA_TOKEN=your-figma-personal-access-token
EOF
echo ".env" >> .gitignore
chmod 600 .env
Step 3: Initialize and Verify
// src/anima-client.ts
import { Anima } from '@animaapp/anima-sdk';
const anima = new Anima({
auth: {
token: process.env.ANIMA_TOKEN!,
},
});
// Verify connection by generating code from a known Figma file
async function verifySetup() {
try {
const { files } = await anima.generateCode({
fileKey: 'your-figma-file-key', // From Figma URL: figma.com/file/{fileKey}/...
figmaToken: process.env.FIGMA_TOKEN!,
nodesId: ['1:2'], // Specific node to convert
settings: {
language: 'typescript',
framework: 'react',
styling: 'tailwind',
},
});
console.log(`Generated ${files.length} files`);
for (const file of files) {
console.log(` ${file.fileName} (${file.content.length} chars)`);
}
return true;
} catch (error) {
console.error('Setup verification failed:', error);
return false;
}
}
verifySetup();
Step 4: Get Your Figma File Key
Figma URL format:
https://www.figma.com/file/ABC123xyz/My-Design?node-id=1:2
File Key: ABC123xyz
Node ID: 1:2 (from the URL query parameter)
Output
@animaapp/anima-sdkinstalled- Anima token and Figma token configured in
.env - Verified code generation from a Figma design
- Understanding of file key and node ID extraction
Error Handling
| Error | Cause | Solution |
|---|---|---|
Invalid Anima token |
Token not provisioned | Request token from Anima team |
Invalid Figma token |
PAT expired or wrong | Generate new PAT in Figma Settings |
File not found |
Wrong file key | Extract key from Figma URL correctly |
Node not found |
Invalid node ID | Use Figma Dev Mode to get node IDs |
SDK not for browser |
Used in client-side code | SDK is server-side only |
Resources
Next Steps
Proceed to anima-hello-world for your first design-to-code conversion.
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?