Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add majiayu000/spellbook --skill figma-to-reactgit clone --depth 1 https://github.com/majiayu000/spellbookWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/majiayu000/spellbook/figma-to-react)<a href="https://agentmods.dev/skills/majiayu000/spellbook/figma-to-react"><img src="https://agentmods.dev/badge/skills/majiayu000/spellbook/figma-to-react/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/majiayu000/spellbook/figma-to-react"><img src="https://agentmods.dev/badge/skills/majiayu000/spellbook/figma-to-react.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00036 | $0.02319 |
| Opus 5.5 | $0.00014 | $0.00928 |
| Sonnet 5.5 | $0.00007 | $0.00464 |
| Haiku 4.5 | $0.00004 | $0.00232 |
Grade A, and why
figma-to-react scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
This is a copy
94% identical to figma-to-code — 6 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 257 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Figma to React - Production-Ready Component Generator
🎯 Purpose
Extract complete, lossless design information from Figma and generate production-ready React/Next.js components with TypeScript and Tailwind CSS.
🚨 CRITICAL RULES - Read First!
Rule 1: NEVER Truncate Code
Use 100% of Figma MCP output. Every className, every property matters.
// ✅ CORRECT: Keep ALL className from Figma MCP
<div className="absolute font-source-serif h-[108px] leading-[1.8] left-[100px] not-italic text-[20px] text-[rgba(29,38,45,0.8)] text-justify top-[210px] w-[1096px] whitespace-pre-wrap">
// ❌ WRONG: Removing any className
<div className="absolute left-[100px] top-[210px] font-source-serif text-[20px]">
Rule 2: Flatten absolute contents Structures
🔥 CRITICAL: Figma MCP returns nested absolute contents containers. display: contents makes the parent "disappear" - children are positioned relative to the nearest positioned ancestor (root)!
Key Insight: Children's positions are ALREADY absolute - DO NOT add parent's top/left!
// ❌ WRONG: Figma MCP output (has redundant parent wrapper)
<div className="absolute contents left-0 top-[41px]">
<p className="absolute left-[100px] top-[41px]">TITLE</p>
<div className="absolute left-0 top-[100px]">Line</div>
</div>
// ✅ CORRECT: Just remove the parent wrapper, keep children's positions AS-IS
<>
<p className="absolute left-[100px] top-[41px]">TITLE</p>
<div className="absolute left-0 top-[100px] w-[1920px] h-[1px] bg-[#C5CBCE] opacity-30" />
</>
Position Handling Rules:
| Parent Type | Child Position | Action |
|---|---|---|
absolute contents |
Child has own top/left |
Keep child position AS-IS, just remove parent |
absolute (no contents) |
Child has relative top/left |
Calculate: parent + child |
relative |
Child has top/left |
Calculate: parent + child |
🔥 The Golden Rule:
If parent has "contents" class → Child positions are already absolute → Keep AS-IS
If parent has NO "contents" class → Child positions are relative → Add parent + child
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 2mo ago First seen · 257 lines · 36 tokens per session scan A 4d4890db449f
figma-to-react is a skill published in the GitHub repository majiayu000/spellbook (288 stars, last pushed yesterday), licensed MIT. It adds 36 tokens to every session and 2,319 once invoked, about $0.0001 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 94% identical to figma-to-code, differing in 6 lines, and is treated as a copy.
Other skills, from other repositories
intelligent-ui
Helps agents choose prose, native controls, dashboards, motion, or 3D from the user's goal. Use when a user asks to explain, teach, compare, or present information visually, asks you to choose a format, requests a video or code-authored animation as the deliverable, or an interactive artifact may improve understanding…
Excalidraw
Sketches ideas as hand-drawn Excalidraw diagrams on a live local canvas via the pinned mcp-excalidraw-server CLI, with mermaid conversion, file I/O, and share links. USE WHEN excalidraw, whiteboard, canvas, sketch a diagram, draw this on a canvas, hand-drawn diagram, draw my idea, architecture sketch, live canvas, put…
RichFormat
The rich-answer rendering mod, a Claude Code function-hooks plugin that draws assistant replies in the terminal with boxed flow diagrams, bar charts, sparklines, trees and timelines, coloured section labels, insight and caution callout bars, red and green diffs, and green and red VERIFY marks, leaving the stored text…
ApertureOscillation
3-pass scope oscillation that holds a question constant while shifting zoom — narrow/tactical, wide/strategic, then synthesis — to surface design tensions, scope recommendations, and coherence assessments invisible at any single zoom level. USE WHEN aperture oscillation, oscillate scope, zoom in and out, tactical vs…
python-release
Handle Python SDK release, build, bump, packaging metadata, PyPI client pin, uv.lock, nox/build workflow, and publish verification changes. Use for Python release process work or dependency pin bumps; do not use for ordinary Python feature implementation.
learn
Runs a six-phase research workflow from source bundle to publish-ready output. Use when researching an unfamiliar domain or compiling materials into one reference. Not for quick lookups or single-file reads.