Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →guanyang/vercel-composition-patterns
React composition patterns that scale.
Passed 21 of 22 test cases with the skill, and 20 of 22 without it.
2 fixed19 passed either way0 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
When defining the TypeScript context interface for an editable table state provider, how should the context value object be structured to decouple implementation from UI components?
| Checked | Without skill | With skill |
|---|---|---|
| The context interface explicitly separates current state, action handlers, and metadata fields. | Missed | Passed |
The instructions your model reads when the skill loads.
Composition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and composing internals. These patterns make codebases easier for both humans and AI agents to work with as they scale.
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Component Architecture | HIGH | architecture- |
| 2 | State Management | MEDIUM | state- |
| 3 | Implementation Patterns | MEDIUM | patterns- |
| 4 | React 19 APIs | MEDIUM | react19- |
architecture-avoid-boolean-props - Don't add boolean props to customize
behavior; use compositionarchitecture-compound-components - Structure complex components with shared
contextstate-decouple-implementation - Provider is the only place that knows how
state is managedstate-context-interface - Define generic interface with state, actions, metatest cases passed, vs 20 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.