New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Anima Reference Architecture

by jeremylongshore in jeremylongshore/tons-of-skills-marketplace

Implement reference architecture for Anima design-to-code automation.

MITAuto-check passedFrontend & Design

Install Anima Reference Architecture

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

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

GitHub CLI
$ gh skill install jeremylongshore/tons-of-skills-marketplace anima-reference-architecture --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-reference-architecture .claude/skills/anima-reference-architecture && 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-reference-architecture
GitHub stars
2.8k
Token cost
~2.4k tokens
SKILL.md length
791 words
Files
2 (incl. references)
Skills in repo
3,342
Repo updated
First seen
Licence
MIT

At a glance

Implement reference architecture for Anima design-to-code automation.

  • Works in 5 steps: Ingest and authorize. Use Read to… → Generate in isolation. Run the pinned… → Normalize and verify. Use the token… → …
  • Designing a design system automation pipeline
  • SKILL.md covers Overview, Prerequisites, System Architecture and Instructions, plus 7 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Anima Reference Architecture is an agent skill from jeremylongshore/tons-of-skills-marketplace. Implement reference architecture for Anima design-to-code automation. Use when designing a design system automation pipeline, structuring a Figma-to-React project, or planning team-scale design handoff. Trigger with: "anima architecture", "design-to-code architecture", "anima project structure", "figma automation architecture".

Its SKILL.md is about 2.4k 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 Design systems. It works with Figma and React. 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

  • Designing a design system automation pipeline
  • Structuring a Figma-to-React project
  • Planning team-scale design handoff
  • With: anima architecture

Example prompts

  • “anima architecture”
  • “design-to-code architecture”
  • “anima project structure”
  • “/anima-reference-architecture”

Requirements

  • Node.js
  • 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

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Ingest and authorize. Use Read to inspect the existing repository conventions and the signed event payload. Check the file/node allowlist…
  2. Generate in isolation. Run the pinned SDK in a sandbox worker with bounded concurrency and an explicit output directory. Record a request…
  3. Normalize and verify. Use the token mapper and normalizer deterministically, then run formatting, type checks, dependency policy checks…
  4. Review and deliver. Use Write/Edit only within the approved workspace, create a draft change or pull request, and require an owner review…
  5. Promote and recover. Promote one canary component or sandbox project, compare aggregate health and visual/regression results, and then…

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

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

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

  • Network

    Links to these hosts (documentation or services it may open):

    • figma.com
    • docs.animaapp.com
    • github.com

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

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    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 Reference Architecture loads about 2.4k tokens when it runs, and up to ~2.6k if it reads all its reference files. Until then it costs about 90 tokens; SKILL.md has 791 words of instructions outside code blocks.

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

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). 791 words, ~2,367 tokens.

Download SKILL.mdSave it as .claude/skills/anima-reference-architecture/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
anima-reference-architecture
description
Implement reference architecture for Anima design-to-code automation. Use when designing a design system automation pipeline, structuring a Figma-to-React project, or planning team-scale design handoff. Trigger with: "anima architecture", "design-to-code architecture", "anima project structure", "figma automation architecture".
allowed-tools
Read, Write, Edit
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
[repository-or-service]
model
inherit
effort
high
license
MIT
author
Jeremy Longshore <jeremy@intentsolutions.io>
tags
saas, design, figma, anima, architecture

Anima Reference Architecture

Overview

This architecture separates design-source intake, authenticated code generation, deterministic post-processing, and reviewed delivery. It is intended for repeatable Figma-to-code pipelines where each run is bounded to approved files and nodes, produces inspectable artifacts, and can be stopped or rolled back without exposing design content or credentials.

Prerequisites

  • Define the target framework, repository layout, supported Anima/Figma SDK versions, and the owner who approves generated changes. Pin dependencies and create a sandbox Figma file with synthetic components for pipeline tests.
  • Obtain Figma and Anima credentials through the deployment secret manager, using least-privilege scopes and short-lived credentials where supported. Validate the configured Figma webhook passcode before accepting events; never commit, print, or place tokens in generated code, cache files, pull requests, or receipts.
  • Establish allowlists for Figma file IDs, node IDs, webhook sources, output repositories, and branch names. Define retention and deletion rules for source snapshots, generated output, and logs before enabling automation.
  • Prepare a dry-run mode, an artifact-diff gate, a staged canary environment, and a rollback reference to the last approved generated revision. Do not allow a webhook to publish directly to production.

System Architecture

┌────────────────┐     ┌──────────────┐     ┌─────────────────┐
│  Figma Design  │────▶│ Figma API    │────▶│ Anima SDK       │
│  (Components)  │     │ (Webhooks)   │     │ (Code Gen)      │
└────────────────┘     └──────────────┘     └────────┬────────┘
                                                      │
                                            ┌─────────▼────────┐
                                            │ Post-Processing   │
                                            │ - Token mapping   │
                                            │ - Normalization   │
                                            │ - Lint/format     │
                                            └─────────┬────────┘
                                                      │
                                            ┌─────────▼────────┐
                                            │ Output            │
                                            │ - React or HTML   │
                                            │ - PR creation     │
                                            │ - Storybook sync  │
└──────────────────┘

Instructions

  1. Ingest and authorize. Use Read to inspect the existing repository conventions and the signed event payload. Check the file/node allowlist, event freshness, source revision, and suppression/deletion rules before requesting any generation.
  2. Generate in isolation. Run the pinned SDK in a sandbox worker with bounded concurrency and an explicit output directory. Record a request fingerprint and source revision; keep source snapshots and generated files out of logs and clean temporary material after the run.
  3. Normalize and verify. Use the token mapper and normalizer deterministically, then run formatting, type checks, dependency policy checks, secret scanning, and a generated-file diff. Reject output that writes outside the allowlisted tree or contains credentials, unexpected network calls, or unapproved source data.
  4. Review and deliver. Use Write/Edit only within the approved workspace, create a draft change or pull request, and require an owner review before merge. Storybook or preview publishing must target a sandbox first and must not expose private design assets.
  5. Promote and recover. Promote one canary component or sandbox project, compare aggregate health and visual/regression results, and then roll out in batches. On failure, stop event consumption, restore the prior generated revision, revoke temporary credentials, delete staged artifacts according to retention policy, and record a redacted receipt.
Show full SKILL.md (396 more words)Show less

Error Handling

  • Reject unauthenticated, stale, duplicate, or out-of-scope webhook events before any API call. Return a generic status to the sender and keep detailed diagnostics restricted to the operator channel.
  • Treat Figma/Anima 401 and 403 responses as configuration or authorization failures; do not retry them automatically. Treat 429 and transient 5xx/network failures with the bounded retry and rate-limit policy, using an idempotency key or request fingerprint to prevent duplicate generation.
  • If post-processing, linting, type checking, or secret scanning fails, quarantine the generated tree and do not open or update a production change. Preserve only hashes, rule IDs, counts, and the rollback reference in the receipt.
  • If a worker or webhook delivery fails after generation, resume from the last durable stage rather than rerunning the whole pipeline. A rollback must be tested in the sandbox and must restore both repository state and event-consumer state.
  • Alert on repeated failures, scope drift, unexpected output paths, retention violations, or canary regressions. A human owner decides whether to retry, repair configuration, or disable the pipeline.

Examples

For a controlled component update, an event for file=synthetic-design-system; revision=r42; node=button-primary passes the allowlist, generates into generated/canary/, and produces a draft change containing only normalized component files. The receipt can record source_revision=r42; output_digest=sha256:opaque; checks=lint,type,secret-scan; canary=pass; production_promoted=false without storing the design payload or generated source.

For a failed canary, the pipeline records stage=storybook; reason=visual-regression; rollback=generated/r41; production_promoted=false, restores revision r41, stops further webhook consumption, and removes the staged directory after the retention check. The same sequence is the acceptance test for enabling production promotion.

Project Structure

design-to-code/
├── src/
│   ├── anima/
│   │   ├── client.ts              # Singleton SDK client
│   │   ├── cache.ts               # Generation cache
│   │   ├── retry.ts               # Error recovery
│   │   └── presets.ts             # Framework/styling presets
│   ├── pipeline/
│   │   ├── scanner.ts             # Figma component discovery
│   │   ├── generator.ts           # Batch code generation
│   │   ├── change-detector.ts     # Figma version tracking
│   │   └── runner.ts              # Pipeline orchestrator
│   ├── post-process/
│   │   ├── normalizer.ts          # Output normalization
│   │   ├── token-mapper.ts        # Design token mapping
│   │   └── organizer.ts           # File organization + barrel exports
│   ├── webhooks/
│   │   └── figma-handler.ts       # Figma webhook receiver
│   └── server.ts                  # Express API (optional)
├── scripts/
│   ├── generate-components.ts     # CLI generation script
│   └── compare-presets.ts         # Side-by-side preset comparison
├── fixtures/
│   └── component-map.json         # Figma node ID → component name mapping
├── generated/                     # Output directory (gitignored or committed)
├── .anima-cache/                  # Generation cache (gitignored)
└── package.json

Key Design Decisions

DecisionChoiceRationale
SDK@animaapp/anima-sdkOfficial, server-side, typed
Change detectionFigma Webhooks v2Event-driven, no polling waste
CachingFile-based with MD5 keysSimple, no external dependencies
Post-processingCustom normalizerMatch project conventions
CI integrationGitHub Actions scheduledAvoid real-time generation costs
Output frameworkRepository-approved React or HTML settingsMatch the pinned SDK and target application

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

  • Complete design-to-code pipeline architecture
  • Project structure with all components
  • Design decision rationale documented

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-reference-architecture of jeremylongshore/tons-of-skills-marketplace.

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

Open the folder on GitHubat commit cfae287

Compare with similar skills

Anima Reference Architecture 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 Reference Architecture compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Anima Reference Architecture this skilljeremylongshore/tons-of-skills-marketplace2.8k—~2.4kAutomated safety check: PassMIT
Cds Design To Codecoinbase/cds506—~4.9kAutomated safety check: PassApache-2.0
Figmahoodini/ai-agents-skills282—~4.5kAutomated safety check: PassNone
Figma use_figma Plugin API Ruleswarpdotdev/warp65k4 repos~4.4kAutomated 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

  • Cds Design To Code

    coinbase/cds

    Turn Figma designs into CDS React (cds-web) or React Native (cds-mobile) code.

    506 GitHub stars~4.9k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • Figma

    hoodini/ai-agents-skills

    Integrate with Figma API for design automation and code generation.

    282 GitHub stars~4.5k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • Figma use_figma Plugin API Rules

    warpdotdev/warp

    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 System Rules Generator

    warpdotdev/warp

    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

  • Figma Code Connect Components

    warpdotdev/warp

    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

Categories

Questions about Anima Reference Architecture

What does Anima Reference Architecture do?

Implement reference architecture for Anima design-to-code automation. Anima Reference Architecture is an agent skill from jeremylongshore/tons-of-skills-marketplace. Implement reference architecture for Anima design-to-code automation.

When should I use Anima Reference Architecture?

Anima Reference Architecture fits situations like: designing a design system automation pipeline; structuring a Figma-to-React project; planning team-scale design handoff; with: anima architecture.

How do I install Anima Reference Architecture in Claude Code?

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

How do I install Anima Reference Architecture in Codex?

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

Can I use Anima Reference Architecture 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-reference-architecture -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-reference-architecture, .gemini/skills/anima-reference-architecture, .github/skills/anima-reference-architecture and .opencode/skills/anima-reference-architecture in your project.

What does Anima Reference Architecture need to run?

SKILL.md names no scripts, command-line tools or credentials: Anima Reference Architecture is instructions for the agent only. Our summary lists: Node.js. Its frontmatter pre-approves these tools: Read, Write, Edit. 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 Reference Architecture access the network?

SKILL.md names 3 domains. As links in the text: figma.com, docs.animaapp.com and github.com. This is read from the text; nothing was executed.

Is Anima Reference Architecture 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 Reference Architecture use?

Anima Reference Architecture 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 Reference Architecture use?

About 2.4k tokens (SKILL.md is roughly 9.5k 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 199 tokens, read only when the agent opens those files.

What are the alternatives to Anima Reference Architecture?

Skills that share tags, products or a category with Anima Reference Architecture: Cds Design To Code (coinbase/cds, 506 stars), Figma (hoodini/ai-agents-skills, 282 stars), Figma use_figma Plugin API Rules (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 Reference Architecture?

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.