vercel-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 artivilla/agents-config
rams
Run accessibility and visual design review on components. Use when reviewing UI code for WCAG compliance and design issues.
379web-interface-guidelines
Review UI code against Vercel's Web Interface Guidelines. Use when checking interactions, animation, layout, content, accessibility, performance, and design standards with MUST/SHOULD/NEVER rules.
46interfaces-raunofreiberg
Review UI code against Rauno Freiberg's interface guidelines. Use when checking interactivity, typography, motion, touch, optimizations, accessibility, and design details.
18technical-writing-styleguide
Technical writing styleguide for clear, consistent documentation. Use when writing, editing, or reviewing technical content, guides, tutorials, or documentation. Triggers on article review, writing style, brand names, grammar check, screenshot guidelines, guide audit, technical docs.
16knip
Run knip to find and remove unused files, dependencies, and exports. Use for cleaning up dead code and unused dependencies.
12tailwind-v4
Tailwind CSS v4 with CSS-first configuration and design tokens. Use when setting up Tailwind v4, defining theme variables, using OKLCH colors, or configuring dark mode. Triggers on @theme, @tailwindcss/vite, oklch, CSS variables, --color-, tailwind v4.
11