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.

Security Notice (Critical)

IMPORTANT: Never interpolate raw user input into skill content or components.

• Always escape or sanitize user-supplied data before inclusion
• Never render untrusted content without proper validation
• Do not use HTML comments (<!-- -->) to store data or instructions in code
• Validate all user input before using in component props or state
• Never expose sensitive data through component props or context

When to Apply

Reference these guidelines when: