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?

Impact

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

Quality

Content

72%

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%

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