compose-creative-ui

Creative UI Composer

라이브러리 데모를 복제하거나 여러 시각 효과를 쌓는 대신, 제품의 메시지와 사용자 과업을 강화하는 소수의 표현을 기존 코드에 통합한다.

시작 절차

1. 저장소 지침과 현재 diff를 확인하고 프레임워크, 렌더링 방식, 스타일 도구, 패키지 관리자, components.json, 기존 component primitive와 디자인 token을 읽는다.

2. 현재 화면을 실행하거나 코드로 확인해 정보 위계, 브랜드 단서, 핵심 과업과 실제로 단조로운 지점을 찾는다.

3. 다음 표현 계약을 고정한다.

   강화할 메시지·과업:
   유지할 제품 정체성:
   적용할 위치와 효과 수:
   base component와 accent source:
   interaction·responsive·reduced-motion 상태:
   성능·접근성·콘텐츠 위험:
   성공·제거 기준:
   

4. ../uiux-advisor/scripts/search_toolkits.py --role creative-ui --ecosystem <ecosystem>으로 구조화 후보를 좁힌다.

5. references/component-toolkit-selection.md를 읽고 현재 프레임워크와 목적에 맞는 후보를 고른다.

6. registry·copy-paste 코드 통합과 QA는 references/composition-and-qa.md를 읽어 적용한다.

조합 원칙

• 기존 foundation이 있으면 유지한다. 새 foundation으로 전면 교체하지 않고 필요한 primitive나 accent만 추가한다.
• foundation, data visualization, motion, decorative registry의 역할을 구분한다.
• 한 화면에서는 기본 시스템 하나와 제한된 accent source를 중심으로 조합한다. 다른 라이브러리의 spacing, radius, typography와 state를 그대로 섞지 않는다.
• 효과를 선택하기 전에 “이 표현이 무엇을 더 빨리 이해하거나 행동하게 만드는가?”에 답한다.
• hero와 마케팅 영역의 장식 규칙을 form, settings, checkout 같은 과업 중심 화면에 그대로 적용하지 않는다.
• React 전용 도구를 Vue·Svelte 프로젝트에 억지로 이식하지 않는다. 해당 생태계의 primitive 또는 작은 네이티브 구현을 선택한다.

외부 코드 도입 규칙

1. 공식 문서와 실제 설치 대상의 현재 API를 확인한다.
2. package와 registry item의 소스, transitively added dependency, 스타일 전역 변경, 라이선스와 유지보수 상태를 확인한다.
3. shadcn-compatible registry는 설치 전에 가능한 경우 view 명령으로 payload를 읽는다. 커뮤니티 registry를 신뢰된 코드로 간주하지 않는다.
4. 가져온 컴포넌트의 DOM semantics, focus, keyboard, touch, resize, reduced motion, SSR와 hydration 동작을 직접 검토한다.
5. 사용하지 않는 variant, effect, dependency와 demo copy를 제거하고 제품 token·content·상태 모델에 맞게 변경한다.
6. 유료 template나 제한된 asset을 권한 확인 없이 복사하지 않는다.

구현 규칙

• 정보 위계, 콘텐츠와 상태를 먼저 완성한 뒤 배경·빛·입자·3D·pointer 효과를 추가한다.
• glow, blur, gradient, glass, bento와 marquee를 기본 스타일처럼 반복하지 않는다. 제품 맥락에 맞는 시각 문법을 선택한다.
• hover 전용 공개 정보나 pointer 추적만으로 가능한 핵심 행동을 만들지 않는다.
• 자동 반복, parallax, 3D tilt와 text animation은 reduced-motion에서 정적 표현으로 바꾼다.
• 장식 layer는 콘텐츠의 contrast, hit target, selection, scroll과 focus ring을 방해하지 않게 한다.
• image, canvas, shader, video와 particle 효과는 작은 화면·저전력 환경에서 지연 로드 또는 단순 대안을 제공한다.
• 기존 컴포넌트 API, theme, dark mode와 responsive breakpoint를 불필요하게 바꾸지 않는다.