vercel-composition-patterns
Frontend
설치
$ npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-composition-patterns요약
공용 컴포넌트, 디자인 시스템, 복잡해진 UI API를 리팩터링할 때 적합합니다.
- React 컴포넌트를 합성 패턴과 명확한 API로 정리해 boolean prop 증가와 재사용성 문제를 줄이는 설계 스킬입니다.
- 한국어 큐레이션 기준으로 이 스킬의 핵심을 먼저 정리했습니다.
- 설치는 개별 스킬 페이지의 명령을 그대로 사용합니다.
- 아래 해설 섹션에서 사용 맥락과 주의점을 한국어로 길게 풀어 읽을 수 있습니다.
해설
어떤 스킬인가
vercel-composition-patterns는 React 컴포넌트 API가 복잡해질 때 구조를 다시 잡는 스킬입니다. 하나의 컴포넌트에 variant, mode, isCompact, showIcon, asLink 같은 prop이 계속 늘어나면 사용하기도 어렵고 테스트하기도 어려워집니다. 이 스킬은 그런 컴포넌트를 합성 가능한 구조로 바꾸도록 돕습니다.
합성 패턴은 단순히 코드를 예쁘게 나누는 기법이 아닙니다. 사용자가 실제로 필요한 조합을 더 자연스럽게 표현하고, 컴포넌트 내부 조건문을 줄이며, 디자인 시스템의 확장성을 높이는 방법입니다.
언제 쓰면 좋은가
공용 UI 컴포넌트를 만들거나 리팩터링할 때 좋습니다. 특히 모달, 탭, 드롭다운, 카드, 테이블처럼 상태와 하위 요소가 많은 컴포넌트에서 효과가 큽니다.
반대로 한 화면에서만 쓰이는 작은 컴포넌트에는 과할 수 있습니다. 이 스킬은 재사용성과 API 안정성이 중요한 코드에 적용할 때 가치가 큽니다.
설치
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-composition-patterns
요청할 때는 현재 컴포넌트의 문제, 유지해야 할 외부 API, 변경 가능한 범위를 같이 알려주는 편이 좋습니다.