@walwal-harness/cli 6.1.6 → 7.1.0

package/skills/generator-frontend/references/_web-react-legacy/ai-forbidden-patterns.md

@@ -1,89 +0,0 @@
-# AI Forbidden Patterns — 셀프 체크 목록
-
-> 구현 완료 후 이 목록으로 최종 점검. 하나라도 해당되면 수정.
-> 출처: taste-skill, supanova-design-skill 통합
-
-## Visual & CSS
-
-| # | 금지 패턴 | 올바른 대안 |
-|---|----------|-----------|
-| V-1 | Neon/Outer Glow (`box-shadow` 글로우) | inner border 또는 tinted shadow |
-| V-2 | Pure Black `#000000` | `#0a0a0a`, Zinc-950, Slate-950 |
-| V-3 | 과포화 Accent (Saturation > 80%) | 뉴트럴과 자연스럽게 블렌딩 |
-| V-4 | 과도한 Gradient Text (페이지당 1개 초과) | 1개까지만 허용 |
-| V-5 | 커스텀 마우스 커서 | 기본 커서 유지 |
-| V-6 | `h-screen` | `min-h-[100dvh]` |
-| V-7 | `linear` / `ease-in-out` 트랜지션 | `cubic-bezier(0.16, 1, 0.3, 1)` |
-| V-8 | `top/left/width/height` 애니메이션 | `transform` + `opacity` only |
-| V-9 | 스크롤 컨테이너에 `backdrop-blur` | fixed/sticky 요소에만 |
-| V-10 | 임의 `z-50` 남발 | 시스템 레이어에만 (nav, modal, overlay) |
-
-## Typography
-
-| # | 금지 패턴 | 올바른 대안 |
-|---|----------|-----------|
-| T-1 | Inter, Noto Sans KR, Roboto, Arial, Open Sans | Pretendard(한국어) + Geist/Outfit/Satoshi(영문) |
-| T-2 | 크기로만 계층 표현하는 거대 H1 | weight + color로 계층 |
-| T-3 | Dashboard에 Serif 폰트 | Sans-Serif only |
-| T-4 | 한국어에 `leading-none` | `leading-tight` ~ `leading-snug` |
-| T-5 | 한국어 `break-keep-all` 누락 | 모든 한국어 블록에 적용 |
-
-## Layout & Spacing
-
-| # | 금지 패턴 | 올바른 대안 |
-|---|----------|-----------|
-| L-1 | 3-Column Equal Card Row | Bento Grid, Zig-Zag, 비대칭 |
-| L-2 | 센터 정렬 Hero (VARIANCE > 4) | Split Screen, 좌측 정렬, 비대칭 여백 |
-| L-3 | Flexbox calc (`w-[calc(33%-1rem)]`) | CSS Grid |
-| L-4 | 인접 섹션 동일 레이아웃 | 섹션마다 다른 패턴 |
-| L-5 | Edge-to-edge 콘텐츠 | `max-w-7xl mx-auto` 컨테이너 |
-| L-6 | 섹션 간격 부족 | `py-24 md:py-32 lg:py-40` 최소 |
-
-## Content & Data
-
-| # | 금지 패턴 | 올바른 대안 |
-|---|----------|-----------|
-| C-1 | "John Doe", "김철수" | 하윤서, 박도현, 이서진 |
-| C-2 | "Acme Corp", "넥서스" | 스텔라랩스, 베리파이, 루미너스 |
-| C-3 | 깨끗한 숫자 `50,000+`, `5.0` | 유기적 숫자 `47,200+`, `4.87` |
-| C-4 | AI 클리셰: "혁신적인", "원활한", "차세대" | 구체적, 행동 지향적 카피 |
-| C-5 | AI 영문 클리셰: "Elevate", "Seamless", "Unleash" | 구체적 동사 |
-| C-6 | Lorem Ipsum, 영문 플레이스홀더 | 자연스러운 한국어 콘텐츠 |
-| C-7 | 반말/존댓말 혼용 | 합니다/하세요 통일 |
-| C-8 | 이모지 사용 | Phosphor/Radix 아이콘 |
-
-## External Resources
-
-| # | 금지 패턴 | 올바른 대안 |
-|---|----------|-----------|
-| E-1 | Unsplash URL (깨짐) | `picsum.photos/seed/{name}/{w}/{h}` |
-| E-2 | 기본 SVG "egg" 아바타 | `i.pravatar.cc/150?u={name}` 또는 커스텀 |
-| E-3 | shadcn/ui 기본 상태 | radius/colors/shadows 커스터마이즈 필수 |
-| E-4 | FontAwesome, Material Icons | Phosphor 또는 Radix |
-| E-5 | `window.addEventListener('scroll')` | `IntersectionObserver` |
-| E-6 | Framer Motion에서 `useState`로 연속 애니메이션 | `useMotionValue` + `useTransform` |
-
-## React / Next.js 특정
-
-| # | 금지 패턴 | 올바른 대안 |
-|---|----------|-----------|
-| R-1 | Server Component에서 전역 상태 | Client Component로 격리 |
-| R-2 | Provider를 Server Component에 직접 배치 | 별도 `'use client'` 래퍼 |
-| R-3 | 무분별한 `'use client'` | 인터랙션 필요한 leaf만 |
-| R-4 | Perpetual motion이 부모 리렌더 유발 | `React.memo` + 격리 Client Component |
-| R-5 | `useEffect` cleanup 없는 애니메이션 | 반드시 cleanup return |
-| R-6 | 3rd party import 전 package.json 미확인 | 설치 명령 먼저 출력 |
-
-## Pre-Flight Checklist
-
-구현 완료 후 최종 점검:
-
-- [ ] 위 테이블의 모든 금지 패턴 0개 확인
-- [ ] 로딩/에러/빈 상태 3가지 모두 구현
-- [ ] 모바일 레이아웃 (`w-full`, `px-4`) 보장
-- [ ] `min-h-[100dvh]` 사용 (h-screen 아님)
-- [ ] 모든 트랜지션 `cubic-bezier(0.16, 1, 0.3, 1)`
-- [ ] useEffect cleanup 함수 존재
-- [ ] 한국어 텍스트에 `break-keep-all` 적용
-- [ ] 카드 대신 spacing으로 구분 가능한 곳은 spacing 사용
-- [ ] 인터랙티브 컴포넌트 `'use client'` 격리

package/skills/generator-frontend/references/_web-react-legacy/component-patterns.md

@@ -1,52 +0,0 @@
-# Component Patterns
-
-## 프로젝트 구조
-
-```
-apps/web/src/
-├── api/
-│   ├── client.ts           # fetch 인스턴스 (base: localhost:3000)
-│   ├── types.ts            # api-contract.json → TypeScript 1:1
-│   └── [domain].ts         # 도메인별 API 함수
-├── components/
-│   ├── ui/                 # Button, Input, Modal, Card
-│   └── [domain]/           # 도메인별 컴포넌트
-├── pages/ (또는 app/)
-├── hooks/
-│   └── use[Domain].ts
-├── stores/                 # Zustand (클라이언트 상태만)
-└── styles/
-    └── globals.css         # Tailwind directives
-```
-
-## API 타입 변환
-
-```typescript
-// api-contract.json의 response_200을 그대로 반영
-interface ItemResponse {
-  id: number;
-  name: string;
-  created_at: string;
-}
-```
-
-## 상태관리
-
-- 서버 상태: TanStack Query (캐시, 리페치, 낙관적 업데이트)
-- 클라이언트 상태: Zustand (최소한, 서버 상태와 중복 금지)
-
-## 3가지 상태 필수 처리
-
-```tsx
-if (isLoading) return <Skeleton />;
-if (error) return <ErrorMessage error={error} />;
-if (data.length === 0) return <EmptyState />;
-return <ItemList items={data} />;
-```
-
-## 접근성
-
-- `<button>`, `<nav>`, `<main>`, `<form>` 시맨틱 태그
-- `aria-label` 필요 시 추가
-- Tab 순서 논리적, Enter/Escape 동작
-- 색상 대비 4.5:1 이상

package/skills/generator-frontend/references/_web-react-legacy/design-system-rules.md

@@ -1,139 +0,0 @@
-# Design System Rules
-
-> 출처: taste-skill (Leonxlnx), supanova-design-skill (uxjoseph)
-> React/Next.js 앱 컨텍스트에 맞게 적응
-
-## 디자인 변수 (Baseline)
-
-```
-DESIGN_VARIANCE: 8   (1=대칭, 10=비대칭)
-MOTION_INTENSITY: 6  (1=정적, 10=시네마틱)
-VISUAL_DENSITY: 4    (1=갤러리, 10=콕핏)
-```
-
-사용자 요청에 따라 동적 조정. Planner의 plan.md에 명시된 톤에 맞춤.
-
-## 1. Typography
-
-### 한국어
-- **Primary**: Pretendard (CDN 또는 next/font)
-- Headlines: `text-4xl md:text-5xl lg:text-6xl tracking-tight leading-tight font-bold`
-- Body: `text-base md:text-lg text-gray-600 leading-relaxed max-w-[65ch]`
-- **`break-keep-all`** 필수 (한국어 단어 중간 줄바꿈 방지)
-- **`leading-tight` ~ `leading-snug`** (한국어는 Latin보다 수직 여백 필요)
-
-### 영문 Display
-- `Geist`, `Outfit`, `Cabinet Grotesk`, `Satoshi` 중 택 1
-- Headlines: `tracking-tighter leading-none`
-- Dashboard/Software UI: Serif 폰트 **금지** → Sans-Serif만 (`Geist` + `Geist Mono`)
-
-### 금지 폰트
-Inter, Noto Sans KR, Roboto, Arial, Open Sans, Helvetica, Malgun Gothic
-
-## 2. Color
-
-- **Accent 1개만.** Saturation < 80%
-- **THE LILA BAN**: AI 보라색/파란색 그라디언트 **금지**
-- Neutral base: Zinc/Slate 계열
-- Accent: Emerald, Electric Blue, Warm Amber, Deep Rose 중 택 1
-- 페이지 전체 warm/cool gray **혼용 금지**
-- **NO Pure Black**: `#000000` 금지 → `#0a0a0a`, Zinc-950, Slate-950
-
-### 다크모드
-- 랜딩페이지: 다크 기본 권장 (`bg-zinc-950`)
-- 앱/대시보드: 라이트 기본, 다크 옵션 (`dark:` prefix)
-
-## 3. Layout
-
-- **ANTI-CENTER BIAS**: DESIGN_VARIANCE > 4 일 때 센터 정렬 Hero **금지**
-  - Split Screen (50/50), 좌측 정렬/우측 에셋, 비대칭 여백 사용
-- **NO 3-Column Equal Cards**: Bento Grid, Zig-Zag, 비대칭 그리드 사용
-- **Grid over Flex-Math**: `grid grid-cols-1 md:grid-cols-3 gap-6` (flexbox calc 금지)
-- **컨테이너**: `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`
-- **섹션 간격**: `py-24 md:py-32 lg:py-40` (디자인이 숨쉬도록)
-- **모바일 오버라이드**: `< 768px`에서 `w-full px-4 py-8` 단일 컬럼 강제
-
-### Bento Grid 패턴
-```
-grid grid-cols-12
-- col-span-8 row-span-2 (큰 카드)
-- col-span-4 (작은 카드 2개 스택)
-```
-
-## 4. Components
-
-### Card Architecture (Double-Bezel)
-```
-Outer: bg-white/5 ring-1 ring-white/10 p-1.5 rounded-[2rem]
-Inner: bg-distinct shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)] rounded-[calc(2rem-0.375rem)]
-```
-- Card는 elevation이 hierarchy를 전달할 때만 사용
-- VISUAL_DENSITY > 7: card 대신 `border-t`, `divide-y`, negative space
-
-### CTA Button
-```
-rounded-full px-8 py-4 text-lg
-hover:scale-[1.02] active:scale-[0.98]
-transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1)
-```
-- 화살표 아이콘: 원형 래퍼 안에 배치 (`w-8 h-8 rounded-full bg-black/5`)
-- 모바일 최소 48px 높이
-
-### Eyebrow Tag
-```
-rounded-full px-3 py-1 text-[11px] uppercase tracking-[0.15em] font-medium bg-accent/10 text-accent
-```
-
-## 5. Motion
-
-### 전역 트랜지션 기본값
-```css
-transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
-```
-`linear`, `ease-in-out` **금지**. 모든 인터랙티브 요소에 이 curve 적용.
-
-### 스크롤 진입
-```css
-@keyframes fadeInUp {
-  from { opacity: 0; transform: translateY(2rem); filter: blur(4px); }
-  to   { opacity: 1; transform: translateY(0);    filter: blur(0);   }
-}
-```
-- `IntersectionObserver`로 트리거 (`window.addEventListener('scroll')` 금지)
-- 형제 요소 stagger: `animation-delay: calc(var(--index) * 80ms)`
-
-### Framer Motion (MOTION_INTENSITY > 5)
-- Spring physics: `type: "spring", stiffness: 100, damping: 20`
-- `layout` / `layoutId`로 레이아웃 전환
-- `useMotionValue` + `useTransform` (연속 애니메이션에 useState 금지)
-- Perpetual motion은 `React.memo`로 격리된 Client Component에서만
-- `<AnimatePresence>` 필수
-
-### 성능
-- **GPU만**: `transform`, `opacity`만 애니메이션. `top/left/width/height` 금지
-- **Blur 제한**: `backdrop-blur`는 fixed/sticky 요소에만
-- **Z-index**: sticky nav(`z-40`), overlay(`z-50`)에만. 임의 z-50 남발 금지
-- **Grain/Noise**: `position: fixed; pointer-events: none; z-[60]`에서만
-
-## 6. Viewport & Responsiveness
-
-- **`min-h-[100dvh]`** 사용 (`h-screen` **금지** — iOS Safari 깨짐)
-- Breakpoints: `sm:640` `md:768` `lg:1024` `xl:1280`
-- 모바일 터치 타겟: 최소 44px
-- 텍스트 가독성: 모바일 최소 14px
-
-## 7. 한국어 콘텐츠 기준
-
-- **자연스러운 한국어**: 번역체 금지
-- 존댓말 일관성: 합니다/하세요 통일
-- CTA: "무료로 시작하기", "3분만에 만들어보기", "지금 바로 체험하기"
-- **금지 표현**: "혁신적인", "획기적인", "차세대", "원활한", "게임 체인저"
-- 이름: 하윤서, 박도현, 이서진, 김하늘 (김철수/John Doe 금지)
-- 숫자: `47,200+`, `4.87/5.0` (50,000+, 5.0 같은 깨끗한 숫자 금지)
-
-## 8. Icons
-
-- **Phosphor Icons** (`@phosphor-icons/react`) 또는 **Radix Icons** (`@radix-ui/react-icons`)
-- strokeWidth 전역 통일 (1.5 또는 2.0 중 택 1)
-- **이모지 금지**: 코드, 마크업, 텍스트 어디에서든
-- FontAwesome, Material Icons 금지 (두꺼운 선)

package/skills/generator-frontend/references/_web-react-legacy/vercel-best-practices.md

@@ -1,54 +0,0 @@
-# Vercel / Next.js Best Practices
-
-> 출처: Vercel Engineering, Next.js App Router 공식 문서
-
-## Framework 기본값
-
-- **Next.js App Router** + **Server Components** 기본
-- `'use client'`는 인터랙션이 필요한 곳에만 추가
-- `proxy.ts` (Next.js 16+) 또는 `middleware.ts`로 인터셉션, 인증 게이트, 리다이렉트
-- Cache Components, `next/image`, `next/font` 우선 사용
-
-## RSC (React Server Components) 규칙
-
-- **RSC 안전**: 전역 상태는 Client Components에서만 동작
-- Next.js에서 Provider는 별도 `'use client'` 컴포넌트로 래핑
-- **인터랙티비티 격리**: 모션/인터랙션이 있는 UI는 독립 leaf 컴포넌트로 추출 + `'use client'`
-- Server Components는 정적 레이아웃만 렌더링
-
-## 렌더링 전략
-
-- **SSG (Static)**: 변하지 않는 페이지
-- **ISR (Incremental)**: 주기적 갱신이 필요한 페이지
-- **SSR (Dynamic)**: 요청마다 달라지는 페이지
-- **PPR (Partial Prerendering)**: 정적 쉘 + 동적 홀 조합
-
-## 성능 최적화
-
-- `next/image`: 자동 최적화, `loading="lazy"`, `sizes` 속성 필수
-- `next/font`: 빌드 타임 폰트 최적화, 레이아웃 시프트 방지
-- **번들 사이즈**: `'use client'` 경계에서 트리쉐이킹 확인
-- **Core Web Vitals**: LCP < 2.5s, FID < 100ms, CLS < 0.1 목표
-
-## 상태관리 전략
-
-- **서버 상태**: TanStack Query (캐시, 리페치, 낙관적 업데이트)
-- **클라이언트 상태**: Zustand (최소한, 서버 상태와 중복 금지)
-- `useState`/`useReducer`: 격리된 UI 로직에만
-- 전역 상태: deep prop-drilling 회피 목적으로만
-
-## 의존성 검증 [필수]
-
-3rd party 라이브러리 import 전 반드시 `package.json` 확인.
-없으면 설치 명령 먼저 출력. **존재를 가정하지 않는다.**
-
-## Tailwind CSS 버전 관리
-
-- `package.json`에서 v3/v4 확인 후 해당 문법 사용
-- v4: `postcss.config.js`에 `tailwindcss` 플러그인 사용 금지 → `@tailwindcss/postcss` 또는 Vite 플러그인
-- v3 프로젝트에 v4 문법 혼용 금지
-
-## shadcn/ui 사용 시
-
-- 기본 상태 그대로 사용 **금지**
-- radius, colors, shadows를 프로젝트 디자인 시스템에 맞게 커스터마이즈 필수