CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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?"

Quality

87%

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

70%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, actionable skill body with an excellent workflow structure and concrete validation, but held back by broken bundle references (missing guidelines files) and some redundant explanation. Fixing the bundle and trimming the padding would move this to top marks.

Suggestions

Ship the referenced `guidelines/` files (`code-review.md`, `components.md`, `icons.md`, `illustrations.md`) in the bundle or correct the paths — three of the five workflow steps depend on files that are currently absent, which also breaks progressive disclosure.

Trim redundant explanation: state the theme-connection rationale once (merge the "Why this matters" paragraph with the earlier "break the component's connection to the CDS theme" sentence) and drop the Tailwind-ecosystem digression.

Add one complete, copy-paste-ready code example (import + component usage with style props) so the coding workflow has an end-to-end reference matching the style-prop table.

DimensionReasoningScore

Conciseness

The body is dense and mostly earns its tokens, but contains padded or redundant passages: the Tailwind digression ("much like Tailwind's utility classes which are so prevelant in the web ecosystem") and the theme-connection rationale stated twice ("Doing so would break the component's connection to the CDS theme", then again under "**Why this matters:**"). This is "mostly efficient but includes some unnecessary explanation or could be tightened" (anchor 3) rather than the minor trimmable instances of anchor 4.

3 / 5

Actionability

Concrete throughout: an executable shipped script ("Run the discovery script: `scripts/discover-cds-packages.sh`"), specific doc paths ("getting-started/styling", "getting-started/theming"), a copy-paste-ready style-prop table ("style={{ gap: 8 }}" → "gap={1}"), and a specific completion checklist. Falls short of anchor 5 only in lacking one complete end-to-end code example (import + component usage), leaving a minor gap.

4 / 5

Workflow Clarity

Clearly sequenced Initialization → Steps 1–5 with a hard checkpoint ("**YOU MUST** perform steps 1 and 2 before writing any code!"), an explicit validation checklist in Step 5 (no raw colors/pixels, valid import paths, lint/typecheck passing), and error-recovery fallbacks for each failure mode (script unrunnable, docs unavailable, no fitting component with a prioritized fallback order). This matches anchor 5's explicit validation plus error-recovery guidance; not 4 because checkpoints are explicit rather than implicit. No destructive or batch operations, so no cap applies.

5 / 5

Progressive Disclosure

The SKILL.md itself is well organized with clearly signaled, one-level-deep references ("read `guidelines/code-review.md`", the icons/illustrations pointer table), but scored against the actual bundle structure the four referenced files (`guidelines/code-review.md`, `guidelines/components.md`, `guidelines/icons.md`, `guidelines/illustrations.md`) are not present in the bundle — only `scripts/` is shipped. Navigation breaks in practice, so structure is better than anchor 2's inlined text but falls short of anchor 4's working reference organization.

3 / 5

Total

15

/

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.

This is a model description: it states what the skill does, when to use it (both coding and explicit review/audit intents), what is out of scope, and provides natural trigger examples. Distinctiveness is strong due to the named design system and explicit exclusions.

DimensionReasoningScore

Specificity

Names the domain (React/React Native UI with Coinbase Design System) and multiple concrete actions — building UI, making visual changes, and CDS-adherence audits/reviews — plus enumerated artifact types (components, tokens, style props, icons, illustrations) and explicit exclusions. Comprehensive coverage matches the anchor-5 example; there are no minor gaps that would justify a 4.

5 / 5

Completeness

Explicitly answers what ("Provides a workflow for building and reviewing high-quality React and React Native UI with the Coinbase Design System") and when ("Use this skill to create UI or make visual changes..." plus explicit out-of-scope list and example triggers). Both are concrete and explicit, matching the anchor-5 example rather than the 4 anchor's less-specific when-clause.

5 / 5

Trigger Term Quality

Includes natural user phrasings with synonyms across both workflows: "build this screen", "fix spacing on this component", "replace this UI with CDS components", "perform a CDS audit on our changes", "does this feature use CDS well?". Coverage of natural terms is comprehensive, matching the anchor-5 example.

5 / 5

Distinctiveness Conflict Risk

A clear niche (Coinbase Design System, React/React Native UI) with distinct triggers and explicit exclusions ("not non-visual logic, data, analytics, navigation, tests, generated code, or refactoring") that minimize overlap with generic React or design skills. Voice is imperative "Use this skill to...", the same construction used in the rubric's own good examples, so no voice penalty applies.

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.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

coinbase/cds

Path

skills/cds-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.