CtrlK
BlogDocsLog inGet started
Tessl Logo

cds-code

Provides a workflow for building and reviewing high-quality React and React Native UI with the Coinbase Design System (CDS). Use this skill to create UI or make visual changes to existing UI with CDS components, tokens, style props, icons, and illustrations. Use it for explicit CDS-adherence audits and reviews, not non-visual logic, data, analytics, navigation, tests, generated code, or refactoring. Examples: "build this screen", "fix spacing on this component", "replace this UI with CDS components", "perform a CDS audit on our changes", "check our codebase for CDS adherence", "does this feature use CDS well?"

72

Quality

88%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

77%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 content is a well-sequenced, actionable workflow with strong validation checkpoints, but it leans slightly verbose in a few rationale sections and its progressive disclosure is undermined by guideline references that point to files not present in the bundle.

Suggestions

Ship the missing guideline files (guidelines/code-review.md, components.md, icons.md, illustrations.md) or remove/inline the references so navigation is not broken.

Tighten the 'Why this matters' style-props rationale and the repeated preference statements to one or two lines; Claude already understands the risk of hardcoded values.

Make Step 3 a concrete, required-or-skipped instruction instead of 'Optionally read component docs' so the action path is unambiguous.

DimensionReasoningScore

Conciseness

The body is largely efficient and action-oriented, but a few explanatory passages pad beyond what Claude needs (e.g. the multi-sentence 'Why this matters' block on style props and the rationale for preferring style props), keeping it just shy of lean.

4 / 5

Actionability

Provides concrete executable guidance — the discover script command, a specific style-to-prop mapping table, and explicit doc subpaths — but Step 3 ('Optionally read component docs') and some soft language leave minor gaps versus copy-paste-ready completeness.

4 / 5

Workflow Clarity

A clearly sequenced coding workflow (Steps 1-5) with an explicit 7-point validation checklist in Step 5 and a fallback path when initialization fails; the review path is clearly routed, and verification steps gate completion.

5 / 5

Progressive Disclosure

Structure is reasonable and references are one level deep and clearly signaled (guidelines/*.md, scripts/), but the referenced guidelines files (code-review.md, components.md, icons.md, illustrations.md) do not exist in the bundle, so navigation is partially broken.

3 / 5

Total

16

/

20

Passed

Description

100%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 exemplary: it states concrete capabilities, gives natural trigger examples, explicitly covers both what and when, and draws a clear scope boundary to avoid triggering for the wrong work. No vague fluff or over-claims are present.

DimensionReasoningScore

Specificity

Lists multiple concrete actions across the domain — 'building and reviewing', 'create UI or make visual changes', 'audits and reviews' — plus the concrete materials (CDS components, tokens, style props, icons, illustrations), giving comprehensive coverage.

5 / 5

Completeness

Explicitly answers both what ('workflow for building and reviewing high-quality React and React Native UI with CDS') and when ('Use this skill to...', 'Use it for explicit CDS-adherence audits'), reinforced with concrete example triggers.

5 / 5

Trigger Term Quality

Comprehensive natural trigger phrases users would actually say ('build this screen', 'fix spacing on this component', 'perform a CDS audit on our changes', 'does this feature use CDS well?') covering synonyms and review variants.

5 / 5

Distinctiveness Conflict Risk

Occupies a clear CDS-specific niche with an explicit out-of-scope list ('not non-visual logic, data, analytics, navigation, tests, generated code, or refactoring') that minimizes conflict with adjacent skills.

5 / 5

Total

20

/

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.