create-ai-project 1.16.2 → 1.17.0

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

@@ -100,7 +100,7 @@ skills:
 
   documentation-criteria:
     skill: "documentation-criteria"
-    tags: [documentation, adr, prd, design-doc, work-plan, decision-matrix]
+    tags: [documentation, adr, prd, ui-spec, design-doc, work-plan, decision-matrix]
     typical-use: "Implementation start scale assessment, document creation decisions, ADR/PRD/Design Doc/work plan creation criteria"
     size: medium
     key-references:
@@ -138,14 +138,16 @@ skills:
 
   integration-e2e-testing:
     skill: "integration-e2e-testing"
-    tags: [testing, integration-test, e2e-test, property-based-testing, fast-check, test-skeleton, test-review, quality]
-    typical-use: "Integration and E2E test skeleton generation, test implementation, test review, Property-Based Test implementation"
+    tags: [testing, integration-test, e2e-test, property-based-testing, fast-check, test-skeleton, test-review, quality, playwright]
+    typical-use: "Integration and E2E test skeleton generation, test implementation, test review, Property-Based Test implementation, E2E test design"
     size: small
     key-references:
       - "fast-check - Property-based testing for TypeScript"
       - "Node.js Testing Best Practices - Yoni Goldberg"
       - "Property-Based Testing - 2025 Practices"
+      - "references/e2e-design.md - E2E test design principles"
     sections:
+      - "References"
       - "Test Types and Limits"
       - "Behavior-First Principle"
       - "Skeleton Specification"
@@ -190,8 +192,8 @@ skills:
       - "References"
 
   # Frontend-specific Skills
-  frontend/typescript-rules:
-    skill: "frontend/typescript-rules"
+  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"
     size: small
@@ -208,10 +210,10 @@ skills:
       - "Error Handling"
       - "Performance Optimization"
 
-  frontend/typescript-testing:
-    skill: "frontend/typescript-testing"
-    tags: [frontend, react, quality, testing, tdd, coverage, vitest, react-testing-library, msw, implementation]
-    typical-use: "React component testing, React Testing Library tests, MSW API mocking, frontend test creation"
+  frontend-typescript-testing:
+    skill: "frontend-typescript-testing"
+    tags: [frontend, react, quality, testing, tdd, coverage, vitest, react-testing-library, msw, implementation, playwright, e2e]
+    typical-use: "React component testing, React Testing Library tests, MSW API mocking, frontend test creation, Playwright E2E testing"
     size: small
     key-references:
       - "React Testing Library - Kent C. Dodds"
@@ -219,15 +221,17 @@ skills:
       - "Test-Driven Development - Kent Beck"
       - "Red-Green-Refactor - Kent Beck"
       - "User-Observable Behavior Testing - Testing Library"
+      - "references/e2e.md - Playwright E2E patterns"
     sections:
+      - "References"
       - "Test Framework"
       - "Basic Testing Policy"
       - "Test Implementation Conventions"
       - "Mock Type Safety Enforcement"
       - "Basic React Testing Library Example"
 
-  frontend/technical-spec:
-    skill: "frontend/technical-spec"
+  frontend-technical-spec:
+    skill: "frontend-technical-spec"
     tags: [frontend, react, vite, architecture, design, environment, data-flow, implementation, performance]
     typical-use: "React technical design, Vite configuration, frontend environment setup, component architecture decisions"
     size: medium

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

@@ -59,10 +59,11 @@ Use the appropriate run command based on the `packageManager` field in package.j
 Quality checks are mandatory upon implementation completion:
 
 **Phase 1-3: Code Quality Checks**
-- `check` - Biome (lint + format)
-- `check:unused` - Detect unused exports
-- `check:deps` - Detect circular dependencies
-- `build` - TypeScript build
+- Auto-detect and execute the following from package.json scripts:
+  - lint + format check
+  - Detect unused exports
+  - Detect circular dependencies
+  - TypeScript build
 
 **Phase 4: Tests**
 - `test` - Test execution

package/.claude/skills-ja/documentation-criteria/SKILL.md

@@ -9,7 +9,8 @@ description: PRD、ADR、Design Doc、作業計画書の作成を支援。テン
 
 | 条件 | 必要ドキュメント | 作成順序 |
 |-----|--------------|---------|
-| 新機能追加 | PRD → [ADR] → Design Doc → 作業計画書 | PRD承認後 |
+| 新機能追加（バックエンド） | PRD → [ADR] → Design Doc → 作業計画書 | PRD承認後 |
+| 新機能追加（フロントエンド/フルスタック） | PRD → **UI Spec** → [ADR] → Design Doc → 作業計画書 | Design Doc前にUI Spec |
 | ADR条件該当（下記参照） | ADR → Design Doc → 作業計画書 | 即座に開始 |
 | 6ファイル以上 | ADR → Design Doc → 作業計画書（必須） | 即座に開始 |
 | 3-5ファイル | Design Doc → 作業計画書（推奨） | 即座に開始 |
@@ -79,6 +80,37 @@ description: PRD、ADR、Design Doc、作業計画書の作成を支援。テン
 - 具体的なコード例（→Design Doc）
 - 担当者の割り当て（→作業計画書）
 
+### UI Spec
+
+**目的**: フロントエンド機能のUI構造、画面遷移、コンポーネント分解、インタラクション設計を定義
+
+**含むもの**:
+- 画面リストと遷移条件
+- 状態×表示マトリクスを含むコンポーネント分解（default/loading/empty/error/partial）
+- PRD受入条件にリンクしたインタラクション定義（EARS形式）
+- プロトタイプ管理（コードベースのプロトタイプは添付扱い、正式な仕様ではない）
+- PRDから画面/コンポーネントへのACトレーサビリティ
+- 既存コンポーネント再利用マップとデザイントークン
+- ビジュアル受入条件(AC)（ゴールデンステート、レイアウト制約）
+- アクセシビリティ要件（キーボード、スクリーンリーダー、コントラスト）
+
+**含まないもの**:
+- 技術実装詳細（→ Design Doc）
+- APIコントラクトとデータレイヤー設計（→ Design Doc）
+- テスト実装（→ Design Docのテスト戦略）
+- 実装スケジュール（→ 作業計画書）
+
+**必須構造要素**:
+- 状態×表示マトリクスとインタラクション表を含むコンポーネントが1つ以上
+- PRD ACを画面/状態にマッピングするACトレーサビリティ表
+- 遷移条件付きの画面リスト
+- 既存コンポーネント再利用マップ（再利用/拡張/新規の判定）
+
+**プロトタイプコードの取り扱い**:
+- ユーザー提供のプロトタイプコードは`docs/ui-spec/assets/{feature-name}/`に配置
+- プロトタイプはUI Specの添付であり、正式な仕様ではない
+- UI Spec + Design Docが正式な仕様
+
 ### Design Document
 
 **目的**: 技術的実装方法を詳細定義
@@ -159,6 +191,8 @@ description: PRD、ADR、Design Doc、作業計画書の作成を支援。テン
 |------------|-----|---------|------------|
 | PRD | `docs/prd/` | `[機能名]-prd.md` | `prd-template.md` |
 | ADR | `docs/adr/` | `ADR-[4桁]-[タイトル].md` | `adr-template.md` |
+| UI Spec | `docs/ui-spec/` | `[機能名]-ui-spec.md` | `ui-spec-template.md` |
+| UI Specアセット | `docs/ui-spec/assets/{feature-name}/` | プロトタイプコードファイル | - |
 | Design Doc | `docs/design/` | `[機能名]-design.md` | `design-template.md` |
 | 作業計画書 | `docs/plans/` | `YYYYMMDD-{type}-{description}.md` | `plan-template.md` |
 | タスクファイル | `docs/plans/tasks/` | `{plan-name}-task-{number}.md` | `task-template.md` |
@@ -181,6 +215,7 @@ description: PRD、ADR、Design Doc、作業計画書の作成を支援。テン
 |------------|---------|-----|
 | PRD | ユーザージャーニー図、スコープ境界図 | ユーザー体験と範囲の明確化 |
 | ADR | 選択肢比較図（必要時） | トレードオフの視覚化 |
+| UI Spec | 画面遷移図、コンポーネントツリー図 | 画面フローとコンポーネント構造の明確化 |
 | Design Doc | アーキテクチャ図、データフロー図 | 技術構造の理解 |
 | 作業計画書 | フェーズ構成図、タスク依存関係図 | 実装順序の明確化 |
 
@@ -198,3 +233,4 @@ description: PRD、ADR、Design Doc、作業計画書の作成を支援。テン
 - [作業計画書テンプレート](references/plan-template.md)
 - [ADRテンプレート](references/adr-template.md)
 - [タスクファイルテンプレート](references/task-template.md)
+- [UI Specテンプレート](references/ui-spec-template.md)

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

@@ -4,6 +4,10 @@
 
 [この機能の目的と概要を2-3文で説明]
 
+### 参照UI Spec（フロントエンド機能を含む場合）
+- UI Specパス: [docs/ui-spec/xxx-ui-spec.md]
+- コンポーネント構造と状態設計はUI Specから継承
+
 ## 設計サマリー（メタ）
 
 ```yaml
@@ -196,6 +200,26 @@ unknowns:
 - [常に成立しなければならない条件]
 - [有効な状態遷移の制約]
 
+### UIエラー状態設計（フロントエンド機能を含む場合）
+
+| コンポーネント/画面 | Loading | Empty | Error | Partial |
+|-------------------|---------|-------|-------|---------|
+| [コンポーネント名] | [スケルトン/スピナー] | [Empty状態 + CTA] | [エラーメッセージ + リトライ] | [キャッシュ表示 + バナー] |
+
+### クライアント状態設計（フロントエンド機能を含む場合）
+
+| 状態カテゴリ | 状態 | 管理方法 | 同期戦略 |
+|------------|------|---------|---------|
+| サーバー状態 | [取得データ] | [キャッシュライブラリ/カスタムフック] | [ポーリング/WebSocket/手動更新] |
+| UIローカル状態 | [モーダル開閉、タブ選択] | [useState/useReducer] | - |
+| 一時状態 | [フォーム入力、下書き] | [useState/フォームライブラリ] | [自動保存/手動保存] |
+
+### UIアクション - APIコントラクトマッピング（フロントエンド機能を含む場合）
+
+| UIアクション | APIエンドポイント | リクエスト | レスポンス | エラーコントラクト |
+|------------|----------------|-----------|----------|-----------------|
+| [ボタンクリック/フォーム送信] | [POST /api/xxx] | [リクエストボディフィールド] | [レスポンスフィールド] | [エラーコードとUI処理] |
+
 ### エラーハンドリング
 
 [エラーの種類とその処理方法]

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

@@ -60,6 +60,12 @@
 ### スケーラビリティ
 - [将来のスケーリングに関する考慮事項]
 
+### アクセシビリティ（UI機能を含む場合）
+- 準拠基準: [デフォルト: WCAG 2.1 AA（組織基準があればそれを使用）]
+- 対象支援技術: [スクリーンリーダー、キーボード操作、音声制御等]
+- プラットフォーム要件: [例: アプリストア審査要件]
+- 既知の制約: [例: 外部ライブラリの制限]
+
 ## 成功基準
 
 ### 定量的指標
@@ -71,6 +77,10 @@
 1. [ユーザー体験の指標1]
 2. [ユーザー体験の指標2]
 
+### UI品質指標（UI機能を含む場合）
+1. [主要操作完了率 / エラー回復率 / リトライ成功率]
+2. [アクセシビリティ監査目標スコア]
+
 ## 技術的考慮事項
 
 ### 依存関係

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

@@ -0,0 +1,145 @@
+# [機能名] UI仕様書
+
+## 概要
+
+[このUI仕様書の目的とスコープを2-3文で説明]
+
+### 対象PRD
+- PRDパス: [docs/prd/xxx-prd.md | "N/A — requirement-analyzerの出力に基づく"]
+- 機能スコープ: [このUI SpecがカバーするPRD要件 | 分析済み要件の概要]
+
+### 設計ソース
+| ソース | パス | バージョン |
+|--------|------|-----------|
+| プロトタイプコード | [docs/ui-spec/assets/xxx/] | [コミットSHA / タグ] |
+
+## プロトタイプ管理
+
+プロトタイプコードはこのUI Specの**添付資料**です。正式な仕様は常にこのドキュメント + Design Docです。
+
+- **添付パス**: [docs/ui-spec/assets/{feature-name}/]
+- **バージョン識別**: [コミットSHA / タグ]
+- **準拠前提**: [例: デザインシステム準拠、コンポーネントライブラリ使用]
+- **正式な仕様との関係**: プロトタイプとこの仕様の差異がある場合、このドキュメントを優先。プロトタイプは視覚的・動作的な参考資料としてのみ機能。
+
+## ACトレーサビリティ（プロトタイプ）
+
+PRDの受入条件をプロトタイプの参照先にマッピング。プロトタイプが提供されていない場合はこのセクションを省略。
+
+| AC ID | AC概要 | 画面 / 状態 | プロトタイプ参照先（要素ID / パス） | 採用判定 |
+|-------|--------|------------|----------------------------------|---------|
+| AC-01 | [EARS AC概要] | [画面名 / 状態名] | [要素またはファイルの参照先] | 採用 / 不採用 / 保留 |
+
+## 画面リストと遷移
+
+### 画面リスト
+
+| 画面ID | 画面名 | 説明 | 入場条件 |
+|--------|-------|------|---------|
+| S-01 | [画面名] | [目的] | [ユーザーがこの画面に到達する方法] |
+
+### 遷移条件
+
+| 遷移元 | 遷移先 | トリガー | ガード条件 |
+|--------|-------|---------|-----------|
+| S-01 | S-02 | [ユーザーアクション] | [前提条件（ある場合）] |
+
+## コンポーネント分解
+
+### コンポーネントツリー
+
+```
+[ページ/画面]
+  +-- [コンテナコンポーネント]
+  |   +-- [プレゼンテーショナルコンポーネントA]
+  |   +-- [プレゼンテーショナルコンポーネントB]
+  +-- [コンテナコンポーネント]
+      +-- [プレゼンテーショナルコンポーネントC]
+```
+
+### コンポーネント: [ComponentName]
+
+#### 状態×表示マトリクス
+
+| 状態 | デフォルト | ローディング | Empty | エラー | 部分表示 |
+|------|----------|------------|-------|-------|---------|
+| 表示 | [通常表示] | [スケルトン / スピナー] | [Empty状態 + CTA] | [エラーメッセージ + 回復アクション] | [キャッシュ / 部分表示] |
+
+#### インタラクション定義
+
+| AC ID | EARS条件 | ユーザーアクション | システムレスポンス | 状態遷移 | エラーハンドリング |
+|-------|---------|-----------------|------------------|---------|-----------------|
+| AC-01 | When [トリガー] | [クリック / 入力 / 等] | [期待される動作] | [遷移元状態 → 遷移先状態] | [リトライ / リセット / フォールバック] |
+
+### コンポーネント: [ComponentName2]
+
+[各コンポーネントについて状態×表示マトリクスとインタラクション定義を繰り返す]
+
+## デザイントークンとコンポーネントマップ
+
+### 環境制約
+- 対象ブラウザ: [例: Chrome 120+, Safari 17+]
+- レスポンシブBreakpoint: [例: 768px, 1024px, 1280px]
+- テーマ対応: [例: ライト/ダーク、システム設定に追従]
+
+### 既存コンポーネント再利用マップ
+
+| UI要素 | 判定 | 既存コンポーネント | 備考 |
+|--------|------|------------------|------|
+| [ボタン] | 再利用 | [components/ui/Button] | [修正不要] |
+| [データテーブル] | 拡張 | [components/ui/Table] | [ソート機能を追加] |
+| [機能カード] | 新規 | - | [類似コンポーネントなし] |
+
+### デザイントークン
+
+| トークン | 値 | 用途 |
+|---------|-----|------|
+| [color-primary] | [値] | [プライマリアクション] |
+| [spacing-md] | [値] | [コンポーネント間隔] |
+
+## ビジュアル受入条件
+
+### ゴールデンステート
+受入基準となる主要なビジュアル状態を定義:
+
+1. **[状態名]**: [視覚的に確認すべき内容の説明]
+2. **[状態名]**: [説明]
+
+### レイアウト制約
+- [最小/最大の幅・高さ制約]
+- [コンポーネント間のスペーシングルール]
+- [オーバーフロー時の挙動]
+
+## アクセシビリティ要件
+
+### キーボードナビゲーション
+
+| コンポーネント | タブ順序 | キーバインド | 挙動 |
+|-------------|---------|------------|------|
+| [コンポーネント] | [順序番号] | [Enter / Space / Arrow] | [期待される動作] |
+
+### スクリーンリーダー
+
+| コンポーネント | ロール | アクセシブル名 | ライブリージョン |
+|-------------|--------|-------------|---------------|
+| [コンポーネント] | [ARIAロール] | [aria-label / aria-labelledby] | [polite / assertive / none] |
+
+### コントラスト要件
+
+| 要素 | 前景色 | 背景色 | 目標比率 |
+|------|-------|-------|---------|
+| [テキスト要素] | [色] | [色] | [通常テキスト4.5:1 / 大テキスト3:1] |
+
+## 未確定事項
+
+| ID | 説明 | 担当者 | 期限 |
+|----|------|-------|------|
+| TBD-01 | [未解決の質問や決定事項] | [解決担当者] | [目標日] |
+
+*すべてのTBDには担当者と期限が必要。Design Doc作成前に解決すること。*
+
+## 更新履歴
+
+| 日付 | バージョン | 変更内容 | 作成者 |
+|------|-----------|---------|-------|
+| YYYY-MM-DD | 1.0 | 初版作成 | [名前] |

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

@@ -1,5 +1,5 @@
 ---
-name: frontend/technical-spec
+name: frontend-technical-spec
 description: フロントエンドの環境変数、コンポーネント設計、データフローを定義。React環境設定時に使用。
 ---
 
@@ -109,10 +109,10 @@ async function fetchUser(id: string): Promise<User> {
 package.jsonの`packageManager`フィールドに応じた実行コマンドを使用すること。
 
 ### ビルドコマンド
-- `dev` - 開発サーバー
-- `build` - 本番ビルド
-- `preview` - 本番ビルドのプレビュー
-- `type-check` - 型チェック（出力なし）
+- package.jsonから以下に該当するスクリプトを自動検出して実行:
+  - 開発サーバー
+  - 本番ビルド
+  - 型チェック（出力なし）
 
 ### テストコマンド
 - `test` - テスト実行

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

@@ -1,5 +1,5 @@
 ---
-name: frontend/typescript-rules
+name: frontend-typescript-rules
 description: React/TypeScriptの型安全性、コンポーネント設計、状態管理ルールを適用。Reactコンポーネント実装時に使用。
 ---
 

package/.claude/skills-ja/{frontend/typescript-testing → frontend-typescript-testing}/SKILL.md

@@ -1,6 +1,6 @@
 ---
-name: frontend/typescript-testing
-description: React Testing LibraryとMSWでテストを設計。コンポーネントテストパターンを適用。
+name: frontend-typescript-testing
+description: React Testing Library、MSW、Playwright E2Eでテストを設計。コンポーネントテストとE2Eテストパターンを適用。
 ---
 
 # TypeScript テストルール（フロントエンド）

package/.claude/skills-ja/frontend-typescript-testing/references/e2e.md

@@ -0,0 +1,185 @@
+# PlaywrightによるE2Eテスト実装
+
+## テストフレームワーク
+- **Playwright Test**: `@playwright/test`
+- テストインポート: `import { test, expect } from '@playwright/test'`
+
+## テスト構成
+
+### ディレクトリ構成
+```
+tests/
+└── e2e/
+    ├── pages/              # ページオブジェクト
+    │   ├── login.page.ts
+    │   └── dashboard.page.ts
+    ├── fixtures/           # テストFixture
+    │   └── auth.fixture.ts
+    └── *.e2e.test.ts       # テストファイル
+```
+
+### 命名規則
+- テストファイル: `{FeatureName}.e2e.test.ts`
+- ページオブジェクト: `{PageName}.page.ts`
+- Fixture: `{Purpose}.fixture.ts`
+
+## ページオブジェクトパターン
+
+再利用性と保守性のためにページ操作をカプセル化:
+
+```typescript
+import { type Page, type Locator } from '@playwright/test'
+
+export class LoginPage {
+  readonly emailInput: Locator
+  readonly passwordInput: Locator
+  readonly submitButton: Locator
+
+  constructor(private page: Page) {
+    this.emailInput = page.getByLabel('Email')
+    this.passwordInput = page.getByLabel('Password')
+    this.submitButton = page.getByRole('button', { name: 'Sign in' })
+  }
+
+  async login(email: string, password: string) {
+    await this.emailInput.fill(email)
+    await this.passwordInput.fill(password)
+    await this.submitButton.click()
+  }
+}
+```
+
+## テストパターン
+
+### 基本テスト
+```typescript
+import { test, expect } from '@playwright/test'
+
+test('ログイン後にダッシュボードに遷移できる', async ({ page }) => {
+  // Arrange
+  await page.goto('/login')
+
+  // Act
+  await page.getByLabel('Email').fill('user@example.com')
+  await page.getByLabel('Password').fill('password')
+  await page.getByRole('button', { name: 'Sign in' }).click()
+
+  // Assert
+  await expect(page).toHaveURL('/dashboard')
+  await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible()
+})
+```
+
+### ページオブジェクト使用
+```typescript
+import { test, expect } from '@playwright/test'
+import { LoginPage } from './pages/login.page'
+import { DashboardPage } from './pages/dashboard.page'
+
+test('購入フローを完了できる', async ({ page }) => {
+  const loginPage = new LoginPage(page)
+  const dashboardPage = new DashboardPage(page)
+
+  await page.goto('/login')
+  await loginPage.login('user@example.com', 'password')
+  await expect(dashboardPage.heading).toBeVisible()
+})
+```
+
+### 認証Fixture
+```typescript
+import { test as base } from '@playwright/test'
+
+export const test = base.extend<{ authenticatedPage: Page }>({
+  authenticatedPage: async ({ page }, use) => {
+    await page.goto('/login')
+    await page.getByLabel('Email').fill('user@example.com')
+    await page.getByLabel('Password').fill('password')
+    await page.getByRole('button', { name: 'Sign in' }).click()
+    await page.waitForURL('/dashboard')
+    await use(page)
+  },
+})
+```
+
+## Locator戦略
+
+アクセシブルなLocatorを以下の優先順位で使用:
+1. `page.getByRole()` — アクセシビリティに最適
+2. `page.getByLabel()` — フォーム要素
+3. `page.getByText()` — 表示テキスト
+4. `page.getByTestId()` — 最終手段
+
+```typescript
+// 推奨
+await page.getByRole('button', { name: 'Submit' }).click()
+
+// 非推奨
+await page.locator('#submit-btn').click()
+await page.locator('.btn-primary').click()
+```
+
+## Assertion
+
+```typescript
+// 表示確認
+await expect(page.getByText('Success')).toBeVisible()
+await expect(page.getByText('Error')).not.toBeVisible()
+
+// ナビゲーション
+await expect(page).toHaveURL('/dashboard')
+await expect(page).toHaveTitle('Dashboard')
+
+// 要素状態
+await expect(page.getByRole('button')).toBeEnabled()
+await expect(page.getByRole('button')).toBeDisabled()
+
+// コンテンツ
+await expect(page.getByRole('heading')).toHaveText('Welcome')
+```
+
+## Viewportテスト
+
+UI Specでレスポンシブ動作が定義されている場合:
+
+```typescript
+test.describe('レスポンシブナビゲーション', () => {
+  test('モバイルでハンバーガーメニューを表示', async ({ page }) => {
+    await page.setViewportSize({ width: 375, height: 667 })
+    await page.goto('/')
+    await expect(page.getByRole('button', { name: 'Menu' })).toBeVisible()
+    await expect(page.getByRole('navigation')).not.toBeVisible()
+  })
+
+  test('デスクトップでフルナビゲーションを表示', async ({ page }) => {
+    await page.setViewportSize({ width: 1280, height: 720 })
+    await page.goto('/')
+    await expect(page.getByRole('navigation')).toBeVisible()
+  })
+})
+```
+
+## テスト分離
+
+- 各テストはクリーンなブラウザコンテキストから開始
+- テスト間で状態を共有しない
+- 共通セットアップ（認証、ナビゲーション）には`beforeEach`を使用
+- セットアップステップではテスト内ナビゲーションより`page.goto()`を優先
+
+## スケルトンコメント形式
+
+E2Eテストスケルトンは統合テストと同じアノテーション形式に従う:
+
+```typescript
+// AC: [元の受入条件テキスト]
+// Behavior: [ユーザーアクション] → [システムレスポンス] → [観測可能な結果]
+// @category: e2e
+// @dependency: full-system
+// @complexity: high
+// ROI: [スコア]
+test('AC1: [説明]', async ({ page }) => {
+  // Arrange: [セットアップの説明]
+  // Act: [操作の説明]
+  // Assert: [検証の説明]
+})
+```

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

@@ -5,6 +5,10 @@ description: 統合テストとE2Eテストを設計。モック境界と振る
 
 # 統合テスト・E2Eテスト設計・実装ルール
 
+## References
+
+- **[references/e2e-design.md](references/e2e-design.md)** — E2Eテスト設計原則（候補ソース、選定基準、UI Specからのマッピング）
+
 ## テスト種別と上限
 
 | 種別 | 目的 | ファイル形式 | 上限 |