CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

Quality

85%

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.

A strong, well-sequenced workflow document: ordered steps, hard validation gates, feedback loops, and a final checklist, with concrete tool names, parameter guidance, and translation examples throughout. The main headroom is trimming the duplicated Phase 1 warnings and occasionally restated fallback logic.

DimensionReasoningScore

Conciseness

The body is directive and largely free of padding — it never explains concepts Claude already knows and correctly delegates styling rules and component selection to the `cds-code` skill. Minor tightening opportunities exist: 'Do not start the dev server or take screenshots' appears in both the Phase 1 intro and its step 5, and the Step 1 fallback logic partly restates the Prerequisites section. Not enough redundancy to drop to 'could be tightened' at 3, but more than 'every token earns its place'.

4 / 5

Actionability

Concrete throughout: exact MCP tool names and parameters (`get_design_context` with `clientFrameworks` and `disableCodeConnect: false`, `get_metadata(fileKey=":fileKey", nodeId="1-2")`), explicit translation mappings (`flex-row` -> `HStack`, `font-size: 10px; font-weight: 500` -> `font="caption"`), and runnable validation commands (`tsc -p tsconfig.app.json --noEmit`). Per the rubric's scoring note for instruction-only skills the absence of full code samples is acceptable, but a couple of spots (e.g. the exact `clientFrameworks` value format) remain underspecified, keeping it just below fully copy-paste-ready.

4 / 5

Workflow Clarity

Six explicitly ordered steps with 'Do not skip steps', a two-phase validation gate (compile/lint before any rendering, 'Fix ALL errors before proceeding'), a corrective visual loop, a final checklist, and a dedicated Common Issues section with recovery paths for each failure mode. This matches the top anchor: clear sequence, explicit validation steps, and feedback loops for error recovery.

5 / 5

Progressive Disclosure

No bundle files exist and the skill is self-contained with well-labeled sections, clear step hierarchy, and a table for the confidence matrix; delegation to `cds-code` for styling rules and doc lookup is correctly one level deep and clearly signaled. It is not a 5-with-just-sections case (the ~250-line body includes material like the detailed Phase 2 tool-detection walkthrough and the Common Issues section that could live in reference files), so 'good structure, most content appropriately placed, minor organization gaps' fits.

4 / 5

Total

17

/

20

Passed

Description

82%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.

A well-crafted description with explicit what/when trigger guidance, concrete URL patterns, and explicit boundary disambiguation from sibling skills. The only notable gap is that the capability statement summarizes the workflow in one action verb rather than listing the specific operations covered.

Suggestions

Enumerate 2-3 concrete capabilities in the description (e.g. 'fetches design context via Figma MCP, translates fallback HTML/Tailwind into CDS components, and validates visual parity') to lift specificity.

Add one or two common user phrasings such as 'Figma file' or 'convert this design' to broaden trigger coverage.

Keep the added capability list terse so the description does not drift into verbosity.

DimensionReasoningScore

Specificity

The description names the domain ('Turn Figma designs into CDS React (cds-web) or React Native (cds-mobile) code') with one concrete action — design-to-code translation — but does not enumerate the several specific actions that the workflow actually covers (fetching design context, capturing visual reference, downloading assets, validating). It sits at 'names domain and 1-2 concrete actions' rather than the level-4 anchor requiring a list of several specific actions.

3 / 5

Completeness

It explicitly answers 'what' ('Turn Figma designs into CDS React or React Native code') and 'when' ('Use when the user shares a Figma design URL ... or asks to "implement this design"') with concrete trigger phrases, and additionally adds negative triggers ('Do not use for general CDS UI work ... use `cds-code`'). Both halves are explicit and concrete, matching the top anchor.

5 / 5

Trigger Term Quality

Strong natural triggers: 'Figma design URL', the concrete pattern 'figma.com/design/...?node-id=...', 'implement this design', and 'build this from Figma' are phrases users would actually say. A few common variations (e.g. 'Figma file', 'convert this design', 'design to code') are absent, so it stops short of comprehensive synonym coverage.

4 / 5

Distinctiveness Conflict Risk

It carves out a clear niche (Figma-referenced implementation in a CDS project) and explicitly disambiguates from the nearest neighbor ('Do not use for general CDS UI work with no Figma reference (use `cds-code`)') and from design critique. Minimal conflict risk with distinct triggers.

5 / 5

Total

17

/

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.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

coinbase/cds

Path

skills/cds-design-to-code/SKILL.md

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.