Name: cds-code
Rating: 60 (1 reviews)
Author: coinbase

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.

Quality

68%

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Fix and improve this skill with Tessl

tessl review fix ./skills/cds-code/SKILL.md

Quality

Content

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

Description

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

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.