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".
Best use case
anima-install-auth is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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".
Teams using anima-install-auth should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/anima-install-auth/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How anima-install-auth Compares
| Feature / Agent | anima-install-auth | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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".
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
ChatGPT vs Claude for Agent Skills
Compare ChatGPT and Claude for AI agent skills across coding, writing, research, and reusable workflow execution.
SKILL.md Source
# 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](https://www.animaapp.com))
- Figma Personal Access Token
## Instructions
### Step 1: Install the Anima SDK
```bash
npm install @animaapp/anima-sdk
```
### Step 2: Get Your Tokens
```bash
# 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
```typescript
// 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-sdk` installed
- 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
- [Anima API Docs](https://docs.animaapp.com/docs/anima-api)
- [Anima SDK GitHub](https://github.com/AnimaApp/anima-sdk)
- [Figma API Auth](https://www.figma.com/developers/api#access-tokens)
- [Anima npm](https://www.npmjs.com/package/@animaapp/anima-sdk)
## Next Steps
Proceed to `anima-hello-world` for your first design-to-code conversion.Related Skills
validating-authentication-implementations
Validate authentication mechanisms for security weaknesses and compliance. Use when reviewing login systems or auth flows. Trigger with 'validate authentication', 'check auth security', or 'review login'.
workhuman-install-auth
Workhuman install auth for employee recognition and rewards API. Use when integrating Workhuman Social Recognition, or building recognition workflows with HRIS systems. Trigger: "workhuman install auth".
wispr-install-auth
Wispr Flow install auth for voice-to-text API integration. Use when integrating Wispr Flow dictation, WebSocket streaming, or building voice-powered applications. Trigger: "wispr install auth".
windsurf-install-auth
Install Windsurf IDE and configure Codeium authentication. Use when setting up Windsurf for the first time, logging in to Codeium, or configuring API keys for team/enterprise deployments. Trigger with phrases like "install windsurf", "setup windsurf", "windsurf auth", "codeium login", "windsurf API key".
webflow-install-auth
Install the Webflow JS SDK (webflow-api) and configure OAuth 2.0 or API token authentication. Use when setting up a new Webflow integration, configuring access tokens, or initializing the WebflowClient in your project. Trigger with phrases like "install webflow", "setup webflow", "webflow auth", "configure webflow API token", "webflow OAuth".
vercel-install-auth
Install Vercel CLI and configure API token authentication. Use when setting up Vercel for the first time, creating access tokens, or initializing a project with vercel link. Trigger with phrases like "install vercel", "setup vercel", "vercel auth", "configure vercel token", "vercel login".
veeva-install-auth
Veeva Vault install auth with REST API and VQL. Use when integrating with Veeva Vault for life sciences document management. Trigger: "veeva install auth".
vastai-install-auth
Install and configure Vast.ai CLI and REST API authentication. Use when setting up a new Vast.ai integration, configuring API keys, or initializing Vast.ai GPU cloud access in your project. Trigger with phrases like "install vastai", "setup vastai", "vastai auth", "configure vastai API key", "vastai gpu setup".
twinmind-install-auth
Install and configure TwinMind Chrome extension, mobile app, and API access. Use when setting up TwinMind for meeting transcription, configuring calendar integration, or initializing TwinMind in your workflow. Trigger with phrases like "install twinmind", "setup twinmind", "twinmind auth", "configure twinmind", "twinmind chrome extension".
together-install-auth
Install Together AI SDK and configure API key for inference and fine-tuning. Use when setting up Together AI, configuring the OpenAI-compatible API, or initializing the together Python package. Trigger: "install together, setup together ai, together API key".
techsmith-install-auth
Install TechSmith Snagit COM API and register the COM server for automation. Use when setting up Snagit automation, configuring COM interop, or initializing Camtasia batch processing. Trigger: "install techsmith, setup snagit, techsmith COM API".
supabase-install-auth
Install and configure Supabase SDK, CLI, and project authentication. Use when setting up a new Supabase project, installing @supabase/supabase-js, configuring environment variables, or initializing the Supabase client. Trigger with "install supabase", "setup supabase", "supabase auth config", "configure supabase", "supabase init", "add supabase to project".