component-spec-layer

Community

Wrap UI components for Figma with clean specs.

AuthorThanapatJutha
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: component-spec-layer
Download link: https://github.com/ThanapatJutha/th_gene2-figma-mcp/archive/main.zip#component-spec-layer

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.