Figma to React Skill: Lossless Next.js Components

What is the figma-to-react skill?

A header title at top 41px, not 82px, and a header line at top 100px, not 141px. Those verified positions sit in the figma-to-react skill because it exists to stop a common mistake when turning Figma MCP output into code.

The skill's own description is extracting Figma designs into production-ready React or Next.js components with TypeScript, Tailwind CSS and pixel-perfect accuracy. It is a long list of rules, each with a wrong and a correct example.

The rules, in the order the skill lists them

1. Never truncate code. Use all of the Figma MCP output and keep every className.
2. Flatten absolute contents wrappers. Children are already positioned absolutely, so keep their offsets and drop the parent.
3. Extract dimensions from metadata by calling mcp__figma__get_metadata, never hardcode a frame size.
4. Load fonts from the Google Fonts CDN link in layout.tsx instead of next/font/google, and map Figma font names to Tailwind classes.
5. Add critical CSS to globals.css, including horizontal overflow and a .page-container that does not compress.
6. Replace simple line images with CSS lines.
7. Inline SVG assets.
8. Remove fixed heights from multi-line text blocks.

Why the font and height rules matter

The skill warns that Figma weight names may not match CSS weights. Bold may need 500 or 600, and ExtraBold may need 700, so you compare against a Figma screenshot. It also fixes old names: Source Serif Pro becomes Source Serif 4.

On text, it explains that fixed heights from Figma cause overflow and different line counts, so multi-line paragraphs lose their height. Containers, single-line table rows and images keep theirs. Later rules, including table pattern detection, live in a reference file.

Who the figma-to-react skill is for

Best for

• Developers who already have a Figma MCP server connected and want the generated React matched to the design. See Framelink Figma MCP or the free Figma MCP for ways to connect.
• Teams building in Next.js with Tailwind, where Tailwind 4 conventions may also apply.
• Anyone whose pages must match a fixed frame, such as 1920 by 1080, closely.

Not for

• Projects without a Figma MCP connection, since every rule starts from its output.
• Fluid layouts. The skill leans on absolute positioning taken from the frame, so use frontend responsive UI when the page must reflow.
• Sites that will live in WordPress, where React output is the wrong target.

Use it with UiChemy

This skill outputs React, not WordPress. If your Figma design is headed for Elementor or Gutenberg, UiChemy's Figma to WordPress plugin converts the design directly. Click Get Started on uichemy.com to see that route.

How to install Figma to React Skill: Lossless Next.js Components

git clone https://github.com/majiayu000/spellbook.git

1. Clone the repository

   Run git clone https://github.com/majiayu000/spellbook.git. The skill is in plugins/spellbook-ui/skills/figma-to-react.

2. Copy the skill folder

   Copy that folder, including its reference subfolder with extended.md, into your agent's skills folder. For Claude Code the README names ~/.claude/skills, and for Codex it names ~/.agents/skills.

3. Or use the repository installer

   The README shows ./install.sh --target all --skills followed by comma separated skill names, run from the clone. Pass figma-to-react as the name.

4. Connect a Figma MCP server

   The skill expects Figma MCP output and a metadata call, so connect one before you start.

Check that it loaded

In Claude Code, type / and look for figma-to-react in the list. For Codex, restart it so it reloads ~/.agents/skills. Then ask for a component from a Figma frame and check that className values are kept.

Read the official instructions on GitHub

Key features

• Lossless output ruleUse all of the Figma MCP output and keep every className, since removing any of them changes the result.
• Wrapper flatteningRemoves redundant absolute contents parents and keeps the children's own top and left values.
• Position tableA small table says when to keep child offsets as they are and when to add parent and child values.
• Metadata-based sizingCalls mcp__figma__get_metadata with a file key and node ID, then reads width and height from the returned frame.
• Google Fonts CDN loadingPuts a Google Fonts link in layout.tsx, with the opsz axis for Source Serif 4, instead of using next/font/google.
• Font name mappingConverts Figma font strings to Tailwind classes such as font-kaisei font-extrabold, and corrects Source Serif Pro and Source Sans Pro to the 4 and 3 names.
• Weight mismatch guidanceNotes that Figma Bold may need 500 or 600 and ExtraBold may need 700, and says to test visually.
• Critical CSSAdds body overflow-x auto and a page-container with min-width max-content and inline-block display.
• Lines and SVG cleanupSwaps simple line images for CSS lines and inlines SVG assets in place of image tags.
• Text height ruleRemoves fixed heights from multi-line text and keeps them on containers, single-line table rows, images and icons.

Frequently asked questions