figma-to-code
Implement Figma designs in code with accurate layout, spacing, typography, and tokens. Use when implementing designs from Figma, translating mockups to React/CSS, or when the user mentions Figma, design specs, or Dev Mode.
Install with Tessl CLI
npx tessl i github:jamesmoss/frontend-skills --skill figma-to-code90
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillValidation for skill structure
Discovery
100%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a well-crafted skill description that excels across all dimensions. It provides specific capabilities (layout, spacing, typography, tokens), includes natural trigger terms users would actually say (Figma, mockups, Dev Mode), and explicitly states both what the skill does and when to use it. The Figma-specific focus makes it clearly distinguishable from other skills.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'implement Figma designs in code', 'accurate layout, spacing, typography, and tokens', 'translating mockups to React/CSS'. These are concrete, actionable capabilities. | 3 / 3 |
Completeness | Clearly answers both what ('Implement Figma designs in code with accurate layout, spacing, typography, and tokens') and when ('Use when implementing designs from Figma, translating mockups to React/CSS, or when the user mentions Figma, design specs, or Dev Mode'). | 3 / 3 |
Trigger Term Quality | Includes natural keywords users would say: 'Figma', 'designs', 'mockups', 'React/CSS', 'design specs', 'Dev Mode'. Good coverage of terms a user would naturally use when needing this skill. | 3 / 3 |
Distinctiveness Conflict Risk | Clear niche focused specifically on Figma-to-code implementation. The triggers 'Figma', 'Dev Mode', 'design specs' are distinct and unlikely to conflict with general coding or design skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
79%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a strong, actionable skill that efficiently maps Figma concepts to code implementations with concrete examples and clear mappings. The main weaknesses are the lack of explicit validation checkpoints in the workflow and the monolithic structure that could benefit from splitting advanced topics into referenced files.
Suggestions
Add explicit validation steps to the workflow, such as 'Compare rendered output against Figma frame at key breakpoints' or 'Run accessibility audit before marking complete'
Consider splitting the Design Tokens Pipeline and Accessibility sections into separate referenced files (e.g., TOKENS.md, ACCESSIBILITY.md) to improve progressive disclosure
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is lean and efficient, using bullet points and tables to convey mappings without explaining concepts Claude already knows (like what flexbox is or how CSS works). Every section adds actionable value. | 3 / 3 |
Actionability | Provides concrete, executable mappings (e.g., '16px → p-4', 'auto layout vertical → flex-direction: column') and includes a complete, copy-paste ready Tailwind example at the end. | 3 / 3 |
Workflow Clarity | The 5-step workflow is clear and sequenced, but the 'Verify' step lacks explicit validation checkpoints or feedback loops for catching errors. The checklist helps but doesn't integrate into the workflow as validation gates. | 2 / 3 |
Progressive Disclosure | Content is well-organized with clear sections, but it's a monolithic file with no references to external documentation for advanced topics like the design tokens pipeline or accessibility deep-dives that could be split out. | 2 / 3 |
Total | 10 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Reviewed
Table of Contents
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.