CtrlK
BlogDocsLog inGet started
Tessl Logo
PluginPublic

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.

Quality

89%

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

86%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 well-structured skill body: a complete executable template, codebase-specific boundary rules, and clean one-level-deep references. Its only gaps are minor — a couple of trimmable snippets and the absence of explicit post-migration validation steps.

DimensionReasoningScore

Conciseness

The body is efficient and codebase-specific — it never explains what React context or hooks are, and the Next.js boundary section is non-inferable project knowledge. Minor trims are possible (the Dashboard usage snippet and the trivial index.tsx re-export snippet), placing it at the 'efficient with minor over-explanation' anchor rather than the lean 5.

4 / 5

Actionability

The Implementation Pattern is a complete, copy-paste-ready TypeScript template covering the common case (context, typed sub-components with displayName, namespaced root export), plus concrete file structure, an exact-API pointer, and a migration checklist. This matches the fully-executable top anchor.

5 / 5

Workflow Clarity

The Migration Checklist gives a clear sequenced process (context type → root → sub-components → attach → compatibility → exports → usages) with verification guidance ("get the exact sub-component names... don't guess them", "Open the component's own file to confirm"). No explicit validation checkpoints (e.g. typecheck/verify usage updates) exist, so it sits at the 'most checkpoints present, minor validation gaps' anchor rather than 5.

4 / 5

Progressive Disclosure

Both body references (references/nextjs-server-client-boundary.md, references/existing-components.md) are real files, one level deep, and clearly signaled with what they contain; detailed API catalogs and boundary mechanics are correctly split out while the body stays an actionable overview. This matches the top anchor.

5 / 5

Total

18

/

20

Passed

Description

88%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.

A strong description: concrete third-person capabilities, an explicit 'Use when' clause with varied natural triggers, and a well-defined React niche. Only the slightly generic closing trigger terms and a few missing synonyms keep it from top marks on every dimension.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions — "create context providers", "define typed sub-components with displayName", "export namespaced APIs via dot notation" — comprehensively covering the pattern in third-person voice with no vague filler. It matches the top anchor and exceeds the 4 anchor, which would require only partial coverage.

5 / 5

Completeness

Both questions are explicitly answered: what it does ("Covers how to create context providers, define typed sub-components with displayName, and export namespaced APIs") and when ("Use when creating new UI components that have multiple related sub-components... or when refactoring components that have complex prop drilling"). This matches the top anchor exactly; the 4 anchor would require a weaker or less explicit 'when' clause.

5 / 5

Trigger Term Quality

Natural phrases like "creating new UI components", "multiple related sub-components", "complex prop drilling", and "component composition" are terms users would actually say, but a few common variations (e.g. "shared state between components", "nested components") are missing. Good coverage, slightly short of the comprehensive-synonyms anchor.

4 / 5

Distinctiveness Conflict Risk

"React compound component patterns with dot notation" and "prop drilling" form a clear, distinct niche, but the closing trigger list ("context providers", "reusable UI patterns") is broad enough to overlap with generic React component or styling skills. Mostly distinct with minor overlap risk — the 5 anchor requires minimal conflict risk across all triggers.

4 / 5

Total

18

/

20

Passed

Validation

93%

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

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

allowed_tools_field

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

Warning

Total

15

/

16

Passed

Reviewed

On this page