composition-patterns
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
More from kaakati/sdh-claude-skills
refactor
Safely refactor code using Fowler's patterns with test-first methodology and incremental steps. Use this skill whenever someone asks to refactor code, reduce technical debt, extract patterns, restructure modules, or says things like "refactor this", "clean up this code", "extract this into a service", "this code smells", "reduce duplication", "decompose this function", or "restructure this module". Also trigger for code smell identification, large-scale codebase transformations, or safe migration of legacy code.
2ui-ux-patterns
|
2architecture-advisor
Evaluate architectural decisions, design system components, produce ADRs, and assess technical debt. Use this skill whenever someone asks to design a system, evaluate architecture, create an ADR, plan a large refactor, choose between technologies, or says things like "how should we architect X", "write an ADR", "evaluate this design", "what are the tradeoffs", "review the architecture", or "should we use X or Y". Also trigger for bounded context design, scalability planning, or migration strategy.
2web-design-guidelines
|
2react-best-practices
|
2clean-architecture
Validate and implement Clean Architecture patterns including entity/use-case/adapter/framework layer separation, dependency direction enforcement, and architectural conformance checking. Use this skill whenever someone asks about architecture validation, layer boundaries, dependency direction, or says things like "check architecture", "validate clean architecture", "are my layers correct", "dependency direction", "refactor to clean architecture", "layer violation", or "architectural conformance". Also trigger for discussions about service object patterns, controller responsibilities, or domain model isolation.
2