CtrlK
BlogDocsLog inGet started
Tessl Logo

mcclowes/react-compound-components

Guide for implementing React compound component patterns with dot notation in this codebase. Use when creating new UI components that have multiple related sub-components, building forms, dashboards, or pages with distinct sections, or when refactoring components that have complex prop drilling. Activates for component composition, context providers, reusable UI patterns.

70

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

Overview
Quality
Evals
Security
Files

Quality

Content

72%Scale 1-3

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This is a solid, actionable skill with a complete executable example and good progressive disclosure structure. Its main weaknesses are moderate verbosity in the implementation example (some sub-components are boilerplate Claude could generate) and a migration checklist that lacks explicit validation/verification checkpoints for what is essentially a refactoring workflow that could break existing code.

Suggestions

Add explicit validation checkpoints to the migration checklist (e.g., '[ ] Verify existing usages still render correctly' after updating, '[ ] Test context access throws expected error outside provider').

Trim the implementation example — consider showing only the context + root + one sub-component that uses context, noting Claude can replicate the pattern for additional sub-components.

DimensionReasoningScore

Conciseness

Generally efficient but has some unnecessary verbosity — the full implementation example is quite long and includes boilerplate Claude could infer (e.g., basic header/footer sub-components). The Next.js boundary section is useful but slightly over-explained. The migration checklist items like 'Add TypeScript types for all props' are obvious for Claude.

2 / 3

Actionability

Provides a fully executable, copy-paste-ready implementation pattern with complete TypeScript types, context setup, sub-component definitions, and export structure. The file structure, index.tsx, and usage example with Dashboard are all concrete and specific.

3 / 3

Workflow Clarity

The migration checklist provides a clear sequence of steps, but lacks validation checkpoints — there's no 'verify context works,' 'test sub-components render,' or 'confirm backwards compatibility' step. For a refactoring workflow that could break existing usages, explicit verification steps would be important.

2 / 3

Progressive Disclosure

Well-structured with clear sections progressing from when-to-use → boundary considerations → implementation → file structure → existing components → best practices → migration. References to external files (nextjs-server-client-boundary.md, existing-components.md) are clearly signaled and one level deep, though bundle files weren't provided to verify they exist.

3 / 3

Total

10

/

12

Passed

Description

100%Scale 1-3

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 strong skill description that clearly defines a specific React pattern (compound components with dot notation), lists concrete actions, provides explicit 'Use when' triggers with realistic scenarios, and includes additional activation keywords. The description is well-structured, uses third person voice throughout, and occupies a distinct niche that minimizes conflict with other skills.

DimensionReasoningScore

Specificity

Lists multiple specific concrete actions: implementing compound component patterns with dot notation, creating context providers, defining typed sub-components with displayName, exporting namespaced APIs via dot notation. These are precise, actionable capabilities.

3 / 3

Completeness

Clearly answers both 'what' (implementing React compound component patterns with dot notation, creating context providers, typed sub-components, namespaced APIs) and 'when' (explicit 'Use when' clause covering new UI components with sub-components, forms/dashboards/pages, refactoring prop drilling). Also includes an 'Activates for' clause with additional triggers.

3 / 3

Trigger Term Quality

Includes strong natural keywords users would say: 'compound component', 'dot notation', 'sub-components', 'forms', 'dashboards', 'prop drilling', 'context providers', 'component composition', 'reusable UI patterns'. Good coverage of terms a React developer would naturally use.

3 / 3

Distinctiveness Conflict Risk

Highly distinctive — focuses specifically on React compound component patterns with dot notation, which is a narrow and well-defined niche. Unlikely to conflict with general React component skills or other UI skills due to the specific pattern focus (compound components, dot notation, displayName, namespaced APIs).

3 / 3

Total

12

/

12

Passed

Validation

90%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation10 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

allowed_tools_field

'allowed-tools' contains unusual tool name(s)

Warning

Total

10

/

11

Passed

Reviewed

Table of Contents