CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

composition-patterns

React composition patterns that scale. Use when refactoring boolean prop proliferation, designing reusable component APIs, or reviewing component architecture.

Quality

70%

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 ./.agents/skills/04-develop/00-frontend-general/composition-patterns/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

56%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 index-style body that appropriately keeps detail out of SKILL.md, with a helpful priority table and a clear version guard for React 19 APIs. However, it delegates all substance to rules/*.md files that are not present in the bundle, leaving the body with no code examples and dangling references, and it repeats trigger/category information across the intro, When to Apply, and the priority table.

Suggestions

Inline at least one minimal incorrect/correct code example (e.g. boolean prop vs. composed variant) so the body carries actionable value even before the rule files are opened.

Ensure the referenced rules/ directory ships with the skill bundle — as provided, every pointer including rules/architecture-avoid-boolean-props.md is a dangling reference, breaking navigation.

Deduplicate: the intro paragraph, 'When to Apply' bullets, and the priority table all restate the description's triggers and category grouping; consolidating them would tighten the token budget.

DimensionReasoningScore

Conciseness

The body is mostly lean tables and one-liners, but information repeats: the intro paragraph restates the frontmatter description, the 'When to Apply' bullets restate its trigger list, and the priority table's category/prefix columns duplicate the Quick Reference subsection headers and rule-ID prefixes. This fits 'Mostly efficient but includes some unnecessary explanation or could be tightened' rather than the minor-trimming of a 4, given three separate redundancies.

3 / 5

Actionability

Rule one-liners like "Use children for composition instead of renderX props" and "Move state into provider components for sibling access" are concrete directives, but there is no code or worked example anywhere in the body — all detail is delegated to rule files. This matches 'Some concrete guidance but incomplete... missing key details'; not a 2 because the directives themselves are specific and actionable as heuristics, and not a 4 because the promised detailed guidance lives entirely outside the file.

3 / 5

Workflow Clarity

This is a single-action reference skill — consult rule files — and that action is unambiguous: 'When to Apply' states the conditions, the priority table ranks categories, and 'How to Use' shows the file-path convention with two example paths. The React 19 section adds an explicit version guard ('Skip this section if using React 18 or earlier'). Minor gap: no instruction on how to apply a rule once read, fitting 'Clear sequence with most checkpoints present; minor validation gaps' adapted to a reference skill rather than the fully explicit flow of a 5.

4 / 5

Progressive Disclosure

The body is a well-organized index with one-level-deep, clearly signaled references ('Read individual rule files for detailed explanations and code examples'), but the referenced rules/ directory does not exist in the bundle — every pointer, including the two example paths, is dangling, so navigation to the skill's actual content fails. Structure and signaling alone merit a 4, but unverifiable references fit 'Some structure but could be better organized; references present but not clearly signaled' territory once the bundle structure is considered.

3 / 5

Total

13

/

20

Passed

Description

70%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 solid description with an explicit and well-phrased 'Use when' trigger clause covering three concrete scenarios. Its main weakness is a vague 'what' — 'composition patterns that scale' names the domain without stating what the skill actually delivers (codified rules with incorrect/correct code examples). Trigger coverage is good but misses common synonyms like prop drilling and compound components.

Suggestions

State the concrete deliverable in the 'what' clause, e.g. 'Codifies 8 React component-design rules with incorrect/correct code examples...' so the description communicates what the skill provides, not just its domain.

Add natural trigger synonyms users would say — 'prop drilling', 'compound components', 'component library', 'shared state between siblings' — to broaden keyword coverage.

Avoid the buzzphrase 'that scale', which adds no specific information; replace with the concrete outcome (maintainable component APIs).

DimensionReasoningScore

Specificity

"React composition patterns that scale" names the domain but describes no concrete actions the skill performs; the when-clauses ("refactoring boolean prop proliferation", "designing reusable component APIs", "reviewing component architecture") name user activities rather than capabilities. This matches the anchor 'Names domain and 1-2 concrete actions, but not comprehensive' and falls below 'Lists several specific actions' since no enumeration of what the skill provides exists.

3 / 5

Completeness

Both parts are present: "React composition patterns that scale" answers what, and an explicit "Use when refactoring... designing... or reviewing..." clause answers when with concrete triggers. Not a 5 because the 'what' is generic — it never states the skill provides rules, patterns, or code examples — fitting 'Has both what and when; when could be more explicit or specific' inverted: the when is strong but the what is weak.

4 / 5

Trigger Term Quality

Includes natural phrases users would say such as "refactoring boolean prop proliferation", "reusable component APIs", and "component architecture". Good coverage, but common variations like "compound components", "prop drilling", or "component library" are missing, matching 'Good keyword coverage; a few natural terms missing' rather than the comprehensive synonym coverage of a 5.

4 / 5

Distinctiveness Conflict Risk

The React composition niche is clear and the triggers (boolean props, component APIs, composition) are distinct from most skills. Minor overlap risk remains with generic code-review or React-styling skills via "reviewing component architecture", matching 'Mostly distinct; minor overlap risk with closely related skills' rather than the minimal-conflict clarity of a 5.

4 / 5

Total

15

/

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

marchatton/agent-skills

Path

.agents/skills/04-develop/00-frontend-general/composition-patterns/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.