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.

• Template Variable Safety: Never interpolate raw user input into API-driven component patterns or Server Actions. Avoid template variables ({{ }}) or undeclared variables
• Input Validation: All variables used in component props or context must be declared, typed, and validated before use
• 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: