Anima Install & Auth Skill

Anima Install & Auth

Overview

Install the backend-only @animaapp/anima-sdk, bind managed Anima and Figma credentials, and prove one authorized React or HTML generation without exposing either token.

Prerequisites

Node.js 20+ (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

# Bind ANIMA_TOKEN and FIGMA_TOKEN with the runtime secret manager.
# Check presence without printing values.
test -n "$ANIMA_TOKEN" && test -n "$FIGMA_TOKEN"

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 ${Object.keys(files).length} files`);
    for (const [fileName, file] of Object.entries(files)) {
      console.log(`  ${fileName} (${file.content.length} chars; binary=${file.isBinary})`);
    }
    return true;
  } catch {
    console.error({ failureClass: 'setup-verification-failed' });
    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)

Tool Discipline

Use Read and Grep to inspect the existing integration and generated diff before changing anything. Use Write or Edit only inside the approved generated-code, test, or configuration paths. Use the declared Bash commands only for the explicit install, validation, or diagnostic steps in this workflow; never print tokens, source designs, generated source, or private website captures.

Output

@animaapp/anima-sdk installed
Anima and Figma tokens bound through the runtime secret manager
Verified code generation from a Figma design
Understanding of file key and node ID extraction

Examples

Create a dedicated staging Figma file with one approved frame and request a least-privilege Anima token for that file. Store both credentials through the development secret workflow, run verifySetup, and confirm the result names a small expected set of generated files without printing either token. Keep the SDK in a server-side module and validate that no credential appears in the browser build. If token verification, file access, or node lookup fails, stop and correct the scoped entitlement or reference; do not use a personal token with broader design access as a workaround.

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 |

Agent Skills: Anima Install & Auth

Install this agent skill to your local

Skill Files