cds-design-to-code

Turns frontend designs from Figma into CDS-first React or React Native code. Use this skill whenever the user shares a Figma URL such as `figma.com/design/...?...node-id=...` while working in a frontend application context.

Quality

83%

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Advisory

Suggest reviewing before use

Quality

Content

77%

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

This is a well-structured, highly actionable skill with a clear multi-step workflow and strong validation checkpoints. Its main weakness is verbosity — it re-explains concepts delegated to the `cds-code` skill and includes detailed inline content that could be split into supporting files. The workflow sequencing and error handling are excellent, making this a reliable guide for the Figma-to-CDS translation process.

Suggestions

Extract the 'Props before style' section and the 'Translating fallback HTML and Tailwind classes' section into a separate reference file (e.g., TRANSLATION_GUIDE.md) to reduce the main skill's token footprint.

Trim the 'When to use' and 'Prerequisites' sections — Claude can infer most of these conditions from context, and the negative cases ('Do not use when...') add tokens without much value.

Dimension	Reasoning	Score
Conciseness	The skill is well-structured but verbose in several areas. It explains concepts Claude would understand (e.g., what a Figma URL looks like, what Code Connect is), includes lengthy tables and checklists that could be tightened, and repeats guidance already delegated to the `cds-code` skill (e.g., 'Props before style' section rehashes rules it says are in the other skill). The 'When to use' and 'Prerequisites' sections are reasonable but could be leaner.	2 / 3
Actionability	The skill provides concrete, executable MCP tool calls (e.g., `get_design_context(fileKey=..., nodeId=...)`, `get_screenshot(...)`), specific URL parsing examples with before/after values, a clear confidence hierarchy table for translating Figma output, and detailed translation examples (e.g., `flex-row` → `HStack`). The guidance is specific enough to be directly followed.	3 / 3
Workflow Clarity	The 8-step workflow is clearly sequenced with explicit ordering ('Follow these steps in order. Do not skip steps.'). It includes validation checkpoints (Step 7 visual comparison loop, Step 8 validation checklist), error recovery paths (truncated responses, missing MCP servers, fallback HTML), and a corrective feedback loop (implement → compare → correct → re-check). The validation checklist in Step 8 is thorough.	3 / 3
Progressive Disclosure	The skill appropriately delegates CDS coding standards to the `cds-code` skill with clear references, but the SKILL.md itself is monolithic at ~250+ lines with no bundle files to offload detailed content. The 'Props before style' section and translation examples could be in a separate reference file. The common issues section is inline when it could be a separate troubleshooting doc. However, the cross-references to `cds-code` are well-signaled.	2 / 3
	Total	10 / 12 Passed

Description

89%

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 solid skill description with clear trigger conditions and a well-defined niche. The explicit Figma URL pattern and 'Use this skill whenever' clause make it easy for Claude to know exactly when to select it. The main weakness is that the 'what' portion could be more specific about the concrete actions performed (e.g., extracting styles, generating components, mapping design tokens).

Suggestions

Expand the capability description to list specific actions, e.g., 'Extracts layout, styles, and components from Figma designs and generates CDS-first React or React Native code with proper component hierarchy and styling.'

Dimension	Reasoning	Score
Specificity	Names the domain (Figma to code conversion) and mentions specific technologies (CDS, React, React Native), but doesn't list multiple concrete actions beyond 'turns designs into code' — no mention of specific outputs like components, styles, layouts, etc.	2 / 3
Completeness	Clearly answers both 'what' (turns Figma designs into CDS-first React/React Native code) and 'when' (when user shares a Figma URL in a frontend application context), with an explicit 'Use this skill whenever...' clause and URL pattern example.	3 / 3
Trigger Term Quality	Includes strong natural trigger terms: 'Figma', 'Figma URL', 'figma.com/design/', 'node-id', 'React', 'React Native', 'frontend'. These are terms users would naturally use when sharing a Figma design for code generation.	3 / 3
Distinctiveness Conflict Risk	Highly distinctive — the combination of Figma URL pattern, CDS-first approach, and React/React Native output creates a very clear niche that is unlikely to conflict with other skills.	3 / 3
	Total	11 / 12 Passed

Validation

100%

Warnings & errors only

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.

Repository: coinbase/cds
Commit: f79a780

Reviewed: 2 months ago

Table of Contents

Discovery Implementation Validation

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.