CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

components-best-practices

Use this skill whenever working on CDS React components in any package.

Quality

62%

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

Fix and improve this skill with Tessl

tessl review fix ./.claude/skills/components-best-practices/SKILL.md

The canonical home for this skill is components.best-practices in coinbase/cds

SKILL.md
Quality
Evals
Security

Quality

Content

65%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 body is a strong, lean rulebook: concrete conventions, executable type and hook snippets, and a clear file structure. Its weaknesses are the implicit validation in the development workflow (tests are written but never run/verified as a gate) and the inlined design-token catalog that both duplicates theme.ts and inflates the single-file footprint.

Suggestions

Make the workflow's validation explicit: 'Implement with unit tests & stories on web, run the tests, and only proceed to mobile once they pass' — turning the implicit checkpoint into a gate.

Move the full Design Token System (token categories, hue/step tables, space scale code block) into a references/ file and keep one line in SKILL.md pointing to theme.ts as the definitive source; this also removes the duplicated space-scale listing.

Give paths for the reference components (Select, Stepper, Carousel, RollingNumber, SlideButton) so 'Research similar reference components' is directly actionable, and specify how style overrides must be supported per platform (web vs mobile).

DimensionReasoningScore

Conciseness

The body is dense with project-specific rules (memoization, forwardRef, "Padding over margin", type composition ordering) and assumes Claude's React competence rather than teaching it. Minor trimmable padding keeps it from 5: the space scale is listed twice (bullet list at 'Space: 0, 0.25, 0.5...' and again as a full code block), and the '**Benefits:**' list under Compound Components explains why rather than instructing. It is clearly above score 3, which would require noticeably unnecessary explanation.

4 / 5

Actionability

Most guidance is concrete and executable: an exact folder tree, precise naming contracts ("Export both a `*BaseProps` and `*Props` type"), copy-ready snippets for the context hook, generics, and prop-type intersection order, and concrete token values with a source file path. Minor gaps hold it below 5: "All components MUST support a way to override styles (varries by web/mobile platform)" says nothing about how, and the reference components (Select, Stepper, Carousel) are named without paths.

4 / 5

Workflow Clarity

The 5-step 'Component Development Workflow' gives a clear sequence (research → clarifying questions → implement web-first with "unit tests & stories" before mobile), but validation checkpoints are only implicit — it never says to run the tests or verify they pass before proceeding to mobile. This matches anchor 3 ('sequence present but checkpoints missing or implicit') rather than 4, which requires most checkpoints to be present.

3 / 5

Progressive Disclosure

Sections are well organized with clear headers, but the skill is a ~190-line single file with no bundle files, and substantial content that belongs in a separate reference is inlined: the full token catalog (hue/step tables, semantic color mappings, the space scale code block) duplicates what the skill itself calls the definitive source, theme.ts. This fits anchor 3 ('content that should be separate is inline'); it is not 2 because structure is good, and the under-50-line exception for scoring 5 does not apply.

3 / 5

Total

14

/

20

Passed

Description

40%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 has a clear, appropriately scoped trigger clause for a distinct niche, but it is trigger-only: it never states what the skill provides (component development rules, conventions, design token usage). It reads as half a description and cannot be distinguished from a bare routing hint.

Suggestions

State the 'what' explicitly, e.g. 'Enforce CDS React component development rules: file structure, compound-component patterns, design token usage, and testing conventions. Use whenever building or editing React components in any package.'

Add natural trigger synonyms users would actually say, such as 'component', 'UI', 'design system', or 'web/mobile component work', to improve trigger term coverage.

Keep the third-person/imperative form but pair the trigger with the capability list so both 'what' and 'when' are present (completeness is the highest-weighted dimension).

DimensionReasoningScore

Specificity

The description names its domain ("CDS React components in any package") but lists no concrete actions or capabilities — it never says what the skill actually does. This matches the anchor 'Names the domain but actions are minimal or generic' rather than score 1, since it is not entirely vague, nor score 3, since no 1-2 concrete actions are stated.

2 / 5

Completeness

The 'when' is explicit ("whenever working on CDS React components in any package") but the 'what' is entirely absent — the skill's purpose (enforcing development rules and conventions) must be inferred. This matches anchor 2 ('only "when" is present without "what"', e.g. 'Use when working with documents'), not score 3, which requires a clear 'what'.

2 / 5

Trigger Term Quality

"CDS React components" and "package" are relevant, specific domain keywords, but coverage stops there — no natural variations or synonyms a user might say (e.g. UI components, design system, web/mobile component work). This fits 'Some relevant keywords but missing common variations or synonyms' rather than score 4's 'a few natural terms missing' (most are missing).

3 / 5

Distinctiveness Conflict Risk

"CDS React components" carves a clear niche with minimal conflict risk, matching 'Mostly distinct; minor overlap risk with closely related skills'. It is not score 5 because "in any package" widens the trigger to all React work in the monorepo, which could overlap a general React skill.

4 / 5

Total

11

/

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

.claude/skills/components-best-practices/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.