vercel-composition-patterns

vercel-composition-patterns 스킬 개요

vercel-composition-patterns는 prop가 많은 컴포넌트 API보다 composition을 우선하도록 판단을 돕는 React 아키텍처 스킬입니다. boolean prop이 과도하게 늘어난 컴포넌트를 정리하고, 컴포넌트 경계를 분명히 하며, 호출자를 깨뜨리지 않으면서 재사용 가능한 API를 더 쉽게 확장해야 하는 프런트엔드 엔지니어, 디자인 시스템 작성자, AI 보조 리팩터링 작업에 특히 잘 맞습니다.

vercel-composition-patterns 스킬의 핵심 가치는 의사결정 지원입니다. 하나의 설정 가능한 컴포넌트에 모든 것을 억지로 밀어 넣기보다, compound component, lifted state, 명시적 variants, children composition, React 19 전용 API 중 무엇을 써야 하는지 판단하도록 도와줍니다.

프런트엔드 컴포넌트 설계에 가장 잘 맞는 경우

다음과 같은 상황이라면 vercel-composition-patterns for Frontend Development를 사용하세요:

• boolean이나 mode flag가 너무 많은 컴포넌트를 리팩터링할 때
• 재사용 가능한 UI kit 또는 제품용 컴포넌트 라이브러리를 만들 때
• 컴포넌트 API가 너무 경직됐는지, 혹은 너무 마법처럼 동작하는지 검토할 때
• 공유 UI state를 provider나 context 형태로 옮길 때
• forwardRef를 피하는 등 React 19 변경 사항에 맞춰 코드를 업데이트할 때

실무에서 유용한 이유

이 스킬은 에이전트에게 특히 유용한 방식으로 의견이 분명합니다. 아키텍처 규칙을 먼저, 그다음 state, 마지막으로 구현 패턴을 우선순위로 둡니다. 단기적인 땜질이 아니라 확장 가능한 해법이 필요할 때 이 순서가 중요합니다.

설치할 만한 경우와 아닌 경우

설치형 기준으로 보면, vercel-composition-patterns는 일반적인 React 프롬프트보다 아키텍처 체크리스트에 가까운 가이드를 원할 때 적합합니다. API 설계, 재사용성, 장기 유지보수까지 고민하지 않아도 되는 일회성 컴포넌트 스니펫만 필요하다면 굳이 설치하지 않아도 됩니다.

vercel-composition-patterns 스킬 사용법

스킬을 설치하고 규칙 세트를 확인하기

디렉터리의 표준 스킬 매니저에 맞는 vercel-composition-patterns install 흐름을 사용한 다음, 저장소 경로가 skills/composition-patterns인지 확인하세요. 이 스킬에는 별도의 install script가 없습니다. 핵심 가치는 생성되는 코드가 아니라 규칙 파일과 그 순서에 있습니다.

구현보다 결정 규칙부터 시작하기

가장 효과적인 vercel-composition-patterns usage는 원하는 코드 모양보다 먼저 컴포넌트의 문제를 모델에 제시하는 방식입니다. 예시 입력:

• “isThread, isDMThread, isEditing이 있는 Composer 컴포넌트를 composition 기반 API로 리팩터링해 주세요.”
• “서브컴포넌트 전반에서 selection state를 공유하는 settings panel용 compound component API를 설계해 주세요.”
• “이 UI library 컴포넌트를 검토해서 explicit variants로 가야 하는지, compound components로 가야 하는지 제안해 주세요.”

출력 품질을 좌우하는 파일 먼저 읽기

강한 vercel-composition-patterns guide를 원한다면 아래 파일부터 살펴보세요:

• SKILL.md — 상위 수준의 의도와 적용 시점 안내
• AGENTS.md — 컴파일된 규칙 계층과 선호 패턴
• rules/_sections.md — 카테고리 우선순위 이해
• rules/architecture-avoid-boolean-props.md
• rules/architecture-compound-components.md
• rules/react19-no-forwardref.md

아키텍처 선택을 바꾸는 맥락을 함께 주기

좋은 입력에는 다음이 포함됩니다:

• 현재 props와 state 구조
• 소비자가 커스터마이징을 원하는지, 아니면 몇 가지 고정 모드만 필요한지
• 어떤 하위 부분이 state를 공유해야 하는지
• React 19가 범위에 들어가는지
• backward compatibility가 중요한지

약한 입력: “이 컴포넌트를 더 좋게 만들어 주세요.”
강한 입력: “이 컴포넌트에는 boolean prop이 6개, mode가 3개, 공유 submit state가 있습니다. public usage는 단순하게 유지하면서 내부 분기는 context로 옮기는 compound-component API를 제안해 주세요.”

vercel-composition-patterns 스킬 FAQ

vercel-composition-patterns는 대규모 코드베이스에만 필요한가요?

아닙니다. 재사용 가능한 대형 컴포넌트 시스템에서 가장 가치가 크지만, 이미 API를 이해하기 어려워지고 있는 작은 컴포넌트에도 도움이 됩니다. 판단 기준은 크기 자체가 아니라, 구조가 아니라 props로 동작을 인코딩하기 시작했는지 여부입니다.

일반적인 React 프롬프트와는 무엇이 다른가요?

일반적인 프롬프트는 그럴듯한 컴포넌트를 만들어 줄 수 있습니다. 반면 vercel-composition-patterns는 모델이 API 형태를 정당화하고, 아키텍처 규칙을 우선시하며, boolean prop의 무분별한 증가나 render props의 과사용 같은 흔한 회귀를 피하도록 밀어줍니다.

초보자에게도 적합한가요?

네, 좋은 컴포넌트 경계를 배우려는 목적이라면 적합합니다. 다만 트레이드오프 설명 없이 빠르게 복붙할 수 있는 해법을 원한다면 초보자 친화적이지 않을 수 있습니다. 코딩 전에 설계를 비교해 볼 의지가 있을 때 이 스킬의 효과가 가장 좋습니다.

언제 사용하지 말아야 하나요?

빠른 스타일 작업, 사소한 일회성 컴포넌트, 또는 이미 API가 고정되어 바꿀 수 없는 경우에는 vercel-composition-patterns를 쓰지 마세요. 이 스킬은 구현 속도보다 잘못된 추상화가 더 큰 위험일 때 가장 강합니다.

vercel-composition-patterns 스킬 개선 방법

기존 API 형태를 먼저 보여 주기

가장 큰 품질 향상은 현재 컴포넌트 시그니처를 보여 주는 데서 나옵니다. 특히 boolean, variant prop, callback, shared state가 중요합니다. 무엇이 과도하게 설정되고 있는지 모델이 봐야 더 나은 composition을 추천할 수 있습니다.

원하는 소비자 경험을 명확히 말하기

컴포넌트를 외부에서 어떻게 느끼게 하고 싶은지 알려 주세요:

• “소비자가 서브컴포넌트들을 조합해서 UI를 구성해야 합니다.”
• “외부에 공개할 variant는 세 가지만 허용합니다.”
• “내부 state는 provider 뒤에 숨겨야 합니다.”

최적의 패턴은 내부 리팩터링만이 아니라 public API 의도에 따라 달라지므로, 이 방식은 vercel-composition-patterns usage를 더 정확하게 만들어 줍니다.

코드를 요청하기 전에 패턴 추천부터 받기

좋은 워크플로우는 아키텍처 선택을 먼저 묻고, 그다음 구현을 요청하는 것입니다. 예를 들면:

1. “이건 compound components, explicit variants, children composition 중 무엇이 맞나요?”
2. “이제 선택한 패턴으로 다시 작성해 주세요.”

이 2단계 방식은 성급한 코드 생성을 줄이고 vercel-composition-patterns skill의 신뢰도를 높여 줍니다.

흔한 실패 모드를 주의하기

대표적인 실패 모드는 다음과 같습니다:

• boolean을 똑같이 불명확한 마법 같은 props로 바꾸는 것
• variant API로 충분한데 모든 컴포넌트를 무조건 compound component로 만드는 것
• state와 함께 state/actions/meta 인터페이스를 명확히 하지 않은 채 context로 옮기는 것
• React 19에 민감한 코드에서 forwardRef를 사용하는 것

첫 결과가 너무 추상적으로 느껴진다면, React 버전, 호환성 제한, public API를 유지해야 하는지 같은 제약을 더 분명하게 적어 주세요.