create-ai-project 1.23.2 → 1.23.4

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

@@ -5,132 +5,66 @@ description: Applies React/TypeScript type safety, component design, and state m
 
 # TypeScript Development Rules (Frontend)
 
-## Frontend-Specific Anti-patterns
+Frontend-specific React/TypeScript rules for implementation: thresholds, boundary type safety, component/state design, error handling, and project conventions.
 
-In addition to universal anti-patterns, watch for these Frontend-specific issues:
+## Anti-patterns and Thresholds
+Signals that trigger a design change:
+- Prop drilling through 3+ levels → lift to Context or state management
+- Component over 300 lines → split
+- Props count over 10 → split the component (3-7 is the working range)
+- Optional props over 50% → introduce defaults or Context
+- Props nesting deeper than 2 levels → flatten
+- The same `as` assertion appearing 3+ times → revisit the type design
 
-- **Prop drilling through 3+ levels** - Should use Context API or state management
-- **Massive components (300+ lines)** - Split into smaller components
+## Type Safety at Boundaries
+Prohibit `any`; when a type is unavailable, receive it as `unknown` and narrow with a type guard. Minimize `as` (justify with a comment when unavoidable).
 
-## Type Safety in Frontend Implementation
+Inside the app, React Props/State are type-guaranteed — no `unknown` needed. At every external boundary, receive as `unknown` and narrow with a type guard before use: API responses, `localStorage`/`sessionStorage`, URL parameters, parsed JSON. Controlled-component form input stays type-safe through React synthetic events.
 
-**Type Safety in Data Flow**
-- **Frontend -> Backend**: Props/State (Type Guaranteed) -> API Request (Serialization)
-- **Backend -> Frontend**: API Response (`unknown`) -> Type Guard -> State (Type Guaranteed)
-
-**Frontend-Specific Type Scenarios**:
-- **React Props/State**: TypeScript manages types, unknown unnecessary
-- **External API Responses**: Always receive as `unknown`, validate with type guards
-- **localStorage/sessionStorage**: Treat as `unknown`, validate
-- **URL Parameters**: Treat as `unknown`, validate
-- **Form Input (Controlled Components)**: Type-safe with React synthetic events
-
-**Type Complexity Management (Frontend)**
-- **Props Design**:
-  - Props count: 3-7 props ideal (consider component splitting if exceeds 10)
-  - Optional Props: 50% or less (consider default values or Context if excessive)
-  - Nesting: Up to 2 levels (flatten deeper structures)
-- Type Assertions: Review design if used 3+ times
-- **External API Types**: Relax constraints and define according to reality (convert appropriately internally)
-
-## Coding Conventions
-
-**Component Design Criteria**
-- **Function Components (Mandatory)**: Official React recommendation, optimizable by modern tooling
-- **Classes Prohibited**: Class components completely deprecated (Exception: Error Boundary)
-- **Custom Hooks**: Standard pattern for logic reuse
-
-**Function Design**
-- **0-2 parameters maximum**: Use object for 3+ parameters
-  ```typescript
-  // Object parameter
-  function createUser({ name, email, role }: CreateUserParams) {}
-  ```
-
-**Props Design (Props-driven Approach)**
-- Props are the interface: Define all necessary information as props
-- Avoid implicit dependencies: Do not depend on global state or context without necessity
-- Type-safe: Always define Props type explicitly
-
-**Environment Variables**
-- **Use build tool's environment variable system**: `process.env` does not work in browsers
-- **No secrets on client-side**: All frontend code is public, manage secrets in backend
-
-**Dependency Injection**
-- **Custom Hooks for dependency injection**: Ensure testability and modularity
-
-**Asynchronous Processing**
-- Promise Handling: Always use `async/await`
-- Error Handling: Always handle with `try-catch` or Error Boundary
-- Type Definition: Explicitly define return value types (e.g., `Promise<Result>`)
-
-**Format Rules**
-- Semicolon omission (follow Biome settings)
-- Types in `PascalCase`, variables/functions in `camelCase`
-- Imports use absolute paths (`src/`)
+```typescript
+const raw: unknown = await (await fetch(url)).json()
+if (!isUser(raw)) throw new ValidationError('invalid user')
+const user = raw // narrowed to User
+```
 
-**Clean Code Principles**
-- Delete unused code immediately
-- Delete debug `console.log()`
-- No commented-out code (manage history with version control)
-- Comments explain "why" (not "what")
+## Component and State Design
+- **Function components only.** Class components are allowed solely for Error Boundaries (no hook equivalent exists).
+- **Type Props explicitly** with a named type and destructure: `function UserCard({ user, onSelect }: UserCardProps)`. Avoid `React.FC`; type props directly on the function so the props contract stays explicit.
+- **Props-driven:** pass dependencies as props; reach into global state or Context only when needed.
+- **Custom hooks** are the unit of logic reuse and dependency injection (inject collaborators through the hook for testability).
+- **Function parameters:** 0-2 positional; for 3+ take a single options object.
+- **State shape:** type state explicitly; for multi-field state with discrete transitions, use `useReducer` with a discriminated-union action type rather than many `useState` calls.
 
 ## Error Handling
+- Surface every error: log and handle, or propagate — never swallow.
+- **Fail fast:** on an invalid state, throw rather than returning a silent fallback.
+- Represent expected failures as values with a `Result` type; reserve `throw` for unexpected/unrecoverable cases.
+- Use purpose-specific error classes extending a base `AppError` carrying a `code` (e.g. ValidationError, ApiError, NotFoundError).
+- **Layer responsibilities:** the API layer converts transport errors into domain errors; hooks propagate `AppError` upward; an Error Boundary catches render-time errors and shows fallback UI.
+- Never log secrets (password, token, apiKey, creditCard).
 
-**Absolute Rule**: Error suppression prohibited. All errors must have log output and appropriate handling.
-
-**Fail-Fast Principle**: Fail quickly on errors to prevent continued processing in invalid states
-```typescript
-// Prohibited: Unconditional fallback
-catch (error) {
-  return defaultValue // Hides error
-}
-
-// Required: Explicit failure
-catch (error) {
-  logger.error('Processing failed', error)
-  throw error // Handle with Error Boundary or higher layer
-}
-```
-
-**Result Type Pattern**: Express errors with types for explicit handling
 ```typescript
 type Result<T, E> = { ok: true; value: T } | { ok: false; error: E }
 
-// Example: Express error possibility with types
-function parseUser(data: unknown): Result<User, ValidationError> {
-  if (!isValid(data)) return { ok: false, error: new ValidationError() }
-  return { ok: true, value: data as User }
+class AppError extends Error {
+  constructor(message: string, readonly code: string, readonly statusCode = 500) {
+    super(message); this.name = this.constructor.name
+  }
 }
 ```
 
-**Custom Error Classes**
+Error Boundary — the one place a class component is required:
 ```typescript
-export class AppError extends Error {
-  constructor(message: string, public readonly code: string, public readonly statusCode = 500) {
-    super(message)
-    this.name = this.constructor.name
-  }
+class ErrorBoundary extends React.Component<{ children: React.ReactNode; fallback: React.ReactNode }, { hasError: boolean }> {
+  state = { hasError: false }
+  static getDerivedStateFromError() { return { hasError: true } }
+  render() { return this.state.hasError ? this.props.fallback : this.props.children }
 }
-// Purpose-specific: ValidationError(400), ApiError(502), NotFoundError(404)
 ```
 
-**Layer-Specific Error Handling (React)**
-- Error Boundary: Catch React component errors, display fallback UI
-- Custom Hook: Detect business rule violations, propagate AppError as-is
-- API Layer: Convert fetch errors to domain errors
-
-**Structured Logging and Sensitive Information Protection**
-Never include sensitive information (password, token, apiKey, secret, creditCard) in logs
-
-**Asynchronous Error Handling in React**
-- Error Boundary setup mandatory: Catch rendering errors
-- Use try-catch with all async/await in event handlers
-- Always log and re-throw errors or display error state
-
-## Performance Optimization
-
-- Component Memoization: Use React.memo for expensive components
-- State Optimization: Minimize re-renders with proper state structure
-- Lazy Loading: Use React.lazy and Suspense for code splitting
-- Bundle Size: Monitor with the `build` script and keep under 500KB
+## Project Conventions
+- **Environment variables:** read through the build tool's env system (`process.env` is absent in the browser). Keep all secrets server-side — frontend code ships to the client.
+- **Bundle & performance:** monitor with the `build` script, keep under 500KB; memoize expensive components (`React.memo`); code-split with `React.lazy` + `Suspense`; structure state to minimize re-renders.
+- **Naming:** components/types `PascalCase`; variables/functions `camelCase`; hooks `use`-prefixed; constants `SCREAMING_SNAKE_CASE`.
+- **Imports:** absolute paths from `src/`; order: React → external libs → internal (absolute) → internal (relative) → type-only → styles/assets.
+- **Formatting:** follow Biome (semicolons and style come from project config).

package/.claude/skills-en/frontend-typescript-testing/SKILL.md

@@ -140,8 +140,10 @@ describe('Button', () => {
 
 ## Test Design Patterns
 
+Test user-visible results, not implementation details. Query by accessibility (`getByRole`/`getByLabelText`/`getByText`), not `getByTestId` or `container.querySelector`. Cover empty, error, and loading/async states, not only the happy path; await async UI with `findBy*`.
+
 ```typescript
-// Correct: test user-visible results
+// Test the user-visible result
 it('increments count when clicked', async () => {
   const user = userEvent.setup()
   render(<Counter />)
@@ -149,10 +151,10 @@ it('increments count when clicked', async () => {
   expect(screen.getByText('Count: 1')).toBeInTheDocument()
 })
 
-// Avoid: testing implementation details
-it('calls setState', () => {
-  const setState = vi.spyOn(React, 'useState')
-  render(<Counter />)
-  // ...
+// Error state: override the handler for one test
+it('shows an error message on API failure', async () => {
+  server.use(http.get('/api/users', () => new HttpResponse(null, { status: 500 })))
+  render(<UserList />)
+  expect(await screen.findByText('Something went wrong')).toBeInTheDocument()
 })
 ```

package/.claude/skills-en/integration-e2e-testing/SKILL.md

@@ -45,6 +45,8 @@ The two E2E lanes are budgeted independently — having a fixture-e2e for a jour
 
 ### Required Comment Format
 
+The committed skeleton imports only the test framework (for `describe`/`it`/`it.todo`); the module under test is imported by the implementing task, never by the skeleton — a skeleton that references a not-yet-created module can fail gates that type-check, compile, or load test files before implementation begins.
+
 Each test MUST include the following annotations.
 
 ```typescript

package/.claude/skills-en/subagents-orchestration-guide/SKILL.md

@@ -216,14 +216,9 @@ According to scale determination:
 
 Note: At Small scale the implementation step still runs through task-executor with the standard 4-step cycle (`task-executor → escalation judgment → quality-fixer → commit`). Direct orchestrator edits are not used.
 
-### Implementation Readiness Marker
+### Optional Preflight
 
-For Medium / Large scale, after Batch approval the work plan carries an `Implementation Readiness:` header (work-planner emits `pending`; promotion to `ready` or `escalated` is an external orchestration concern). The marker takes one of three values:
-- `pending` — initial state set by work-planner
-- `ready` — readiness verification has completed with no remaining gaps; safe to start the task execution cycle
-- `escalated` — readiness verification has completed but residual gaps require user judgment before execution
-
-External orchestration owns both the producer that promotes the marker beyond `pending` and the consumer that reads it before invoking task-executor. This guide does not invoke any orchestrator above the agent layer; agents read/write the marker only when explicitly asked.
+For Medium / Large scale, after Batch approval implementation proceeds directly. Verifying the plan is implementable end-to-end (verification-strategy references, fixtures, UI rendering surface, E2E/local lane environment) is an optional preflight the user runs at their discretion via the prepare-implementation recipe, which exits no-op when readiness criteria already pass. This guide does not invoke any orchestrator above the agent layer.
 
 ## Cross-Layer Orchestration
 

package/.claude/skills-en/task-analyzer/references/skills-index.yaml

@@ -192,21 +192,19 @@ skills:
   # Frontend-specific Skills
   frontend-typescript-rules:
     skill: "frontend-typescript-rules"
-    tags: [frontend, react, implementation, type-safety, function-components, props-driven, async, refactoring, coding-style]
-    typical-use: "React component creation, Props type definitions, frontend TypeScript development"
+    tags: [frontend, react, implementation, type-safety, component-design, props-driven, hooks, error-handling, conventions]
+    typical-use: "React component creation, Props/state design, error handling, frontend TypeScript implementation rules"
     size: small
     key-references:
-      - "React Function Components - React Official"
-      - "Props-driven Design - React Best Practices"
-      - "YAGNI Principle - Kent Beck"
-      - "Clean Code - Robert C. Martin"
-      - "TypeScript satisfies Operator - Microsoft"
+      - "React Function Components - React docs"
+      - "Type guards at external boundaries (unknown narrowing)"
+      - "Result type and Error Boundary error handling"
     sections:
-      - "Frontend-Specific Anti-patterns"
-      - "Type Safety in Frontend Implementation"
-      - "Coding Conventions"
+      - "Anti-patterns and Thresholds"
+      - "Type Safety at Boundaries"
+      - "Component and State Design"
       - "Error Handling"
-      - "Performance Optimization"
+      - "Project Conventions"
 
   frontend-typescript-testing:
     skill: "frontend-typescript-testing"

package/.claude/skills-ja/documentation-criteria/references/plan-template.md

@@ -5,8 +5,6 @@
 想定影響範囲: Xファイル
 関連Issue/PR: #XXX（該当する場合）
 レビュースコープ: [Design Docとタスク対象から導出した変更予定ファイルの範囲。既存作業に対する改訂計画の場合はベースブランチ + diff範囲]
-<!-- 下記の行はmedium / large規模のみ — small規模はこのplan-templateではなくtask-templateを使用する。値の行は末尾コメントを付けず、下流のパーサがbare statusの抽出（pending | ready | escalated）を行えるように保つこと。 -->
-Implementation Readiness: pending
 
 ## 関連ドキュメント
 - 設計書:

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

@@ -17,10 +17,10 @@ TypeScriptベースのReactアプリケーション実装。アーキテクチ
 - デフォルト値設定と必須チェックの適切な実装
 
 ```typescript
-// ビルドツールの環境変数（公開値のみ）
+// ビルドツールの環境変数（公開値のみ。クライアント公開変数は VITE_ 接頭辞が必要）
 const config = {
-  apiUrl: import.meta.env.API_URL || 'http://localhost:3000',
-  appName: import.meta.env.APP_NAME || 'My App'
+  apiUrl: import.meta.env.VITE_API_URL || 'http://localhost:3000',
+  appName: import.meta.env.VITE_APP_NAME || 'My App'
 }
 
 // フロントエンドでは動作しない

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

@@ -5,311 +5,66 @@ description: React/TypeScriptの型安全性、コンポーネント設計、状
 
 # TypeScript 開発ルール（フロントエンド）
 
-## 型システム
+実装向けの frontend 固有 React/TypeScript ルール: しきい値、境界での型安全性、コンポーネント/状態の設計、エラーハンドリング、プロジェクト規約。
 
-### 型安全性の原則
-- **strictモード必須**: tsconfig.jsonでstrict: trueを設定
-- **any型使用禁止**: コードベースでany型を使用しない
-- **as使用最小化**: 型キャストはやむを得ない場合のみ（理由をコメント）
-- **unknown優先**: any型が必要な場合はunknown + 型ガード
+## アンチパターンとしきい値
+設計変更を促すシグナル:
+- prop drilling が 3 階層以上 → Context または状態管理へ持ち上げる
+- コンポーネントが 300 行超 → 分割する
+- Props が 10 個超 → コンポーネントを分割（3〜7 個が適正範囲）
+- optional Props が 50% 超 → デフォルト値または Context を導入する
+- Props のネストが 2 階層超 → フラット化する
+- 同一の `as` アサーションが 3 回以上出現 → 型設計を見直す
 
-```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> { }
-```
+## 境界での型安全性
+`any` を禁止する。型が得られない場合は `unknown` で受けて型ガードで絞り込む。`as` は最小化する（やむを得ない場合は理由をコメント）。
 
-### Props型定義
+アプリ内部では React の Props/State は型保証されており `unknown` は不要。外部境界では必ず `unknown` で受け、使用前に型ガードで絞り込む: API レスポンス、`localStorage`/`sessionStorage`、URL パラメータ、パースした JSON。制御コンポーネントのフォーム入力は React 合成イベントを通じて型安全に保たれる。
 
 ```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 }
-  }
-}
+const raw: unknown = await (await fetch(url)).json()
+if (!isUser(raw)) throw new ValidationError('invalid user')
+const user = raw // User に絞り込み済み
 ```
 
-### 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 }
-}
-```
+## コンポーネントと状態の設計
+- **Function component のみ。** class component は Error Boundary に限り許可（hook の代替が存在しないため）。
+- **Props は名前付き型で明示**し分割代入する: `function UserCard({ user, onSelect }: UserCardProps)`。`React.FC` は使わず、props を関数に直接型付けして Props 契約を明示する。
+- **Props 駆動:** 依存は Props で渡す。グローバル状態や Context へは必要なときだけアクセスする。
+- **Custom hook** をロジック再利用と依存注入の単位とする（テスト容易性のため、協調オブジェクトは hook 経由で注入する）。
+- **関数引数:** 位置引数は 0〜2 個。3 個以上は単一の options オブジェクトで受ける。
+- **状態の形:** 状態は明示的に型付けする。複数フィールドかつ離散的な遷移を持つ状態は、複数の `useState` ではなく discriminated union の action 型を用いた `useReducer` にする。
 
 ## エラーハンドリング
-
-### Error Boundary
+- すべてのエラーを表に出す: ログして処理するか伝播する — 握り潰さない。
+- **Fail fast:** 不正な状態では、無言のフォールバックを返さず throw する。
+- 想定内の失敗は `Result` 型で値として表現する。`throw` は想定外/回復不能なケースに限る。
+- 目的別のエラークラスは `code` を持つ基底 `AppError` を継承する（例: ValidationError, ApiError, NotFoundError）。
+- **層の責務:** API 層は transport エラーをドメインエラーへ変換する。hook は `AppError` を上位へ伝播する。Error Boundary はレンダリング時のエラーを捕捉しフォールバック UI を表示する。
+- 機微情報（password, token, apiKey, creditCard）をログに出さない。
 
 ```typescript
-interface ErrorBoundaryProps {
-  children: React.ReactNode
-  fallback: React.ReactNode
-}
-
-interface ErrorBoundaryState {
-  hasError: boolean
-}
+type Result<T, E> = { ok: true; value: T } | { ok: false; error: E }
 
-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
+class AppError extends Error {
+  constructor(message: string, readonly code: string, readonly statusCode = 500) {
+    super(message); this.name = this.constructor.name
   }
 }
 ```
 
-### APIエラーハンドリング
-
+Error Boundary — class component が必要となる唯一の箇所:
 ```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
+class ErrorBoundary extends React.Component<{ children: React.ReactNode; fallback: React.ReactNode }, { hasError: boolean }> {
+  state = { hasError: false }
+  static getDerivedStateFromError() { return { hasError: true } }
+  render() { return this.state.hasError ? this.props.fallback : this.props.children }
 }
 ```
 
-## コーディング規約
-
-### 命名規則
-- **コンポーネント**: 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} />)}
-```
+## プロジェクト規約
+- **環境変数:** ビルドツールの環境変数システム経由で読む（ブラウザに `process.env` は存在しない）。秘密情報はすべてサーバーサイドに置く — フロントエンドのコードはクライアントに配信される。
+- **バンドルとパフォーマンス:** `build` スクリプトで監視し 500KB 未満に保つ。高コストなコンポーネントは `React.memo` でメモ化する。`React.lazy` + `Suspense` でコード分割する。再レンダリングを最小化する状態構造にする。
+- **命名:** コンポーネント/型は `PascalCase`、変数/関数は `camelCase`、hook は `use` 接頭辞、定数は `SCREAMING_SNAKE_CASE`。
+- **インポート:** `src/` からの絶対パス。順序: React → 外部ライブラリ → 内部（絶対）→ 内部（相対）→ 型のみ → スタイル/アセット。
+- **フォーマット:** Biome に従う（セミコロンやスタイルはプロジェクト設定に従う）。