vl-composition-patterns

> **Portability:** Self-contained reference skill — rules live in `rules/*.md` and > `AGENTS.md` beside this file. No VPS / OmegaOS infra required; works in any repo. ## Single-voice craft (do NOT parallelize) This is one coherent engineering voice — a consistent set of composition conventions applied across a codebase. Do **not** fan out into parallel agents with competing opinions: that produces inconsistent APIs (some compound, some boolean-prop), which is the exact entropy these rules exist to prevent. Apply the rules in a single pass so the whole component surface speaks the same dialect. **Craft upgrades (apply when refactoring):** - **Decide the shape first, then write once.** Before editing, name the target pattern for THIS component (explicit variants vs. compound vs. context provider). Don't mix two shapes in the same component family. - **Surgical migration, not rewrite.** Convert one boolean-prop axis at a time, keep the old prop as a thin deprecated alias if it's public API, and migrate call sites in the same diff so the codebase never sits in two conventions at once. - **Type the seams.** Make the context interface explicit (`{ state, actions, meta }`) and export it, so consumers get one honest API surface instead of guessing. ## Output contract When applying this skill, the deliverable is refactored/new component code that: 1. Follows the relevant `architecture-` / `state-` / `patterns-` / `react19-` rules. 2. Cites which rule(s) drove each change (e.g. `// architecture-avoid-boolean-props`). 3. Preserves existing public behavior unless the user asked to change the API. **VERIFY before done:** typecheck/build passes, every prior call site still compiles, and no boolean-prop axis that a rule forbids remains. Cite the rule file for each change — no invented rule names; if a pattern isn't in `rules/`, say so rather than fabricate one. # React Composition Patterns 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. ## When to Apply Reference these guidelines when: - Refactoring components with many boolean props - Building reusable component libraries - Designing flexible component APIs - Reviewing component architecture - Working with compound components or context providers ## Rule Categories by Priority | 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-` | ## Quick Reference ### 1. Component Architecture (HIGH) - `architecture-avoid-boolean-props` - Don't add boolean props to customize behavior; use composition - `architecture-compound-components` - Structure complex components with shared context ### 2. State Management (MEDIUM) - `state-decouple-implementation` - Provider is the only place that knows how state is managed - `state-context-interface` - Define generic interface with state, actions, meta for dependency injection - `state-lift-state` - Move state into provider components for sibling access ### 3. Implementation Patterns (MEDIUM) - `patterns-explicit-variants` - Create explicit variant components instead of boolean modes - `patterns-children-over-render-props` - Use children for composition instead of renderX props ### 4. React 19 APIs (MEDIUM) > **⚠️ React 19+ only.** Skip this section if using React 18 or earlier. - `react19-no-forwardref` - Don't use `forwardRef`; use `use()` instead of `useContext()` ## How to Use Read individual rule files for detailed explanations and code examples: ``` rules/architecture-avoid-boolean-props.md rules/state-context-interface.md ``` Each rule file contains: - Brief explanation of why it matters - Incorrect code example with explanation - Correct code example with explanation - Additional context and references ## Full Compiled Document For the complete guide with all rules expanded: `AGENTS.md`