01
What this skill does
Use this skill when creating or refactoring compound React components, data-driven component parts, polymorphic hosts, or their private file layout. It treats caller count as irrelevant to contract quality: one production use can still require reachable public parts, transparent native props and refs, composable events and styles, explicit state ownership, and a real rendering boundary wherever the component owns repeated data.
02
When to use it
- 01Designing Radix-style primitives with controlled state, semantic parts, asChild behavior, focus, keyboard, and ARIA contracts.
- 02Building product compound components whose visual parts do not depend on a concrete store or synchronization implementation.
- 03Making collection items, empty states, triggers, and content regions replaceable without copying internal behavior.
- 04Organizing component-local private files under focused underscore directories.
03
How it works
- 01
Classify primitive versus product behavior, then decide whether repeated-data iteration belongs to the consumer or the component.
- 02
Derive public seams from state, data, semantics, content, styling, interaction, and integration responsibilities rather than current caller count.
- 03
Define a throwing context boundary and controlled or provider-backed state contract appropriate to the component.
- 04
Give every public host part transparent props and refs, deliberate event and style composition, and stable state attributes.
- 05
Remove child-type discovery, silent child dropping, and fixed nested defaults that make exported parts unreachable.
- 06
Apply the private folder taxonomy and verify at least one meaningful alternative arrangement or renderer before completion.
04
What you get back
- 01A compound namespace whose advertised parts are directly usable or replaceable through an explicit boundary.
- 02A typed state, item-rendering, host-prop, accessibility, and element-substitution contract.
- 03A minimal private folder layout plus evidence that the claimed composition seams work.
05
Important boundaries
- 01Do not lower API quality because only one production caller exists, and do not invent speculative configuration merely to appear reusable.
- 02Do not export decorative parts that a convenience facade permanently replaces with internal copies.
- 03Do not use child.type identity scanning, first-match selection, or silent child dropping as a composition protocol.
- 04Do not let styling hooks replace semantic HTML, keyboard behavior, focus management, or ARIA.
- 05Keep the skill self-contained; its composition decisions must not require other skills to be installed.
06