npm - @kood/claude-code - Versions diffs - 0.5.1 → 0.5.4 - Mend

@kood/claude-code 0.5.1 → 0.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (88) hide show

package/templates/.claude/skills/stitch-react/resources/component-template.tsx ADDED Viewed

@@ -0,0 +1,37 @@
+/**
+ * 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';
+// Use a valid identifier like 'StitchComponent' as the placeholder
+interface StitchComponentProps {
+  readonly children?: React.ReactNode;
+  readonly className?: string;
+}
+export const StitchComponent: React.FC<StitchComponentProps> = ({
+  children,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div className={`relative ${className}`} {...props}>
+      {children}
+    </div>
+  );
+};
+export default StitchComponent;

package/templates/.claude/skills/stitch-react/resources/stitch-api-reference.md ADDED Viewed

@@ -0,0 +1,14 @@
+# Stitch API reference
+This document describes the data structures returned by the Stitch MCP server to ensure accurate component mapping.
+### Metadata schema
+When calling `get_screen`, the server returns a JSON object with these key properties:
+* **htmlCode**: Contains a `downloadUrl`. This is a signed URL that requires a system-level fetch (curl) to handle redirects and security handshakes.
+* **screenshot**: Includes a `downloadUrl` for the visual design. Use this to verify layout intent that might not be obvious in the raw HTML.
+* **deviceType**: Usually set to `DESKTOP`. All generated components should prioritize the corresponding viewport (2560px width) as the base layout.
+### Technical mapping rules
+1. **Element tracking**: Preserve `data-stitch-id` attributes as comments in the TSX to allow for future design synchronization.
+2. **Asset handling**: Treat background images in the HTML as dynamic data. Extract the URLs into `mockData.ts` rather than hardcoding them into the component styles.
+3. **Style extraction**: The HTML `<head>` contains a localized `tailwind.config`. This config must be merged with the local project theme to ensure colors like `primary` and `background-dark` render correctly.

package/templates/.claude/skills/stitch-react/resources/style-guide.json ADDED Viewed

@@ -0,0 +1,24 @@
+{
+  "theme": {
+    "colors": {
+      "primary": "#19e66f",
+      "background": {
+        "light": "#f6f8f7",
+        "dark": "#112118",
+        "elevated": "#1A1A1A"
+      },
+      "accent": {
+        "purple": "#8A2BE2",
+        "lavender": "#D0A9F5"
+      }
+    },
+    "typography": {
+      "display": ["Space Grotesk", "sans-serif"],
+      "icons": "Material Symbols Outlined"
+    },
+    "spacing": {
+      "header-h": "72px",
+      "container-max": "960px"
+    }
+  }
+}

package/templates/.claude/skills/stitch-react/scripts/fetch-stitch.sh ADDED Viewed

@@ -0,0 +1,30 @@
+#!/bin/bash
+# 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.
+URL=$1
+OUTPUT=$2
+if [ -z "$URL" ] || [ -z "$OUTPUT" ]; then
+  echo "Usage: $0 <url> <output_path>"
+  exit 1
+fi
+echo "Initiating high-reliability fetch for Stitch HTML..."
+curl -L -f -sS --connect-timeout 10 --compressed "$URL" -o "$OUTPUT"
+if [ $? -eq 0 ]; then
+  echo "✅ Successfully retrieved HTML at: $OUTPUT"
+  exit 0
+else
+  echo "❌ Error: Failed to retrieve content. Check TLS/SNI or URL expiration."
+  exit 1
+fi

package/templates/.claude/skills/stitch-react/scripts/validate.js ADDED Viewed

@@ -0,0 +1,77 @@
+/**
+ * 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 swc from '@swc/core';
+import fs from 'node:fs';
+import path from 'node:path';
+async function validateComponent(filePath) {
+  const code = fs.readFileSync(filePath, 'utf-8');
+  const filename = path.basename(filePath);
+  try {
+    const ast = await swc.parse(code, { syntax: 'typescript', tsx: true });
+    let hasInterface = false;
+    let tailwindIssues = [];
+    console.log('🔍 Scanning AST...');
+    const walk = (node) => {
+      if (!node) return;
+      if (
+        node.type === 'TsInterfaceDeclaration' &&
+        node.id.value.endsWith('Props')
+      )
+        hasInterface = true;
+      if (node.type === 'JSXAttribute' && node.name.name === 'className') {
+        if (node.value?.value && /#[0-9A-Fa-f]{6}/.test(node.value.value))
+          tailwindIssues.push(node.value.value);
+      }
+      for (const key in node) {
+        if (node[key] && typeof node[key] === 'object') walk(node[key]);
+      }
+    };
+    walk(ast);
+    console.log(`--- Validation for: ${filename} ---`);
+    if (hasInterface) {
+      console.log('✅ Props declaration found.');
+    } else {
+      console.error("❌ MISSING: Props interface (must end in 'Props').");
+    }
+    if (tailwindIssues.length === 0) {
+      console.log('✅ No hardcoded hex values found.');
+    } else {
+      console.error(
+        `❌ STYLE: Found ${tailwindIssues.length} hardcoded hex codes.`,
+      );
+      tailwindIssues.forEach((hex) => console.error(`   - ${hex}`));
+    }
+    if (hasInterface && tailwindIssues.length === 0) {
+      console.log('\n✨ COMPONENT VALID.');
+      process.exit(0);
+    } else {
+      console.error('\n🚫 VALIDATION FAILED.');
+      process.exit(1);
+    }
+  } catch (err) {
+    console.error('❌ PARSE ERROR:', err.message);
+    process.exit(1);
+  }
+}
+validateComponent(process.argv[2]);

package/templates/.claude/skills/tanstack-start-react-best-practices/SKILL.md CHANGED Viewed

@@ -8,6 +8,12 @@ metadata:
   adapted_for: tanstack-start
 ---
+@../../instructions/agent-patterns/read-parallelization.md
+@../../instructions/validation/forbidden-patterns.md
+@../../instructions/validation/required-behaviors.md
+@../../instructions/multi-agent/coordination-guide.md
+@../../instructions/multi-agent/execution-patterns.md
 # TanStack Start React 베스트 프랙티스
 React와 TanStack Start 애플리케이션 성능 최적화 가이드. 7개 카테고리, 38개 규칙 포함. 영향도별 우선순위로 자동 리팩토링과 코드 생성 가이드 제공.
@@ -30,6 +36,149 @@ React와 TanStack Start 애플리케이션 성능 최적화 가이드. 7개 카
 ---
+<parallel_agent_execution>
+## 병렬 에이전트 실행
+**ULTRAWORK MODE:** TanStack Start 최적화 작업 시 여러 규칙을 동시에 적용하여 5-15배 성능 향상.
+### 기본 원칙
+| 원칙 | 실행 방법 | 효과 |
+|------|----------|------|
+| **PARALLEL** | 독립 작업을 단일 메시지에서 동시 실행 | 5-15배 속도 향상 |
+| **DELEGATE** | 전문 에이전트에게 즉시 위임 | 품질 향상, 컨텍스트 격리 |
+| **SMART MODEL** | 복잡도별 모델 선택 (haiku/sonnet/opus) | 비용 최적화 |
+### Phase별 에이전트 활용
+| Phase | 작업 | 에이전트 | 병렬 실행 |
+|-------|------|---------|----------|
+| **1. 코드베이스 분석** | 라우트 구조, Server Functions, 컴포넌트 파악 | explore (haiku) | ✅ 여러 도메인 동시 탐색 |
+| **2. 규칙 적용** | waterfall 제거, 번들 최적화, re-render 최적화 | implementation-executor (sonnet) | ✅ 독립 라우트/컴포넌트 동시 수정 |
+| **3. 검증** | typecheck/lint/build, 성능/보안 리뷰 | lint-fixer (sonnet), code-reviewer (opus) | ❌ lint-fixer 순차, code-reviewer 병렬 |
+| **4. 완료** | git commit | git-operator (sonnet) | ❌ 순차 |
+### 에이전트별 역할
+| 에이전트 | 모델 | TanStack Start 작업 | 병렬 실행 |
+|---------|------|---------------------|----------|
+| **explore** | haiku | 라우트/Server Functions/컴포넌트 구조 분석 | ✅ |
+| **implementation-executor** | sonnet | 규칙 적용 (async-parallel, bundle-lazy-routes 등) | ✅ |
+| **code-reviewer** | opus | 성능/보안 검토 (server-cache-lru, client-tanstack-query) | ✅ |
+| **lint-fixer** | sonnet | tsc/eslint 에러 자동 수정 | ❌ (순차) |
+### 실전 패턴
+#### 패턴 1: 독립 라우트 병렬 최적화
+```typescript
+// 시나리오: 여러 라우트에 async-parallel, bundle-lazy-routes 적용
+// ❌ 순차 실행 (느림)
+Task(subagent_type="implementation-executor", model="sonnet",
+     prompt="/posts 라우트 최적화: async-parallel, bundle-lazy-routes")
+// 60초 대기
+Task(subagent_type="implementation-executor", model="sonnet",
+     prompt="/users 라우트 최적화: async-parallel, bundle-lazy-routes")
+// 총 120초
+// ✅ 병렬 실행 (빠름)
+Task(subagent_type="implementation-executor", model="sonnet",
+     prompt=`/posts 라우트 최적화:
+     - async-parallel: loader에서 Promise.all()
+     - bundle-lazy-routes: 무거운 컴포넌트 lazy()`)
+Task(subagent_type="implementation-executor", model="sonnet",
+     prompt=`/users 라우트 최적화:
+     - async-parallel: loader에서 Promise.all()
+     - bundle-lazy-routes: 무거운 컴포넌트 lazy()`)
+// 총 60초 (가장 긴 작업 기준)
+```
+#### 패턴 2: Server Function + UI 동시 구현
+```typescript
+// 시나리오: 새 기능 추가 (API + UI + 테스트)
+// ✅ Fan-Out: 병렬 실행
+Task(subagent_type="implementation-executor", model="sonnet",
+     prompt=`createServerFn으로 Comment API 구현:
+     - getComments (GET)
+     - createComment (POST + inputValidator)
+     - server-parallel-fetching 적용`)
+Task(subagent_type="designer", model="sonnet",
+     prompt=`Comment UI 구현:
+     - client-tanstack-query 사용
+     - rerender-memo로 최적화
+     - bundle-barrel-imports 준수 (직접 import)`)
+Task(subagent_type="implementation-executor", model="sonnet",
+     prompt=`Comment 통합 테스트:
+     - API 테스트
+     - UI 테스트`)
+// Fan-In: 결과 수집 후 통합
+Read("functions/comments.ts")
+Read("components/Comments.tsx")
+Read("tests/comments.test.ts")
+```
+#### 패턴 3: 대규모 리팩토링 (배치 처리)
+```typescript
+// 시나리오: 10개 컴포넌트에 rerender-memo, rerender-dependencies 적용
+// ✅ 배치 처리 (토큰 70-90% 절감)
+Task(subagent_type="implementation-executor", model="sonnet",
+     prompt=`다음 컴포넌트들에 re-render 최적화 적용:
+     파일 목록:
+     - components/UserList.tsx
+     - components/PostList.tsx
+     - ... (10개)
+     공통 규칙:
+     1. rerender-memo: 비싼 작업 → React.memo() 추출
+     2. rerender-dependencies: effect 의존성 → 원시값 사용
+     3. rerender-functional-setstate: setState → 함수형 업데이트
+     패턴:
+     ❌ setItems([...items, newItem])
+     ✅ setItems(curr => [...curr, newItem])`)
+```
+### Model Routing
+**원칙:** 작업 복잡도에 따라 모델 선택.
+| 복잡도 | 모델 | TanStack Start 작업 예시 | 비용 | 속도 |
+|--------|------|------------------------|------|------|
+| **LOW** | haiku | 라우트 구조 파악, Server Functions 위치 확인 | 💰 | ⚡⚡⚡ |
+| **MEDIUM** | sonnet | async-parallel 적용, bundle-lazy-routes 구현 | 💰💰 | ⚡⚡ |
+| **HIGH** | opus | 아키텍처 설계, server-cache-lru 전략, 보안 검토 | 💰💰💰 | ⚡ |
+### 체크리스트
+**실행 전 확인:**
+- [ ] 독립 작업 파악 → 병렬 실행 (여러 라우트, 컴포넌트)
+- [ ] 10개 이상 유사 작업 → 배치 처리 (동일 규칙 적용)
+- [ ] 복잡도별 모델 선택 (탐색=haiku, 구현=sonnet, 리뷰=opus)
+- [ ] Phase별 실행 (분석 → 구현 → 검증 → 완료)
+- [ ] 의존성 확인 (Server Function 완료 후 UI 통합)
+**효율 목표:**
+- 순차 실행 대비 5-15배 속도 향상
+- 토큰 사용 70-90% 절감 (배치 처리)
+- 병렬도 3-10개 (과도한 병렬 방지)
+</parallel_agent_execution>
+---
 <categories>
 ## 카테고리별 우선순위