Skillshub anima-install-auth

install

source · Clone the upstream repo

git clone https://github.com/ComeOnOliver/skillshub

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ComeOnOliver/skillshub "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/jeremylongshore/claude-code-plugins-plus-skills/anima-install-auth" ~/.claude/skills/comeonoliver-skillshub-anima-install-auth && rm -rf "$T"

manifest: skills/jeremylongshore/claude-code-plugins-plus-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-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

Next Steps

Proceed to

anima-hello-world

for your first design-to-code conversion.