create-ai-project 1.12.0 → 1.13.0

package/.claude/skills/documentation-criteria/references/prd-template.md

@@ -1,109 +0,0 @@
-# PRD: [機能名]
-
-## 概要
-
-### 一言まとめ
-[この機能を一言で説明]
-
-### 背景
-[なぜこの機能が必要か？どのような問題を解決するか？]
-
-## ユーザーストーリー
-
-### 主要ユーザー
-[主なターゲットユーザーを定義]
-
-### ユーザーストーリー
-```
-[ユーザー種別]として
-[目標/願望]をしたい
-なぜなら[期待する価値/メリット]だから
-```
-
-### ユースケース
-1. [具体的な利用シナリオ1]
-2. [具体的な利用シナリオ2]
-3. [具体的な利用シナリオ3]
-
-## 機能要件
-
-### Must Have（MVP）
-- [ ] 要件1: [詳細説明]
-  - AC: [受入条件 - Given/When/Then形式または測定可能な基準]
-- [ ] 要件2: [詳細説明]
-  - AC: [受入条件]
-- [ ] 要件3: [詳細説明]
-  - AC: [受入条件]
-
-### Nice to Have
-- [ ] 要件1: [詳細説明]
-- [ ] 要件2: [詳細説明]
-
-### スコープ外
-- 項目1: [説明と理由]
-- 項目2: [説明と理由]
-
-## 非機能要件
-
-### パフォーマンス
-- レスポンス時間: [目標値]
-- スループット: [目標値]
-- 同時接続数: [目標値]
-
-### 信頼性
-- 可用性: [目標値]
-- エラー率: [目標値]
-
-### セキュリティ
-- [セキュリティ要件の詳細]
-
-### スケーラビリティ
-- [将来のスケーリングに関する考慮事項]
-
-## 成功基準
-
-### 定量的指標
-1. [測定可能な成功指標1]
-2. [測定可能な成功指標2]
-3. [測定可能な成功指標3]
-
-### 定性的指標
-1. [ユーザー体験の指標1]
-2. [ユーザー体験の指標2]
-
-## 技術的考慮事項
-
-### 依存関係
-- [既存システムへの依存]
-- [外部サービスへの依存]
-
-### 制約
-- [技術的な制約]
-- [リソースの制約]
-
-### 前提条件
-- [確認が必要な前提1]
-- [確認が必要な前提2]
-
-### リスクと対策
-| リスク | 影響度 | 発生確率 | 対策 |
-|-------|-------|---------|-----|
-| [リスク1] | 高/中/低 | 高/中/低 | [対策] |
-| [リスク2] | 高/中/低 | 高/中/低 | [対策] |
-
-## 未決定事項
-
-- [ ] [質問1]: [選択肢や影響の説明]
-- [ ] [質問2]: [選択肢や影響の説明]
-
-*このセクションが空になるまでユーザーと議論し、確認後に削除*
-
-## 付録
-
-### 参考資料
-- [関連ドキュメント1]
-- [関連ドキュメント2]
-
-### 用語集
-- **用語1**: [定義]
-- **用語2**: [定義]

package/.claude/skills/frontend/technical-spec/SKILL.md

@@ -1,147 +0,0 @@
----
-name: frontend/technical-spec
-description: 環境変数管理、アーキテクチャ設計、ビルド・テストコマンドを含むフロントエンド技術設計ルール。
----
-
-# 技術設計ルール（フロントエンド）
-
-## 技術スタックの基本方針
-TypeScriptベースのReactアプリケーション実装。アーキテクチャパターンはプロジェクトの要件と規模に応じて選択する。
-
-## 環境変数管理とセキュリティ
-
-### 環境変数管理
-- **ビルドツールの環境変数システムを使用**: `process.env`はブラウザ環境で動作しない
-- 設定レイヤーを通じて環境変数を一元管理
-- TypeScriptによる適切な型安全性の実装
-- デフォルト値設定と必須チェックの適切な実装
-
-```typescript
-// ビルドツールの環境変数（公開値のみ）
-const config = {
-  apiUrl: import.meta.env.API_URL || 'http://localhost:3000',
-  appName: import.meta.env.APP_NAME || 'My App'
-}
-
-// フロントエンドでは動作しない
-const apiUrl = process.env.API_URL // NG
-```
-
-### セキュリティ（クライアントサイド制約）
-- **重要**: すべてのフロントエンドコードは公開され、ブラウザで見える
-- **クライアントサイドに秘密情報を保存しない**: APIキー、トークン、シークレットを環境変数に含めない
-- `.env`ファイルをGitに含めない（バックエンドと同様）
-- 機密情報のログ出力を禁止（パスワード、トークン、個人情報）
-- エラーメッセージに機密情報を含めない
-
-**秘密情報の正しい取り扱い**:
-```typescript
-// セキュリティリスク: APIキーがブラウザで露出
-const apiKey = import.meta.env.VITE_API_KEY
-const response = await fetch(`https://api.example.com/data?key=${apiKey}`)
-
-// 正しい: バックエンドが秘密情報を管理、フロントエンドはプロキシ経由でアクセス
-const response = await fetch('/api/data') // バックエンドがAPIキー認証を処理
-```
-
-## アーキテクチャ設計
-
-### フロントエンドアーキテクチャパターン
-
-**Reactコンポーネントアーキテクチャ**:
-- **Function Components**: 必須、class componentsは非推奨
-- **Custom Hooks**: ロジック再利用と依存性注入のため
-- **コンポーネント階層**: Atoms → Molecules → Organisms → Templates → Pages
-- **Props-driven**: コンポーネントは必要なすべてのデータをPropsで受け取る
-- **Co-location**: テスト、スタイル、関連ファイルをコンポーネントと同じ場所に配置
-
-**状態管理パターン**:
-- **Local State**: コンポーネント固有の状態には`useState`
-- **Context API**: コンポーネントツリー全体で状態を共有（テーマ、認証等）
-- **Custom Hooks**: 状態ロジックと副作用をカプセル化
-- **Server State**: APIデータのキャッシュにはReact QueryまたはSWR
-
-## データフロー統一原則
-
-### クライアントサイドのデータフロー
-Reactアプリケーション全体で一貫したデータフローを維持：
-
-- **Single Source of Truth**: 各状態には1つの権威あるソースがある
-  - UI状態: コンポーネントStateまたはContext
-  - サーバーデータ: React Query/SWRでキャッシュされたAPIレスポンス
-  - フォームデータ: React Hook Formを使ったControlled Components
-
-- **単方向フロー**: データはPropsを通じて上から下へ流れる
-  ```
-  APIレスポンス → State → Props → Render → UI
-  ユーザー入力 → イベントハンドラ → State更新 → 再レンダリング
-  ```
-
-- **Immutable Updates**: State更新には不変パターンを使用
-  ```typescript
-  // 不変なState更新
-  setUsers(prev => [...prev, newUser])
-
-  // 可変なState更新（禁止）
-  users.push(newUser)
-  setUsers(users)
-  ```
-
-### データフローにおける型安全性
-- **Frontend → Backend**: Props/State（型保証済み） → APIリクエスト（シリアライゼーション）
-- **Backend → Frontend**: APIレスポンス（`unknown`） → 型ガード → State（型保証済み）
-
-```typescript
-// 型安全なデータフロー
-async function fetchUser(id: string): Promise<User> {
-  const response = await fetch(`/api/users/${id}`)
-  const data: unknown = await response.json()
-
-  if (!isUser(data)) {
-    throw new Error('Invalid user data')
-  }
-
-  return data // User型として保証
-}
-```
-
-## ビルドとテスト
-package.jsonの`packageManager`フィールドに応じた実行コマンドを使用すること。
-
-### ビルドコマンド
-- `dev` - 開発サーバー
-- `build` - 本番ビルド
-- `preview` - 本番ビルドのプレビュー
-- `type-check` - 型チェック（出力なし）
-
-### テストコマンド
-- `test` - テスト実行
-- `test:coverage` - カバレッジ付きテスト実行
-- `test:coverage:fresh` - カバレッジ付きテスト実行（キャッシュクリア）
-- `test:safe` - 安全なテスト実行（自動クリーンアップ付き）
-- `cleanup:processes` - Vitestプロセスのクリーンアップ
-
-### 品質チェック要件
-実装完了時に品質チェックは必須：
-
-**Phase 1-3: 基本チェック**
-- `check` - Biome（lint + format）
-- `build` - TypeScriptビルド
-
-**Phase 4-5: テストと最終確認**
-- `test` - テスト実行
-- `test:coverage:fresh` - カバレッジ測定
-- `check:all` - 全体統合チェック
-
-### カバレッジ要件
-- **必須**: 単体テストのカバレッジは60%以上
-- **コンポーネント別目標**:
-  - Atoms: 70%以上
-  - Molecules: 65%以上
-  - Organisms: 60%以上
-  - Custom Hooks: 65%以上
-  - Utils: 70%以上
-
-### 非機能要件
-- **ブラウザ互換性**: Chrome/Firefox/Safari/Edge（最新2バージョン）
-- **レンダリング時間**: 主要ページで5秒以内

package/.claude/skills/frontend/typescript-rules/SKILL.md

@@ -1,315 +0,0 @@
----
-name: frontend/typescript-rules
-description: 型安全性、コンポーネント設計、状態管理、エラーハンドリングを含むReact/TypeScriptフロントエンド開発ルール。
----
-
-# TypeScript 開発ルール（フロントエンド）
-
-## 型システム
-
-### 型安全性の原則
-- **strictモード必須**: tsconfig.jsonでstrict: trueを設定
-- **any型使用禁止**: コードベースでany型を使用しない
-- **as使用最小化**: 型キャストはやむを得ない場合のみ（理由をコメント）
-- **unknown優先**: any型が必要な場合はunknown + 型ガード
-
-```typescript
-// 良い: 型ガード付きのunknown
-function processData(data: unknown): User {
-  if (!isUser(data)) throw new Error('Invalid user data')
-  return data
-}
-
-// 悪い: any型の使用
-function processData(data: any): User {
-  return data as User
-}
-```
-
-### 型定義のベストプラクティス
-
-#### オブジェクト型
-- **interface優先**: 拡張可能なオブジェクト型にはinterfaceを使用
-- **typeはunion/intersection用**: 複合型やユーティリティ型に使用
-- **readonlyの活用**: 不変なプロパティにはreadonlyを明示
-
-```typescript
-// 良い: 明確な型定義
-interface User {
-  readonly id: string
-  name: string
-  email: string
-}
-
-type UserWithRole = User & { role: 'admin' | 'user' }
-```
-
-#### 関数型
-- **戻り値型を明示**: 複雑なロジックを持つ関数
-- **ジェネリクスの活用**: 再利用可能な型安全な関数
-
-```typescript
-// 良い: 戻り値型を明示
-function calculateTotal(items: CartItem[]): number {
-  return items.reduce((sum, item) => sum + item.price, 0)
-}
-
-// 良い: ジェネリクスの活用
-function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
-  // implementation
-}
-```
-
-## Reactコンポーネント設計
-
-### Function Components必須
-
-```typescript
-// 良い: Function Component
-const UserCard: React.FC<UserCardProps> = ({ user, onSelect }) => {
-  return (
-    <div onClick={() => onSelect(user.id)}>
-      {user.name}
-    </div>
-  )
-}
-
-// 悪い: Class Component（非推奨）
-class UserCard extends React.Component<UserCardProps> { }
-```
-
-### Props型定義
-
-```typescript
-interface ButtonProps {
-  label: string
-  onClick: () => void
-  variant?: 'primary' | 'secondary'
-  disabled?: boolean
-}
-
-const Button: React.FC<ButtonProps> = ({
-  label,
-  onClick,
-  variant = 'primary',
-  disabled = false
-}) => {
-  // implementation
-}
-```
-
-### Children Props
-
-```typescript
-interface LayoutProps {
-  children: React.ReactNode
-  sidebar?: React.ReactNode
-}
-
-const Layout: React.FC<LayoutProps> = ({ children, sidebar }) => (
-  <div>
-    <main>{children}</main>
-    {sidebar && <aside>{sidebar}</aside>}
-  </div>
-)
-```
-
-## 状態管理
-
-### useState型定義
-
-```typescript
-// 良い: 明示的な型
-const [user, setUser] = useState<User | null>(null)
-const [items, setItems] = useState<Item[]>([])
-
-// 良い: 初期値から推論可能な場合
-const [count, setCount] = useState(0)
-```
-
-### useReducerの型安全性
-
-```typescript
-type Action =
-  | { type: 'SET_USER'; payload: User }
-  | { type: 'CLEAR_USER' }
-  | { type: 'SET_ERROR'; payload: string }
-
-interface State {
-  user: User | null
-  error: string | null
-}
-
-const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case 'SET_USER':
-      return { ...state, user: action.payload, error: null }
-    case 'CLEAR_USER':
-      return { ...state, user: null }
-    case 'SET_ERROR':
-      return { ...state, error: action.payload }
-  }
-}
-```
-
-### Custom Hooks
-
-```typescript
-interface UseUserReturn {
-  user: User | null
-  loading: boolean
-  error: Error | null
-  refetch: () => Promise<void>
-}
-
-function useUser(userId: string): UseUserReturn {
-  const [user, setUser] = useState<User | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  const refetch = useCallback(async () => {
-    setLoading(true)
-    try {
-      const data = await fetchUser(userId)
-      setUser(data)
-    } catch (e) {
-      setError(e instanceof Error ? e : new Error('Unknown error'))
-    } finally {
-      setLoading(false)
-    }
-  }, [userId])
-
-  useEffect(() => { refetch() }, [refetch])
-
-  return { user, loading, error, refetch }
-}
-```
-
-## エラーハンドリング
-
-### Error Boundary
-
-```typescript
-interface ErrorBoundaryProps {
-  children: React.ReactNode
-  fallback: React.ReactNode
-}
-
-interface ErrorBoundaryState {
-  hasError: boolean
-}
-
-class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  state = { hasError: false }
-
-  static getDerivedStateFromError(): ErrorBoundaryState {
-    return { hasError: true }
-  }
-
-  render() {
-    if (this.state.hasError) return this.props.fallback
-    return this.props.children
-  }
-}
-```
-
-### APIエラーハンドリング
-
-```typescript
-interface ApiError {
-  code: string
-  message: string
-  details?: Record<string, string>
-}
-
-function isApiError(error: unknown): error is ApiError {
-  return (
-    typeof error === 'object' &&
-    error !== null &&
-    'code' in error &&
-    'message' in error
-  )
-}
-
-async function fetchWithErrorHandling<T>(url: string): Promise<T> {
-  const response = await fetch(url)
-
-  if (!response.ok) {
-    const error: unknown = await response.json()
-    if (isApiError(error)) {
-      throw new ApiError(error.code, error.message)
-    }
-    throw new Error('Unknown API error')
-  }
-
-  return response.json() as Promise<T>
-}
-```
-
-## イベントハンドリング
-
-### イベント型
-
-```typescript
-const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-  e.preventDefault()
-  // handle click
-}
-
-const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-  const value = e.target.value
-  // handle change
-}
-
-const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-  e.preventDefault()
-  // handle submit
-}
-```
-
-## コーディング規約
-
-### 命名規則
-- **コンポーネント**: PascalCase（例: `UserProfile`）
-- **フック**: camelCase + use接頭辞（例: `useUserData`）
-- **型/インターフェース**: PascalCase（例: `UserProps`）
-- **定数**: SCREAMING_SNAKE_CASE（例: `MAX_RETRY_COUNT`）
-- **ファイル名**: コンポーネントはPascalCase、その他はcamelCase
-
-### インポート順序
-1. React関連
-2. 外部ライブラリ
-3. 内部モジュール（絶対パス）
-4. 内部モジュール（相対パス）
-5. 型のみのインポート
-6. スタイル/アセット
-
-```typescript
-import { useState, useEffect } from 'react'
-import { useQuery } from '@tanstack/react-query'
-import { api } from '@/lib/api'
-import { formatDate } from '../utils'
-import type { User } from '@/types'
-import styles from './Component.module.css'
-```
-
-## アンチパターン
-
-### 避けるべきパターン
-
-```typescript
-// 悪い: Propsのスプレッド展開
-const Button = (props: ButtonProps) => <button {...props} />
-
-// 良い: 明示的なPropsの受け渡し
-const Button = ({ label, onClick, disabled }: ButtonProps) => (
-  <button onClick={onClick} disabled={disabled}>{label}</button>
-)
-
-// 悪い: インラインでの複雑なロジック
-{items.filter(i => i.active).map(i => <Item key={i.id} {...i} />)}
-
-// 良い: 事前に変数として抽出
-const activeItems = items.filter(item => item.active)
-{activeItems.map(item => <Item key={item.id} item={item} />)}
-```