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 parkyoungwoong/skills
react-vite-scaffold
(heropy) Use when initializing a new Vite + React (CSR) project or when an existing Vite React project needs missing configuration (ESLint, Prettier, TanStack Query, React Router, Zustand, Tailwind CSS, VSCode settings, path aliases).
62kb-bank-styles
KB국민은행 / KB스타뱅킹의 시각 언어를 따라 한국 금융권(뱅킹 앱·웹) UI를 만드는 스타일 가이드. "KB 스타일", "국민은행 스타일", "한국 뱅킹 UI", "한국 금융권 UI" 같은 요청에 사용한다. 토큰(컬러·타이포·스페이싱)·컴포넌트 스니펫·홈/송금/내역 페이지 템플릿을 제공한다.
19lighthouse
(heropy) Use when analyzing web page performance, accessibility, best practices, or SEO using Google Lighthouse. Runs LHCI CLI locally, parses results, and suggests improvements with optional code fixes.
14react-next-scaffold
(heropy) Use when initializing a new Next.js (SSR) project or when an existing Next.js project needs missing configuration (ESLint, Prettier, TanStack Query, Tailwind CSS, VSCode settings, path aliases).
12react-vite-to-next-migration
(heropy) Use when migrating an existing Vite + React (TypeScript) project to Next.js (App Router, v16). Converts entry points, routing (React Router → App Router), environment variables, path aliases, static assets, and styling setup.
8skill-commit
(heropy) Use when committing changes in this project. Analyzes changes to generate appropriate commit messages and bumps skill versions in frontmatter when SKILL.md files are modified.
6