CtrlK
BlogDocsLog inGet started
Tessl Logo

cds-design-to-code

Turn Figma designs into CDS React (cds-web) or React Native (cds-mobile) code. Use when the user shares a Figma design URL (e.g. `figma.com/design/...?node-id=...`) or asks to "implement this design" or "build this from Figma" in a frontend project that is using Coinbase Design System (CDS). Do not use for general CDS UI work with no Figma reference (use `cds-code`), or for design critique without an implementation request.

69

Quality

84%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Critical

Do not install without reviewing

SKILL.md
Quality
Evals
Security

Quality

Content

81%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is a strong, actionable workflow with excellent validation structure and concrete tool/command guidance. Its main gaps are minor verbosity and the absence of a complete worked code example or split-out reference files.

Suggestions

Remove the duplicated 'Do not start the dev server or take screenshots until Phase 1 is clean' line (it appears in both the Phase 1 intro and step 5) to tighten conciseness.

Add one complete, copy-pasteable CDS component example (e.g. a VStack with gap/paddingX derived from a fallback snippet) to lift actionability from mostly-executable to fully copy-paste ready.

Consider moving the 'Common Issues and Solutions' section and the confidence matrix into a reference file under references/ to improve progressive disclosure now that the skill exceeds 50 lines.

DimensionReasoningScore

Conciseness

The ~260-line body is mostly earned operational guidance (Figma MCP handling, validation) rather than explanation of basic concepts, with only minor trim opportunities such as the repeated 'do not start the dev server until Phase 1 is clean' line; not lean enough for 5 but clearly above the 3 midpoint.

4 / 5

Actionability

Provides concrete tool calls with parameters (get_design_context, get_metadata(fileKey=..., nodeId=...), get_screenshot), real validation commands (yarn typecheck, tsc -p tsconfig.app.json --noEmit), and a translation table (flex-row -> HStack, font-size/weight -> font="caption"); lacks a complete copy-paste component example, so it stops short of 5.

4 / 5

Workflow Clarity

A six-step ordered workflow with explicit validation checkpoints (Phase 1 code-quality gate, Phase 2 visual parity), feedback loops ('Fix ALL errors before proceeding', corrective implement-compare-correct-recheck loop), and a final checklist, matching the 5 anchor.

5 / 5

Progressive Disclosure

No bundle files exist, but the body is well-sectioned (When to use, Prerequisites, Required Workflow, Common Issues, Communication Style) and defers detail to the cds-code/cds-docs skills; some inline material (Common Issues, the confidence matrix) could be split out, so it sits at 4 rather than 5.

4 / 5

Total

17

/

20

Passed

Description

87%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description is well-crafted: third-person, concrete, with explicit trigger conditions and clear disambiguation from the sibling cds-code skill. Its only weakness is that it frames a single primary action rather than enumerating multiple sub-capabilities.

DimensionReasoningScore

Specificity

Names the domain and a concrete action ('Turn Figma designs into CDS React (cds-web) or React Native (cds-mobile) code') across two specific platforms, but enumerates a single primary action rather than multiple distinct operations, so it stops short of the comprehensive 5 anchor.

4 / 5

Completeness

Explicitly answers both what ('Turn Figma designs into ... code') and when ('Use when the user shares a Figma design URL ... or asks to implement this design or build this from Figma'), with concrete trigger phrases and negative guidance, matching the 5 anchor.

5 / 5

Trigger Term Quality

Strong natural triggers including the URL pattern 'figma.com/design/...?node-id=...', 'implement this design', 'build this from Figma', plus synonyms (CDS, Coinbase Design System, cds-web, cds-mobile); a few less common phrasings a user might say are not covered, keeping it just below 5.

4 / 5

Distinctiveness Conflict Risk

Clear niche (Figma -> CDS code) with explicit disambiguation ('Do not use for general CDS UI work ... use cds-code', 'Do not use for design critique'), giving minimal conflict risk per the 5 anchor.

5 / 5

Total

18

/

20

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
coinbase/cds
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.