skills.rest
ThanapatJutha
ThanapatJuthaCOMMUNITY
Explore all skills by this author →
GitHub

component-spec-layer

Generate .figma.tsx wrapper components that render UI library components without business logic.

Updated Mar 18, 2026
Search Tags:#connections#figma#mapping#component-spec#wrapper#ui-library
One-click install
npx skills add https://github.com/ThanapatJutha/th_gene2-figma-mcp --skill component-spec-layer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-spec-layer
Source: https://github.com/ThanapatJutha/th_gene2-figma-mcp/tree/main/packages/gene2-figma-mcp/skills/component-spec-layer
Command: npx skills add https://github.com/ThanapatJutha/th_gene2-figma-mcp --skill component-spec-layer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Rules for creating and managing .figma.tsx component spec files. Use when creating, reading, or updating React component files in figma/components/, managing connections.json mappings, or syncing code↔Figma component state.

Core Features & Use Cases

  • Read and validate existing .figma.tsx files and their mappings.
  • Generate wrapper .figma.tsx components that import and render real UI library components with all visual variants, without business logic.
  • Save and organize component specs in figma/components/ alongside source code and connection mappings.

Quick Start

Run the bridge to generate and manage .figma.tsx component specs for your UI components.

Frequently Asked Questions about component-spec-layer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate Figma component spec wrappers for my React UI library?▼

To generate Figma component spec wrappers, the skill automates creating .figma.tsx files in figma/components/ that import and render real UI library components with all visual variants, enforcing a strict no-business-logic rule.

What are .figma.tsx wrapper components and when do I need them for connections.json?▼

The .figma.tsx wrapper components are React files that render existing UI library components for Figma without business logic. You need them when managing connections.json mappings to sync code and Figma component state.

Can I use this to sync visual variants between my UI library and Figma without adding business logic?▼

Yes, you can sync visual variants because the skill imports real UI library components and renders them in .figma.tsx wrapper files, specifically enforcing a no-business-logic rule to maintain visual spec consistency.

What's the best way to manage component mappings in figma/components/ alongside source code?▼

The best way to manage component mappings is to save and organize generated .figma.tsx component specs directly in figma/components/, keeping them alongside existing source code and connections.json mappings for consistent state.

Do I need an existing connections.json file to validate my figma component specs?▼

You need an existing connections.json file if you want to validate mappings, as the skill reads and validates .figma.tsx files against their connections to ensure proper code and Figma component state synchronization.

Why should component spec files exclude business logic when wrapping UI components for Figma?▼

Component spec files should exclude business logic to ensure visual spec consistency across design and code, allowing the .figma.tsx wrappers to accurately render UI library components without interfering with application state.

Related Skills

Explore More Design & Creative Skills→
vecearvecear

storybook-setup

Automate Storybook setup, configuration, and CSF3 story authoring for frontend projects.

Community
Intermediate
bitovibitovi
1

figma-connect-component

Generate .figma.tsx Code Connect mappings from Figma component properties.

Official
Advanced
coinbasecoinbase
493

figma.create-connect

Generate Figma Code Connect mapping files for React components.

Official
Intermediate
elsolalelsolal
1

figma-setup

Configure Code Connect to generate .figma.tsx mappings for existing UI components.

Community
Intermediate