Install the Anima SDK and configure authentication for Figma-to-code generation.

MITAuto-check passedFrontend & Design

Install Anima Install Auth

skills CLI
$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill anima-install-auth -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install jeremylongshore/tons-of-skills-marketplace anima-install-auth --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/.curated/anima-install-auth .claude/skills/anima-install-auth && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
anima-install-auth
GitHub stars
2.8k
Token cost
~1.2k tokens
SKILL.md length
330 words
Files
2 (incl. references)
Skills in repo
3,342
Repo updated
First seen
Licence
MIT

At a glance

Install the Anima SDK and configure authentication for Figma-to-code generation.

  • Works in 4 steps: Install the Anima SDK → Get Your Tokens → Initialize and Verify → …
  • Setting up design-to-code automation
  • SKILL.md covers Overview, Prerequisites, Instructions and Tool Discipline, plus 4 more sections
  • Calls node and npm; reaches docs.animaapp.com and figma.com; needs ANIMA_TOKEN and FIGMA_TOKEN

What it does

Anima Install Auth is an agent skill from jeremylongshore/tons-of-skills-marketplace. 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 with: "install anima", "setup anima", "anima auth", "anima figma token".

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/official-docs.md`). Compatibility notes: Requires Node.js 20+, approved Anima API access, current Anima SDK documentation, and authorized Figma or website source access

It sits in Frontend & Design, covering Design to code and Backend development. It works with Figma. The repository describes itself as: Model-agnostic agent-skills platform with a harness-free canonical layer, verified adapters, and the ccpi package manager. Explore at tonsofskills.com. The licence is MIT.

When your agent uses it

  • Setting up design-to-code automation
  • Configuring Figma token access
  • Initializing the @animaapp/anima-sdk for server-side code generation
  • With: install anima

Example prompts

  • “install anima”
  • “setup anima”
  • “anima auth”
  • “/anima-install-auth”

Requirements

  • Node.js
  • A credential in ANIMA_TOKEN
  • A credential in FIGMA_TOKEN
  • Compatibility (from SKILL.md): Requires Node.js 20+, approved Anima API access, current Anima SDK documentation, and authorized Figma or website source access
  • Pre-approved tools (allowed-tools): Read, Write, Edit, Bash(npm:*), Grep

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Install the Anima SDK
  2. Get Your Tokens
  3. Initialize and Verify
  4. Get Your Figma File Key

What it can do on your machine

Read from SKILL.md and the folder at commit cfae287. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Write
    • Edit
    • Bash(npm:*)
    • Grep

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • node
    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • docs.animaapp.com
    • figma.com

    Also links to:

    • animaapp.com
    • github.com
    • npmjs.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • ANIMA_TOKEN
    • FIGMA_TOKEN

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Requires Node.js 20+, approved Anima API access, current Anima SDK documentation, and authorized Figma or website source access

    From compatibility in the SKILL.md frontmatter.

Context cost

Anima Install Auth loads about 1.2k tokens when it runs, and up to ~1.4k if it reads all its reference files. Until then it costs about 83 tokens; SKILL.md has 330 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~83
When it runs · the whole SKILL.md, loaded when a task matches
~1.2k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from jeremylongshore/tons-of-skills-marketplace at commit cfae287, republished under its MIT licence (© jeremylongshore). 330 words, ~1,226 tokens.

Download SKILL.mdSave it as .claude/skills/anima-install-auth/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
anima-install-auth
description
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 with: "install anima", "setup anima", "anima auth", "anima figma token".
allowed-tools
Read, Write, Edit, Bash(npm:*), Grep
compatibility
Requires Node.js 20+, approved Anima API access, current Anima SDK documentation, and authorized Figma or website source access
version
2.0.0
argument-hint
[backend-project]
model
inherit
effort
high
license
MIT
author
Jeremy Longshore <jeremy@intentsolutions.io>
tags
saas, design, figma, anima, code-generation

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
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

# 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
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 ${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

ErrorCauseSolution
Invalid Anima tokenToken not provisionedRequest token from Anima team
Invalid Figma tokenPAT expired or wrongGenerate new PAT in Figma Settings
File not foundWrong file keyExtract key from Figma URL correctly
Node not foundInvalid node IDUse Figma Dev Mode to get node IDs
SDK not for browserUsed in client-side codeSDK is server-side only

Resources

© jeremylongshore, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (references) in skills/.curated/anima-install-auth of jeremylongshore/tons-of-skills-marketplace.

  • SKILL.md
  • references/official-docs.md

Open the folder on GitHubat commit cfae287

Compare with similar skills

Anima Install Auth next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Anima Install Auth compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Anima Install Auth this skilljeremylongshore/tons-of-skills-marketplace2.8k—~1.2kAutomated safety check: PassMIT
Figma To StaticLeoYeAI/openclaw-master-skills2.2k—~7.1kAutomated safety check: PassMIT
Figma use_figma Plugin API Ruleswarpdotdev/warp65k4 repos~4.4kAutomated safety check: PassAGPL-3.0
Figma Design to Codewarpdotdev/warp65k4 repos~2.9kAutomated safety check: PassAGPL-3.0
Figma Design System Rules Generatorwarpdotdev/warp65k3 repos~4.6kAutomated safety check: PassAGPL-3.0
Figma Code Connect Componentswarpdotdev/warp65k2 repos~4.2kAutomated safety check: PassAGPL-3.0

Similar skills

  • Figma To Static

    LeoYeAI/openclaw-master-skills

    Convert Figma design files to pixel-level mobile-first static HTML/CSS pages.

    2.2k GitHub stars~7.1k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed
  • Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.

    65k GitHub starsUsed in 4 repos~4.4k tokens
    Frontend & DesignAuto-check passed
  • Figma Design to Code

    warpdotdev/warp

    Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.

    65k GitHub starsUsed in 4 repos~2.9k tokens
    Frontend & DesignAuto-check passed
  • Creates project-specific design system rules from your codebase so coding agents implement Figma designs with your components, naming and tokens.

    65k GitHub starsUsed in 3 repos~4.6k tokens
    Frontend & DesignAuto-check passed
  • Maps published Figma components to their code implementations with Code Connect, using the Figma MCP suggestion and mapping tools.

    65k GitHub starsUsed in 2 repos~4.2k tokens
    Frontend & DesignAuto-check passed
  • Design To Code

    MigoXLab/coderio

    Pixel-perfect Figma to React conversion using coderio. An agent skill from MigoXLab/coderio.

    114 GitHub starsUsed in 2 repos~1.2k tokens
    Frontend & DesignAuto-check passed

More from jeremylongshore/tons-of-skills-marketplace

All 3,342 skills in this repo
  • Performing Security Code Review

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to conduct a security-focused code review using the security-agent plugin.

    2.8k GitHub starsUsed in 2 repos~1.3k tokens
    Auto-check: notes
  • Adapting Transfer Learning Models

    jeremylongshore/tons-of-skills-marketplace

    Build this skill automates the adaptation of pre-trained machine learning models using transfer learning techniques.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Agent Context Loader

    jeremylongshore/tons-of-skills-marketplace

    Execute proactive auto-loading: automatically detects and loads agents.md files.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Aggregating Performance Metrics

    jeremylongshore/tons-of-skills-marketplace

    Aggregate and centralize performance metrics from applications, systems, databases, caches, and services.

    2.8k GitHub stars~1.2k tokensUpdated today
    Auto-check passed
  • Analyzing Capacity Planning

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to analyze capacity requirements and plan for future growth.

    2.8k GitHub stars~947 tokensUpdated today
    Auto-check passed
  • Analyzing Database Indexes

    jeremylongshore/tons-of-skills-marketplace

    Process use when you need to work with database indexing. An agent skill from jeremylongshore/tons-of-skills-marketplace.

    2.8k GitHub stars~2k tokensUpdated today
    Auto-check passed

Works with

Questions about Anima Install Auth

What does Anima Install Auth do?

Install the Anima SDK and configure authentication for Figma-to-code generation. Anima Install Auth is an agent skill from jeremylongshore/tons-of-skills-marketplace. Install the Anima SDK and configure authentication for Figma-to-code generation.

When should I use Anima Install Auth?

Anima Install Auth fits situations like: setting up design-to-code automation; configuring Figma token access; initializing the @animaapp/anima-sdk for server-side code generation; with: install anima.

How do I install Anima Install Auth in Claude Code?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill anima-install-auth -a claude-code`. Or copy the skill folder (skills/.curated/anima-install-auth in jeremylongshore/tons-of-skills-marketplace) into .claude/skills/anima-install-auth in your project. Claude Code loads it when a task matches its description.

How do I install Anima Install Auth in Codex?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill anima-install-auth -a codex`. Or copy the skill folder (skills/.curated/anima-install-auth in jeremylongshore/tons-of-skills-marketplace) into .agents/skills/anima-install-auth in your project. Codex loads it when a task matches its description.

Can I use Anima Install Auth in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill anima-install-auth -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/anima-install-auth, .gemini/skills/anima-install-auth, .github/skills/anima-install-auth and .opencode/skills/anima-install-auth in your project.

What does Anima Install Auth need to run?

Going by SKILL.md and its folder, Anima Install Auth needs the command-line tools its instructions call (node and npm) and credentials named ANIMA_TOKEN and FIGMA_TOKEN. Our summary lists: Node.js; A credential in ANIMA_TOKEN; A credential in FIGMA_TOKEN. Its frontmatter pre-approves these tools: Read, Write, Edit, Bash(npm:*), Grep. Compatibility (from SKILL.md): Requires Node.js 20+, approved Anima API access, current Anima SDK documentation, and authorized Figma or website source access.

Does Anima Install Auth access the network?

SKILL.md names 5 domains. In commands or code: docs.animaapp.com and figma.com; the agent is likely to contact these when it follows the instructions. As links in the text: animaapp.com, github.com and npmjs.com. This is read from the text; nothing was executed.

Is Anima Install Auth safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Anima Install Auth use?

Anima Install Auth is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Anima Install Auth use?

About 1.2k tokens (SKILL.md is roughly 4.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 191 tokens, read only when the agent opens those files.

What are the alternatives to Anima Install Auth?

Skills that share tags, products or a category with Anima Install Auth: Figma To Static (LeoYeAI/openclaw-master-skills, 2.2k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars), Figma Design to Code (warpdotdev/warp, 65k stars) and Figma Design System Rules Generator (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Anima Install Auth?

jeremylongshore (a GitHub user) maintains it in jeremylongshore/tons-of-skills-marketplace, which has 2,827 GitHub stars. The repository holds 3,342 skills in this directory. The repository was last updated on October 10, 2026.

Source: jeremylongshore/tons-of-skills-marketplace on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.