@kood/claude-code 0.5.3 → 0.5.4

package/templates/.claude/skills/stitch-react/SKILL.md

@@ -0,0 +1,323 @@
+---
+name: stitch:react
+description: 디자인을 모듈형 React 컴포넌트로 변환
+---
+
+<purpose>
+디자인 자산을 타입 안전하고 모듈화된 React 컴포넌트로 변환
+</purpose>
+
+---
+
+<trigger_conditions>
+
+| 트리거 | 반응 |
+|--------|------|
+| "React 컴포넌트 생성" | 즉시 실행 |
+| "디자인을 컴포넌트로" | 즉시 실행 |
+| "UI 컴포넌트 구현" | 즉시 실행 |
+
+</trigger_conditions>
+
+---
+
+<workflow>
+
+<step number="1">
+<action>디자인 자산 분석</action>
+<tools>Read</tools>
+<details>
+- 디자인 파일(Figma, Sketch, DESIGN.md) 읽기
+- 색상, 타이포, 간격 정보 추출
+- 컴포넌트 구조 파악
+</details>
+</step>
+
+<step number="2">
+<action>아키텍처 설계</action>
+<tools>-</tools>
+<details>
+| 분류 | 위치 | 목적 |
+|------|------|------|
+| 컴포넌트 | `src/components/` | 재사용 가능 UI |
+| 훅 | `src/hooks/` | 비즈니스 로직 분리 |
+| 데이터 | `src/data/mockData.ts` | 정적 콘텐츠 |
+| 타입 | `src/types/` | TypeScript 인터페이스 |
+</details>
+</step>
+
+<step number="3">
+<action>컴포넌트 구현</action>
+<tools>Write</tools>
+<details>
+**원칙:**
+- 하나의 파일 = 하나의 컴포넌트
+- Props는 TypeScript 인터페이스로 정의
+- Tailwind 클래스 사용 (하드코딩 금지)
+- 접근성(a11y) 고려
+
+**구조:**
+```typescript
+interface ButtonProps {
+  readonly variant: 'primary' | 'secondary';
+  readonly children: React.ReactNode;
+  readonly onClick?: () => void;
+}
+
+export function Button({ variant, children, onClick }: ButtonProps) {
+  return (
+    <button
+      className={variant === 'primary' ? 'bg-primary' : 'bg-secondary'}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
+```
+</details>
+</step>
+
+<step number="4">
+<action>Tailwind 설정 동기화</action>
+<tools>Edit</tools>
+<details>
+DESIGN.md의 색상/타이포 → `tailwind.config.ts`
+```typescript
+export default {
+  theme: {
+    extend: {
+      colors: {
+        primary: '#3B82F6',
+        secondary: '#64748B',
+      },
+    },
+  },
+}
+```
+</details>
+</step>
+
+<step number="5">
+<action>검증</action>
+<tools>Bash</tools>
+<details>
+```bash
+# TypeScript 타입 체크
+npx tsc --noEmit
+
+# 린트
+npx eslint src/
+
+# 빌드 테스트
+npm run build
+```
+</details>
+</step>
+
+</workflow>
+
+---
+
+<architecture_rules>
+
+## 금지
+
+| 패턴 | 이유 |
+|------|------|
+| 단일 파일에 모든 컴포넌트 | 유지보수 어려움 |
+| 하드코딩된 색상 (`#3B82F6`) | 테마 변경 불가 |
+| 인라인 스타일 | 일관성 저하 |
+| any 타입 | 타입 안전성 상실 |
+
+## 필수
+
+| 패턴 | 이유 |
+|------|------|
+| 컴포넌트당 1파일 | 명확한 구조 |
+| Tailwind 클래스 | 테마 통합 |
+| TypeScript 인터페이스 | 타입 안전성 |
+| Readonly Props | 불변성 보장 |
+
+</architecture_rules>
+
+---
+
+<examples>
+
+## Button 컴포넌트
+
+**입력 (DESIGN.md):**
+```markdown
+### 버튼
+- Primary: 파란색 배경, 흰색 텍스트
+- Secondary: 회색 배경, 검은색 텍스트
+- 모서리: 8px 라운드
+- 패딩: 상하 12px, 좌우 24px
+```
+
+**출력:**
+```typescript
+// src/components/Button.tsx
+interface ButtonProps {
+  readonly variant: 'primary' | 'secondary';
+  readonly children: React.ReactNode;
+  readonly onClick?: () => void;
+  readonly disabled?: boolean;
+}
+
+export function Button({
+  variant,
+  children,
+  onClick,
+  disabled
+}: ButtonProps) {
+  const baseClasses = 'rounded-lg px-6 py-3 font-medium transition-colors';
+  const variantClasses = {
+    primary: 'bg-primary text-white hover:bg-primary-dark',
+    secondary: 'bg-secondary text-black hover:bg-secondary-dark',
+  };
+
+  return (
+    <button
+      className={`${baseClasses} ${variantClasses[variant]}`}
+      onClick={onClick}
+      disabled={disabled}
+      aria-disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+}
+```
+
+```typescript
+// tailwind.config.ts
+export default {
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: '#3B82F6',
+          dark: '#2563EB',
+        },
+        secondary: {
+          DEFAULT: '#64748B',
+          dark: '#475569',
+        },
+      },
+    },
+  },
+}
+```
+
+---
+
+## Card 컴포넌트
+
+**입력:**
+```markdown
+### 카드
+- 배경: 흰색
+- 테두리: 연한 회색 1px
+- 그림자: 부드러운 그림자
+- 패딩: 24px
+```
+
+**출력:**
+```typescript
+// src/components/Card.tsx
+interface CardProps {
+  readonly children: React.ReactNode;
+  readonly className?: string;
+}
+
+export function Card({ children, className = '' }: CardProps) {
+  return (
+    <div className={`bg-white border border-gray-200 rounded-xl p-6 shadow-sm ${className}`}>
+      {children}
+    </div>
+  );
+}
+```
+
+</examples>
+
+---
+
+<custom_hook_pattern>
+
+**비즈니스 로직 분리:**
+
+```typescript
+// src/hooks/useUserData.ts
+import { useState, useEffect } from 'react';
+
+interface User {
+  readonly id: string;
+  readonly name: string;
+}
+
+export function useUserData(userId: string) {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchUser() {
+      const response = await fetch(`/api/users/${userId}`);
+      const data = await response.json();
+      setUser(data);
+      setLoading(false);
+    }
+    fetchUser();
+  }, [userId]);
+
+  return { user, loading };
+}
+```
+
+**컴포넌트에서 사용:**
+```typescript
+// src/components/UserProfile.tsx
+import { useUserData } from '@/hooks/useUserData';
+
+export function UserProfile({ userId }: { userId: string }) {
+  const { user, loading } = useUserData(userId);
+
+  if (loading) return <div>Loading...</div>;
+  return <div>{user?.name}</div>;
+}
+```
+
+</custom_hook_pattern>
+
+---
+
+<validation>
+
+**체크리스트:**
+- [ ] 컴포넌트당 1파일
+- [ ] TypeScript 인터페이스 정의
+- [ ] Props에 `readonly` 사용
+- [ ] Tailwind 클래스만 사용 (하드코딩 금지)
+- [ ] 접근성(aria-*) 속성 추가
+- [ ] 비즈니스 로직은 Custom Hook으로 분리
+- [ ] `tsc --noEmit` 통과
+- [ ] `eslint` 통과
+
+</validation>
+
+---
+
+<best_practices>
+
+| 원칙 | 방법 |
+|------|------|
+| **모듈화** | 작은 단위로 분리 |
+| **타입 안전성** | `any` 금지, 명시적 타입 |
+| **불변성** | `readonly` Props |
+| **테마 통합** | Tailwind 설정 활용 |
+| **접근성** | ARIA 속성, 시맨틱 HTML |
+| **로직 분리** | UI ≠ 비즈니스 로직 |
+
+</best_practices>

package/templates/.claude/skills/stitch-react/examples/gold-standard-card.tsx

@@ -0,0 +1,88 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+// Note for Agent: The '@' alias refers to the target project's src directory.
+// Ensure src/data/mockData.ts is created before generating this component.
+import { cardData } from '../data/mockData';
+
+/**
+ * Gold Standard: ActivityCard
+ * This file serves as the definitive reference for the agent.
+ */
+interface ActivityCardProps {
+  readonly id: string;
+  readonly username: string;
+  readonly action: 'MERGED' | 'COMMIT';
+  readonly timestamp: string;
+  readonly avatarUrl: string;
+  readonly repoName: string;
+}
+
+export const ActivityCard: React.FC<ActivityCardProps> = ({
+  username,
+  action,
+  timestamp,
+  avatarUrl,
+  repoName,
+}) => {
+  const isMerged = action === 'MERGED';
+
+  return (
+    <div className='flex items-center justify-between gap-4 rounded-lg bg-surface-dark p-4 min-h-14 shadow-sm ring-1 ring-white/10'>
+      <div className='flex items-center gap-4 overflow-hidden'>
+        <div
+          className='aspect-square h-10 w-10 flex-shrink-0 rounded-full bg-cover bg-center bg-no-repeat'
+          style={{ backgroundImage: `url(${avatarUrl})` }}
+          aria-label={`Avatar for ${username}`}
+        />
+
+        <div className='flex flex-wrap items-center gap-x-2 gap-y-1 text-sm sm:text-base'>
+          <a
+            href='#'
+            className='font-semibold text-primary hover:underline truncate'
+          >
+            {username}
+          </a>
+
+          <span
+            className={`inline-block px-2 py-0.5 text-xs font-semibold rounded-full ${
+              isMerged
+                ? 'bg-purple-500/30 text-purple-300'
+                : 'bg-primary/30 text-primary'
+            }`}
+          >
+            {action}
+          </span>
+
+          <span className='text-white/60'>in</span>
+
+          <a href='#' className='text-primary hover:underline truncate'>
+            {repoName}
+          </a>
+        </div>
+      </div>
+
+      <div className='shrink-0'>
+        <p className='text-sm font-normal leading-normal text-white/50'>
+          {timestamp}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default ActivityCard;

package/templates/.claude/skills/stitch-react/package-lock.json

@@ -0,0 +1,231 @@
+{
+  "name": "stitch-to-react-pro",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "stitch-to-react-pro",
+      "version": "1.0.0",
+      "dependencies": {
+        "@swc/core": "^1.3.100"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@swc/core": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.15.8.tgz",
+      "integrity": "sha512-T8keoJjXaSUoVBCIjgL6wAnhADIb09GOELzKg10CjNg+vLX48P93SME6jTfte9MZIm5m+Il57H3rTSk/0kzDUw==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3",
+        "@swc/types": "^0.1.25"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/swc"
+      },
+      "optionalDependencies": {
+        "@swc/core-darwin-arm64": "1.15.8",
+        "@swc/core-darwin-x64": "1.15.8",
+        "@swc/core-linux-arm-gnueabihf": "1.15.8",
+        "@swc/core-linux-arm64-gnu": "1.15.8",
+        "@swc/core-linux-arm64-musl": "1.15.8",
+        "@swc/core-linux-x64-gnu": "1.15.8",
+        "@swc/core-linux-x64-musl": "1.15.8",
+        "@swc/core-win32-arm64-msvc": "1.15.8",
+        "@swc/core-win32-ia32-msvc": "1.15.8",
+        "@swc/core-win32-x64-msvc": "1.15.8"
+      },
+      "peerDependencies": {
+        "@swc/helpers": ">=0.5.17"
+      },
+      "peerDependenciesMeta": {
+        "@swc/helpers": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@swc/core-darwin-arm64": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.15.8.tgz",
+      "integrity": "sha512-M9cK5GwyWWRkRGwwCbREuj6r8jKdES/haCZ3Xckgkl8MUQJZA3XB7IXXK1IXRNeLjg6m7cnoMICpXv1v1hlJOg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-darwin-x64": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.15.8.tgz",
+      "integrity": "sha512-j47DasuOvXl80sKJHSi2X25l44CMc3VDhlJwA7oewC1nV1VsSzwX+KOwE5tLnfORvVJJyeiXgJORNYg4jeIjYQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm-gnueabihf": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.15.8.tgz",
+      "integrity": "sha512-siAzDENu2rUbwr9+fayWa26r5A9fol1iORG53HWxQL1J8ym4k7xt9eME0dMPXlYZDytK5r9sW8zEA10F2U3Xwg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-gnu": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.15.8.tgz",
+      "integrity": "sha512-o+1y5u6k2FfPYbTRUPvurwzNt5qd0NTumCTFscCNuBksycloXY16J8L+SMW5QRX59n4Hp9EmFa3vpvNHRVv1+Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-musl": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.15.8.tgz",
+      "integrity": "sha512-koiCqL09EwOP1S2RShCI7NbsQuG6r2brTqUYE7pV7kZm9O17wZ0LSz22m6gVibpwEnw8jI3IE1yYsQTVpluALw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-gnu": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.15.8.tgz",
+      "integrity": "sha512-4p6lOMU3bC+Vd5ARtKJ/FxpIC5G8v3XLoPEZ5s7mLR8h7411HWC/LmTXDHcrSXRC55zvAVia1eldy6zDLz8iFQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-musl": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.15.8.tgz",
+      "integrity": "sha512-z3XBnbrZAL+6xDGAhJoN4lOueIxC/8rGrJ9tg+fEaeqLEuAtHSW2QHDHxDwkxZMjuF/pZ6MUTjHjbp8wLbuRLA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-arm64-msvc": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.15.8.tgz",
+      "integrity": "sha512-djQPJ9Rh9vP8GTS/Df3hcc6XP6xnG5c8qsngWId/BLA9oX6C7UzCPAn74BG/wGb9a6j4w3RINuoaieJB3t+7iQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-ia32-msvc": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.15.8.tgz",
+      "integrity": "sha512-/wfAgxORg2VBaUoFdytcVBVCgf1isWZIEXB9MZEUty4wwK93M/PxAkjifOho9RN3WrM3inPLabICRCEgdHpKKQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-x64-msvc": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.15.8.tgz",
+      "integrity": "sha512-GpMePrh9Sl4d61o4KAHOOv5is5+zt6BEXCOCgs/H0FLGeii7j9bWDE8ExvKFy2GRRZVNR1ugsnzaGWHKM6kuzA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@swc/types": {
+      "version": "0.1.25",
+      "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.25.tgz",
+      "integrity": "sha512-iAoY/qRhNH8a/hBvm3zKj9qQ4oc2+3w1unPJa2XvTK3XjeLXtzcCingVPw/9e5mn1+0yPqxcBGp9Jf0pkfMb1g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3"
+      }
+    }
+  }
+}

package/templates/.claude/skills/stitch-react/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "react-components",
+  "version": "1.0.0",
+  "description": "Design-to-code prompt to React components for Stitch MCP",
+  "type": "module",
+  "scripts": {
+    "validate": "node scripts/validate.js",
+    "fetch": "bash scripts/fetch-stitch.sh"
+  },
+  "dependencies": {
+    "@swc/core": "^1.3.100"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/templates/.claude/skills/stitch-react/resources/architecture-checklist.md

@@ -0,0 +1,15 @@
+# Architecture Quality Gate
+
+### Structural integrity
+- [ ] Logic extracted to custom hooks in `src/hooks/`.
+- [ ] No monolithic files; strictly Atomic/Composite modularity.
+- [ ] All static text/URLs moved to `src/data/mockData.ts`.
+
+### Type safety and syntax
+- [ ] Props use `Readonly<T>` interfaces.
+- [ ] File is syntactically valid TypeScript (no red squiggles).
+- [ ] Placeholders from templates (e.g., `StitchComponent`) have been replaced with actual names.
+
+### Styling and theming
+- [ ] Dark mode (`dark:`) applied to all color classes.
+- [ ] No hardcoded hex values; use theme-mapped Tailwind classes.