timelabs 0.1.0 → 0.1.1

package/skills/web-design/claude-code/verify/verify-motions.md

@@ -0,0 +1,74 @@
+# 모션/애니메이션 적용 검증
+
+> 트리거: /wd verify (자동) 또는 /wd verify motions
+> 입력: docs/design/web-design-guide.md Section 7-8 (인터랙션 & 모션)
+> 방법: 코드베이스 자동 스캔
+
+## 검증 프로세스
+
+### 1단계: 모션 스펙 추출
+
+docs/design/web-design-guide.md에서 Section 7-8을 파싱합니다.
+
+추출 대상:
+- @keyframes 정의 목록
+- transition 패턴 (hover/focus/active)
+- 페이지 전환 애니메이션 명세
+- 로딩 애니메이션 명세
+- 스크롤 기반 인터랙션 명세
+- 모션 강도 설정 (subtle/moderate/dramatic)
+
+### 2단계: 코드베이스 스캔
+
+#### @keyframes 검증
+- Grep: @keyframes {name} → src/ 전체
+- 정의된 것 vs 실제 사용된 것 비교
+
+#### hover/focus/active 상태
+- Grep: :hover, :focus, :active, hover:, focus:, active: → 컴포넌트 파일
+- 디자인 가이드에 명시된 인터랙션 패턴과 비교
+
+#### 페이지 전환
+- Grep: transition, animate-, framer-motion, @view-transition → 라우터/레이아웃 파일
+- 전환 애니메이션 존재 여부
+
+#### 로딩 애니메이션
+- Grep: skeleton, spinner, loading, pulse → 컴포넌트 파일
+- 로딩 상태 처리 존재 여부
+
+#### 스크롤 인터랙션
+- Grep: IntersectionObserver, scroll, data-aos, gsap, framer → 전체
+- 스크롤 기반 효과 존재 여부
+
+#### 접근성
+- Grep: prefers-reduced-motion → CSS 파일
+- reduced-motion 대응 존재 여부
+
+### 3단계: 판정
+
+각 모션 항목에 대해:
+| 상태 | 판정 |
+|------|------|
+| 구현됨 | ✅ 적용 |
+| 미구현 | ❌ 미적용 |
+| 부분 구현 | ⚠️ 부분 적용 (세부 사항 표시) |
+
+## 출력 형식
+
+```
+■ 모션 적용 현황
+@keyframes: 3/5 (60%)
+  ✅ fadeIn (4회 사용)
+  ✅ slideUp (2회 사용)
+  ❌ shimmer (정의됨, 미사용)
+  ...
+
+인터랙션 상태: 4/4 (100%)
+  ✅ hover 상태 트랜지션
+  ✅ focus 상태 인디케이터
+  ✅ active 상태 피드백
+  ✅ disabled 상태 스타일링
+
+접근성:
+  ✅ prefers-reduced-motion 대응
+```

package/skills/web-design/claude-code/verify/verify-pipeline.md

@@ -0,0 +1,69 @@
+# 파이프라인 연결 상태 검증
+
+> 트리거: /wd status
+
+## 역할
+
+web-design 파이프라인의 각 단계별 완료 상태를 확인하고 시각적으로 표시합니다.
+
+## 검증 항목
+
+### Phase 1: 리서치 (선택)
+
+| 항목 | 확인 방법 | 상태 |
+|------|---------|------|
+| 벤치마킹 | docs/benchmarking/report.md 존재 | ✅ 완료 / ⬜ 미실행 |
+| 목업 분석 | .design/*/analysis.json 존재 | ✅ 완료 / ⬜ 미실행 |
+
+### Phase 2: 수집
+
+| 항목 | 확인 방법 | 상태 |
+|------|---------|------|
+| 프로젝트 유형 | project-context.json → project_type 존재 | ✅/❌ |
+| 레이아웃 패턴 | project-context.json → layout_pattern 존재 | ✅/❌ |
+| 모션 패턴 | project-context.json → motion_pattern 존재 | ✅/❌ |
+| 디자인 스타일 | project-context.json → style 존재 | ✅/❌ |
+| 테마 | project-context.json → theme 존재 | ✅/❌ |
+
+### Phase 3: 생성
+
+| 항목 | 확인 방법 | 상태 |
+|------|---------|------|
+| 디자인 토큰 | design/tokens/variables.css 존재 | ✅/❌ |
+| 토큰 연결 | globals.css에 import 존재 | ✅/❌ |
+| 디자인 가이드 | docs/design/web-design-guide.md 존재 | ✅/❌ |
+
+### Phase 4: 검증
+
+| 항목 | 확인 방법 | 상태 |
+|------|---------|------|
+| 토큰 검증 | project-context.json → verify.tokens 존재 | ✅/❌ |
+| 전체 검증 | project-context.json → verified == true | ✅/❌ |
+
+## 출력 형식
+
+```
+🔄 Web Design 파이프라인 상태
+═══════════════════════════════════
+Phase 1: 리서치
+  ⬜ 벤치마킹 (선택)
+  ⬜ 목업 분석 (선택)
+
+Phase 2: 수집
+  ✅ 프로젝트 유형: web
+  ✅ 레이아웃: dashboard
+  ✅ 모션: material-motion (moderate)
+  ✅ 스타일: K (대시보드)
+  ✅ 테마: system
+
+Phase 3: 생성
+  ✅ 디자인 토큰
+  ✅ 토큰 연결
+  ❌ 디자인 가이드
+
+Phase 4: 검증
+  ❌ 미실행
+
+다음 단계: /wd generate (디자인 가이드 생성)
+═══════════════════════════════════
+```

package/skills/web-design/claude-code/verify/verify-report.md

@@ -0,0 +1,75 @@
+# 검증 리포트 생성 및 자동 완료 표시
+
+> 트리거: /wd verify (자동 — 모든 검증 모듈 실행 후 최종 단계)
+> 입력: verify-tokens, verify-motions, verify-components, verify-responsive 결과
+
+## 리포트 형식
+
+verify/ 모든 모듈의 결과를 종합하여 리포트를 생성합니다.
+
+### 출력
+
+```
+📊 디자인 적용 현황 리포트
+══════════════════════════════════════
+■ 토큰 적용률: {applied}/{total} ({percentage}%)
+  ├ CSS Variables: {n}/{m}
+  ├ Tailwind 확장: {n}/{m}
+  └ 연결 상태: {status}
+
+■ 모션 적용률: {applied}/{total} ({percentage}%)
+  ├ @keyframes: {n}/{m}
+  ├ 인터랙션 상태: {n}/{m}
+  └ 접근성(reduced-motion): {status}
+
+■ 컴포넌트 적용률: {applied}/{total} ({percentage}%)
+  ├ 완전 적용: {n}개
+  ├ 부분 적용: {n}개
+  └ 미적용: {n}개
+
+■ 반응형/이미지: {applied}/{total} ({percentage}%)
+
+══════════════════════════════════════
+총 적용률: {total_applied}/{grand_total} ({grand_percentage}%)
+══════════════════════════════════════
+```
+
+### 미적용 항목 요약
+
+```
+❌ 미적용 항목 ({count}개):
+1. [토큰] --color-tertiary — 0회 사용
+2. [모션] shimmer — 정의됨, 미사용
+3. [컴포넌트] Modal — 미구현
+4. [반응형] OG 이미지 메타태그 없음
+...
+```
+
+### 권장 조치
+
+각 미적용 항목에 대한 구체적 가이드:
+- 파일 경로
+- 추가해야 할 코드 예시
+- 참조해야 할 디자인 가이드 섹션
+
+## project-context.json 업데이트
+
+```json
+{
+  "design": {
+    "verify": {
+      "last_run": "{ISO8601}",
+      "tokens": { "applied": N, "total": M, "rate": "90.4%" },
+      "motions": { "applied": N, "total": M, "rate": "42.9%" },
+      "components": { "applied": N, "total": M, "rate": "80.0%" },
+      "responsive": { "applied": N, "total": M, "rate": "66.7%" },
+      "total_rate": "82.5%"
+    },
+    "verified": false
+  }
+}
+```
+
+적용률 100% 달성 시:
+→ design.verified = true
+→ "모든 디자인 요소가 적용되었습니다!"

package/skills/web-design/claude-code/verify/verify-responsive.md

@@ -0,0 +1,49 @@
+# 반응형/이미지 전략 적용 검증
+
+> 트리거: /wd verify (자동) 또는 /wd verify responsive
+> 방법: 코드베이스 자동 스캔
+
+## 검증 항목
+
+### 반응형 브레이크포인트
+
+Grep으로 확인:
+- @media 쿼리 또는 Tailwind 반응형 접두사 (sm:, md:, lg:, xl:)
+- 최소 3개 이상 브레이크포인트 사용 여부
+
+| 결과 | 판정 |
+|------|------|
+| 3+ 브레이크포인트 사용 | ✅ |
+| 1-2 브레이크포인트 | ⚠️ 부분 |
+| 없음 | ❌ |
+
+### 이미지 최적화
+
+#### Lazy Loading
+- Grep: loading="lazy", lazy, LazyImage → img 태그 포함 파일
+- next/image의 자동 lazy loading 포함
+
+#### 반응형 이미지
+- Grep: srcset, sizes, <picture>, next/image → 이미지 관련 파일
+
+### OG 이미지 메타태그
+
+- Grep: og:image, twitter:image → layout/head/metadata 파일
+- 소셜 공유 이미지 설정 여부
+
+### Favicon
+
+- Glob: public/favicon*, app/favicon*, public/icon*
+- favicon.ico 또는 동등한 아이콘 존재 여부
+
+## 출력 형식
+
+```
+■ 반응형/이미지 현황: 4/6 (66.7%)
+  ✅ 반응형 브레이크포인트 (sm/md/lg/xl 사용)
+  ✅ 이미지 lazy loading
+  ✅ favicon 존재
+  ❌ OG 이미지 메타태그 없음
+  ❌ 반응형 이미지 (srcset/picture) 미사용
+  ...
+```

package/skills/web-design/claude-code/verify/verify-tokens.md

@@ -0,0 +1,84 @@
+# 토큰 사용 검증
+
+> 트리거: /wd verify (자동) 또는 /wd verify tokens
+> 입력: design/tokens/ (variables.css, visual.css, tailwind.config 등)
+> 방법: 코드베이스 자동 스캔
+
+## 검증 프로세스
+
+### 1단계: 토큰 목록 추출
+
+design/tokens/ 디렉토리에서 정의된 토큰 목록을 추출합니다.
+
+#### CSS Custom Properties
+
+Read design/tokens/variables.css
+→ `--`로 시작하는 모든 프로퍼티 이름 추출
+→ 예: --color-primary, --spacing-4, --radius-md
+
+#### Tailwind 확장 클래스
+
+Read tailwind.config.js (또는 .ts)
+→ theme.extend 내의 커스텀 키 추출
+→ 예: bg-primary, shadow-card, text-heading
+
+#### 시맨틱 토큰
+
+Read design/tokens/visual.css (있는 경우)
+→ --surface-*, --text-*, --border-* 패턴 추출
+
+### 2단계: 코드베이스 스캔
+
+src/ 디렉토리 전체를 Grep으로 스캔합니다.
+
+각 토큰에 대해:
+- Grep pattern: 토큰 이름 (예: --color-primary, bg-primary)
+- 스캔 대상: *.css, *.scss, *.tsx, *.jsx, *.vue, *.svelte, *.html
+- 결과: 사용 횟수 집계
+
+### 3단계: 판정
+
+| 사용 횟수 | 판정 |
+|----------|------|
+| 0회 | ❌ 미적용 |
+| 1회 이상 | ✅ 적용 |
+
+### 4단계: 연결 검증
+
+#### globals.css import 확인
+
+Grep으로 globals.css (또는 main CSS 파일)에서 확인:
+- @import "../../design/tokens/variables.css" 또는 동등한 import 존재?
+- @import "../../design/tokens/visual.css" 존재?
+
+| 결과 | 판정 |
+|------|------|
+| import 존재 | ✅ 연결됨 |
+| import 없음 | ❌ 미연결 — "globals.css에 토큰 import가 없습니다" |
+
+#### tailwind.config 머지 확인
+
+tailwind.config 파일에서:
+- boxShadow, animation, backgroundImage 등에 토큰 값이 머지되었는가?
+- colors.extend에 시맨틱 컬러가 포함되었는가?
+
+## 출력 형식
+
+```
+■ 토큰 적용 현황
+CSS Variables: 32/35 (91.4%)
+  ✅ --color-primary (12회)
+  ✅ --color-secondary (8회)
+  ❌ --color-tertiary (0회)
+  ...
+
+Tailwind 확장: 15/17 (88.2%)
+  ✅ bg-primary (23회)
+  ❌ shadow-card (0회)
+  ...
+
+연결 상태:
+  ✅ globals.css → variables.css import
+  ✅ globals.css → visual.css import
+  ✅ tailwind.config → 토큰 머지
+```

package/skills/test-skill/claude-code/SKILL.md

@@ -1,7 +0,0 @@
-# Test Skill
-
-This is a test skill for Claude Code.
-
-## Instructions
-
-When the user asks you to run the test skill, respond with "Test skill is active!"

package/skills/test-skill/cursor/test-skill.md

@@ -1,7 +0,0 @@
-# Test Skill
-
-This is a test skill for Cursor.
-
-## Instructions
-
-When the user asks you to run the test skill, respond with "Test skill is active!"

package/skills/test-skill/openclaw/SKILL.md

@@ -1,13 +0,0 @@
----
-name: test-skill
-version: 1.0.0
-description: A sample skill for testing the installer
----
-
-# Test Skill
-
-This is a test skill for OpenClaw.
-
-## Instructions
-
-When the user asks you to run the test skill, respond with "Test skill is active!"

package/skills/test-skill/skill.json

@@ -1,6 +0,0 @@
-{
-  "name": "test-skill",
-  "displayName": "Test Skill",
-  "description": "A sample skill for testing the installer",
-  "version": "1.0.0"
-}