Agent skill · software engineering · jeremylongshore
anima-hello-world
Generate reviewable React or HTML code from a Figma design using the Anima SDK.
Why this skill is useful
Adds executable scripts for generating production-ready React, Vue, or HTML code from Figma designs that the AI cannot generate on its own.
What it needs
Requires @animaapp/anima-sdk installed locally. Requires anima account access. About 3k tokens when loaded. Last updated 2026-08-07. 2,604 stars on the source repository.
What this skill does
Anima Hello World Overview Generate reviewable React or HTML from one approved Figma node with the backend-only @animaapp/anima-sdk. Keep credentials server-side and treat every generated file as untrusted output until its path, dependencies, build, and visual result pass review. Prerequisites Completed anima-install-auth setup A Figma file with at least one frame/component Know your file key and node ID Instructions Step 1: Generate React + Tailwind Code Step 2: Try Supported Output Settings Step 3: Inspect Generated Output Step 4: Integrate into Existing Project Settings Reference Setting Options Default --------- --------- --------- language typescript, javascript typescript framework react, html Required styling plaincss, tailwind, inlinestyles Required uiLibrary mui, antd, radix, shadcn, cleanreact, customdesignsystem Omit for vanilla React 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 A contained React or HTML generation result from one approved Figma node A filename/content manifest and rejected-path report Formatter, type-check, dependency, and visual-review receipts Examples Create a small staging Figma frame with an approved button and heading, store the Anima/Figma credentials in a local ignored environment file, and generate only that node into ./generated. Confirm each filename resolves under the output directory, inspect the component for expected labels and styles, then run the project formatter and type check before copying it into a feature branch. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills jeremylongshore/anima-hello-world