cds-code
Produces high quality Coinbase Design System (CDS) code for React and React Native projects. Always use this skill every time you are asked to create or update UI or write React or React Native code.
75
68%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/cds-code/SKILL.mdQuality
Discovery
67%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 has a clear 'when to use' clause which is a strength, and it identifies a specific design system (CDS). However, it lacks concrete action specificity beyond 'produces code' and its trigger scope is overly broad—claiming all React/React Native code writing—which creates high conflict risk with other coding skills.
Suggestions
Add specific concrete actions such as 'Creates components using CDS tokens, applies Coinbase theme styles, implements CDS layout patterns' to improve specificity.
Narrow the trigger scope to avoid conflict with general React skills—e.g., 'Use when the user requests Coinbase-branded UI, CDS components, or references the Coinbase Design System' rather than all React code.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (Coinbase Design System, React/React Native) and a general action ('produces high quality code'), but does not list specific concrete actions like 'creates components, applies theme tokens, implements layouts'. | 2 / 3 |
Completeness | Clearly answers both 'what' (produces CDS code for React/React Native) and 'when' ('Always use this skill every time you are asked to create or update UI or write React or React Native code'), with explicit trigger guidance. | 3 / 3 |
Trigger Term Quality | Includes relevant keywords like 'React', 'React Native', 'UI', 'CDS', and 'Coinbase Design System', but misses common variations users might say such as 'component', 'frontend', 'styling', 'design tokens', or 'Coinbase UI'. | 2 / 3 |
Distinctiveness Conflict Risk | The Coinbase Design System aspect is distinctive, but the broad trigger of 'write React or React Native code' would likely conflict with any general React coding skill, making it overly broad in scope. | 2 / 3 |
Total | 9 / 12 Passed |
Implementation
70%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 workflow skill with excellent progressive disclosure and clear step sequencing including validation checkpoints. Its main weaknesses are moderate verbosity in explanatory sections and the lack of concrete, executable code examples showing actual CDS component usage patterns — the style props table is helpful but actual React/RN code snippets would significantly improve actionability.
Suggestions
Add 1-2 short, executable code examples showing a complete CDS component usage (correct import, style props, composition) to improve actionability.
Trim the explanatory paragraph under Step 3 about why custom styles break theming — a single sentence or the table alone would suffice for Claude.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is mostly efficient but includes some unnecessary verbosity, such as the explanation of why custom styles break CDS theming ('the component loses its connection to the CDS theme...') which Claude could infer. The table of style prop alternatives is useful but the surrounding prose could be tighter. | 2 / 3 |
Actionability | The skill provides concrete steps and references to specific scripts (e.g., `scripts/discover-cds-packages.sh`, `scripts/discover-cds-icons.mjs`) and guideline files, plus a useful style props table. However, it lacks executable code examples showing actual CDS component usage — there are no copy-paste-ready React/React Native code snippets demonstrating correct imports or component composition. | 2 / 3 |
Workflow Clarity | The workflow is clearly sequenced into initialization (Part 1) and execution (Part 2) with numbered steps, explicit ordering constraints ('YOU MUST perform steps 1 and 2 before writing any code'), and a thorough validation checklist in Step 4 with specific criteria including import path verification with a feedback loop. | 3 / 3 |
Progressive Disclosure | Content is well-structured with a clear table of contents, references to external guideline files (components.md, icons.md, illustrations.md, customizing-styles.md) and scripts that are one level deep and clearly signaled. The skill serves as an effective overview that delegates detailed content appropriately. | 3 / 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.
- Repository
- coinbase/cds
- Commit
f79a780
- 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.