Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →majiayu000/figma-to-react
Use when the user wants to extract Figma designs into production-ready React or Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy.
Passed 20 of 22 test cases with the skill, and 12 of 22 without it.
and 11 more in the full report
8 fixed12 passed either way2 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 8 test cases the skill fixed. Same model, same prompt, with and without the skill.
When removing explicit heights from layout nodes, should single-line table row elements and card container boxes have their explicit height classes removed as well?
| Checked | Without skill | With skill |
|---|---|---|
| Retains explicit height utility classes for container boxes | Missed | Passed |
| Retains explicit height utility classes for single-line table rows | Missed | Passed |
The instructions your model reads when the skill loads.
Extract complete, lossless design information from Figma and generate production-ready React/Next.js components with TypeScript and Tailwind CSS.
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]">
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" />
</>
test cases passed, vs 12 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.