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 | $0.00018 | $0.01159 |
| Sonnet 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 9d 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.
- 9d 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 (277 stars, last pushed yesterday), licensed MIT. It adds 36 tokens to every session and 2,319 once invoked, about $0.0002 per session on Opus 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
Cursor rules for Next
Cursor rules for Next.js App Router with TanStack Query v5, covering the HydrationBoundary pattern, Server Actions as mutations, and optimistic updates.
Next
Next.js App Router combined with TanStack Query v5 — HydrationBoundary pattern, Server Actions as mutations, optimistic updates, and infinite scroll.
Cursor rules for JavaScript development with Astro and Tailwind CSS integration
Skill "Cursor rules for JavaScript development with Astro and Tailwind CSS integration" from AmariahAK/atlarix-skills, covering when to use this skill and source.
Cursor rules for Next
Cursor rules for Next.js development with React and Tailwind CSS integration.
Cursor rules for TypeScript, React, Node
Cursor rules for TypeScript, React, Node.js, clean architecture, testing, and WHY-oriented engineering guidance.
Cursor rules for avoiding placeholder or broken image URLs, using stable visual
Cursor rules for avoiding placeholder or broken image URLs, using stable visual assets, and checking alt text, dimensions, licensing, and responsive behavior.