Troy-Web-Consulting

Claude Figma Skills — Testing skill for Claude Code

Testing community

Claude Code skills for Figma work — session setup, component building, spec cross-reference, token sync, variable binding, and library migration.

How to install Claude Figma Skills

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Troy-Web-Consulting/claude-figma-skills and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Claude Figma Skills does

Claude Code skills for Figma work — session setup, component building, spec cross-reference, token sync, variable binding, and library migration.

Alternatives in Testing

Langgraphjs — by langchain-ai - Offers comprehensive build and test commands with detailed TypeScript style guidelines, laye 2.7k ★
Claude Codepro — by Max Ritter - Professional development environment for Claude Code with spec-driven workflow, TDD enforcemen 1.6k ★
Inkline — by inkline - Structures development workflow using pnpm with emphasis on TypeScript and Vue 3 Composition API 1.4k ★

README

Claude Figma Skills

Reusable Claude Code skills for Figma work — built from real sessions on design system projects at Troy Web. These cover the full Figma-in-Claude workflow: session setup, component construction, spec cross-reference, token sync, variable binding, and library migration.

These are **not** the official Figma MCP skills. They're the layer above: operational workflows, hard-won API patterns, and codified technique that the official skills don't provide.

The Three-File Contract

Every skill in this repo reads the same three project files. Drop them into a project once and every skill works without per-skill configuration.

Layer	File	Lives in	Role
Rules	`design.md`	consuming project (e.g. `my-project/docs/design.md`)	Prose: naming, token scales, architecture, taste. Short (200–800 words). Skills read it every invocation.
State	`figma-registry.json`	consuming project (e.g. `my-project/docs/figma-registry.json`)	Machine-maintained cache: component node IDs, variable collection IDs, resolved alias chains, deprecation maps, audit triage rules.
Config	`.claude/figma-config.json`	consuming project	Declares `fileKey`, points at `design.md` and `figma-registry.json`, sets artifact paths.

The contract is **input-format as interface** — skills detect the three files, they don't assume layouts. Starter versions of all three live in `templates/`.

**Design philosophy:** skills encode *how to do things*, not *what things should be called*. Taste and naming live in `design.md`; state lives in `figma-registry.json`; skills stay thin.

Skills

`figma-workspace`

**Entry point for every Figma session.** Detects the three-file contract, loads `design.md`, surfaces the registry, and routes operations to the correct tool (`use_figma` vs Desktop Bridge).

Always invoke this first — other skills assume the context it establishes.