figma-to-react

Installation
SKILL.md

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">
Installs
3
GitHub Stars
233
First Seen
Jun 9, 2026
figma-to-react — majiayu000/spellbook