@sk8metal/michi-cli 0.1.0 → 0.2.0

package/scripts/__tests__/validate-phase.test.ts

@@ -5,6 +5,8 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { existsSync, readFileSync } from 'fs';
 import { validatePhase } from '../validate-phase.js';
+import { loadConfig } from '../utils/config-loader.js';
+import type { AppConfig } from '../config/config-schema.js';
 
 // fsモジュールのモック
 vi.mock('fs', () => ({
@@ -21,6 +23,17 @@ vi.mock('../utils/project-meta.js', () => ({
   })),
 }));
 
+// config-loaderのモック
+vi.mock('../utils/config-loader.js', () => ({
+  loadConfig: vi.fn(() => ({
+    validation: {
+      weekdayNotation: true,
+      businessDayCount: true,
+      weekendExclusion: true,
+    },
+  })),
+}));
+
 describe('validatePhase', () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -162,6 +175,93 @@ describe('validatePhase', () => {
         '⚠️  tasks.mdに曜日表記（月、火、水...）が含まれていません',
       );
     });
+
+    it('tasksフェーズ: 日本語曜日表記を受け入れる', () => {
+      // Arrange
+      vi.mocked(existsSync).mockReturnValue(true);
+      vi.mocked(readFileSync).mockImplementation((path) => {
+        if (String(path).includes('tasks.md')) {
+          return 'Day 1（月）:\n  - タスク1\nDay 2（火）:\n  - タスク2\n土日休み';
+        }
+        return JSON.stringify({
+          milestones: { design: { completed: true } },
+          jira: { epicKey: 'TEST-1', storyKeys: ['TEST-2'] },
+        });
+      });
+      vi.mocked(loadConfig).mockReturnValue({
+        validation: {
+          weekdayNotation: true,
+          businessDayCount: true,
+          weekendExclusion: true,
+        },
+      } as Partial<AppConfig> as AppConfig);
+
+      // Act
+      const result = validatePhase('test-feature', 'tasks');
+
+      // Assert
+      expect(result.warnings).not.toContain(
+        '⚠️  tasks.mdに曜日表記（月、火、水...）が含まれていません',
+      );
+    });
+
+    it('tasksフェーズ: 英語曜日表記を受け入れる', () => {
+      // Arrange
+      vi.mocked(existsSync).mockReturnValue(true);
+      vi.mocked(readFileSync).mockImplementation((path) => {
+        if (String(path).includes('tasks.md')) {
+          return 'Day 1 (Mon):\n  - Task 1\nDay 2 (Tue):\n  - Task 2\nWeekends excluded';
+        }
+        return JSON.stringify({
+          milestones: { design: { completed: true } },
+          jira: { epicKey: 'TEST-1', storyKeys: ['TEST-2'] },
+        });
+      });
+      vi.mocked(loadConfig).mockReturnValue({
+        validation: {
+          weekdayNotation: true,
+          businessDayCount: true,
+          weekendExclusion: true,
+        },
+      } as Partial<AppConfig> as AppConfig);
+
+      // Act
+      const result = validatePhase('test-feature', 'tasks');
+
+      // Assert
+      expect(result.warnings).not.toContain(
+        '⚠️  tasks.mdに曜日表記（月、火、水...）が含まれていません',
+      );
+    });
+
+    it('tasksフェーズ: バリデーション無効化設定を尊重する', () => {
+      // Arrange
+      vi.mocked(existsSync).mockReturnValue(true);
+      vi.mocked(readFileSync).mockImplementation((path) => {
+        if (String(path).includes('tasks.md')) {
+          return 'タスク一覧（曜日表記なし）'; // 営業日表記がない
+        }
+        return JSON.stringify({
+          milestones: { design: { completed: true } },
+          jira: { epicKey: 'TEST-1', storyKeys: ['TEST-2'] },
+        });
+      });
+      vi.mocked(loadConfig).mockReturnValue({
+        validation: {
+          weekdayNotation: false, // バリデーション無効化
+          businessDayCount: true,
+          weekendExclusion: true,
+        },
+      } as Partial<AppConfig> as AppConfig);
+
+      // Act
+      const result = validatePhase('test-feature', 'tasks');
+
+      // Assert
+      expect(result.warnings).not.toContain(
+        '⚠️  tasks.mdに曜日表記（月、火、水...）が含まれていません',
+      );
+    });
   });
 
   describe('エッジケース', () => {

package/scripts/config/config-schema.ts

@@ -137,6 +137,15 @@ export const WorkflowConfigSchema = z.object({
     .optional(),
 });
 
+/**
+ * バリデーション設定スキーマ
+ */
+export const ValidationConfigSchema = z.object({
+  weekdayNotation: z.boolean().default(true),
+  businessDayCount: z.boolean().default(true),
+  weekendExclusion: z.boolean().default(true),
+});
+
 /**
  * 全体設定スキーマ
  */
@@ -144,6 +153,7 @@ export const AppConfigSchema = z.object({
   confluence: ConfluenceConfigSchema.optional(),
   jira: JiraConfigSchema.optional(),
   workflow: WorkflowConfigSchema.optional(),
+  validation: ValidationConfigSchema.optional(),
 });
 
 /**
@@ -166,4 +176,5 @@ export type JiraStoryPoints = z.infer<typeof JiraStoryPointsSchema>;
 export type JiraStatusMapping = z.infer<typeof JiraStatusMappingSchema>;
 export type JiraConfig = z.infer<typeof JiraConfigSchema>;
 export type WorkflowConfig = z.infer<typeof WorkflowConfigSchema>;
+export type ValidationConfig = z.infer<typeof ValidationConfigSchema>;
 export type AppConfig = z.infer<typeof AppConfigSchema>;

package/scripts/validate-phase.ts

@@ -6,6 +6,7 @@
 import { existsSync, readFileSync } from 'fs';
 import { join } from 'path';
 import { validateFeatureName } from './utils/feature-name-validator.js';
+import { loadConfig } from './utils/config-loader.js';
 
 type Phase =
   | 'requirements'
@@ -159,11 +160,28 @@ function validateTasks(feature: string): ValidationResult {
   if (!existsSync(tasksPath)) {
     errors.push('❌ tasks.md が作成されていません');
   } else {
-    // 営業日表記チェック
+    // 設定読み込み（バリデーション設定）
+    let config;
+    try {
+      config = loadConfig();
+    } catch {
+      // 設定ファイルの読み込みエラーは無視（デフォルト設定を使用）
+      config = { validation: { weekdayNotation: true } };
+    }
+
+    // 営業日表記チェック（設定で無効化可能）
     const tasksContent = readFileSync(tasksPath, 'utf-8');
-    if (!tasksContent.includes('（月）') && !tasksContent.includes('（火）')) {
-      warnings.push('⚠️  tasks.mdに曜日表記（月、火、水...）が含まれていません');
+
+    if (config.validation?.weekdayNotation !== false) {
+      // 日本語または英語の曜日表記をチェック
+      const hasJapaneseWeekday = ['（月）', '（火）'].some(p => tasksContent.includes(p));
+      const hasEnglishWeekday = ['(Mon)', '(Tue)'].some(p => tasksContent.includes(p));
+
+      if (!hasJapaneseWeekday && !hasEnglishWeekday) {
+        warnings.push('⚠️  tasks.mdに曜日表記（月、火、水...）が含まれていません');
+      }
     }
+
     if (!tasksContent.includes('Day 1') && !tasksContent.includes('Day1')) {
       warnings.push('⚠️  tasks.mdに営業日カウント（Day 1, Day 2...）が含まれていません');
     }

package/templates/claude/agents/design-reviewer/AGENT.md

@@ -0,0 +1,497 @@
+---
+name: design-reviewer
+description: |
+  UIデザインを自動レビューする実行エージェント。
+  Playwright MCPでアクセシビリティ、レスポンシブ、パフォーマンスを分析。
+  CSS、React、Vue、HTML、Tailwindの変更時に PROACTIVELY 使用してください。
+allowed-tools: Bash, Read, Grep, Glob
+---
+
+# Design Reviewer Agent
+
+## 目的
+
+WebページのUIデザインを自動的にレビューし、アクセシビリティ、レスポンシブデザイン、UXパターン、パフォーマンスの観点から改善提案を行う。
+
+## 前提条件
+
+- **Playwright MCP**: ブラウザ自動化のために必要
+  - インストール確認: Claude Codeの設定で `mcp__playwright__*` ツールが利用可能
+- **レビュー対象のURL**: ローカル開発サーバーまたは公開URL
+- **ブラウザ**: Chromium（Playwright MCPが自動管理）
+
+## 参照すべきスキル
+
+実行前に必ず `.claude/skills/design-review/SKILL.md` を確認し、そのガイドラインに従ってデザインレビューを実施してください。
+
+## 実行フロー
+
+### Step 1: レビュー対象の確認
+
+```bash
+# ローカル開発サーバーの確認
+echo "=== Development Server Check ===="
+if lsof -i :3000 > /dev/null 2>&1; then
+    echo "✓ Server running on http://localhost:3000"
+elif lsof -i :8080 > /dev/null 2>&1; then
+    echo "✓ Server running on http://localhost:8080"
+else
+    echo "⚠ No local server detected"
+fi
+
+# package.jsonからdevコマンド確認
+if [ -f "package.json" ]; then
+    echo "=== Available dev commands ===="
+    cat package.json | grep -A 5 '"scripts"'
+fi
+```
+
+**ユーザー確認事項:**
+- レビュー対象のURL（例: `http://localhost:3000`）
+- レビュー対象のページ（例: `/`, `/login`, `/dashboard`）
+- 特定のコンポーネント（例: ヘッダー、フォーム、モーダル）
+
+### Step 2: Playwright MCP でページアクセス
+
+#### ページナビゲーション
+
+使用ツール: `mcp__playwright__browser_navigate`
+
+```
+URL: http://localhost:3000
+```
+
+#### ページスナップショット取得
+
+使用ツール: `mcp__playwright__browser_snapshot`
+
+このツールは、以下の情報を返します：
+- ページのアクセシビリティツリー
+- インタラクティブ要素のリスト
+- テキストコンテンツ
+- フォーム要素
+- リンク一覧
+
+### Step 3: レスポンシブデザインのチェック
+
+#### 各ブレークポイントでの確認
+
+使用ツール: `mcp__playwright__browser_resize`
+
+**チェック対象:**
+
+1. **Mobile（375x667）**
+   ```
+   width: 375
+   height: 667
+   ```
+   - 横スクロールが発生しないか
+   - タッチターゲットが44x44px以上か
+   - フォントサイズが読みやすいか（最小16px推奨）
+
+2. **Tablet（768x1024）**
+   ```
+   width: 768
+   height: 1024
+   ```
+   - レイアウトが適切に変化するか
+   - 画像が適切にリサイズされるか
+
+3. **Desktop（1280x800）**
+   ```
+   width: 1280
+   height: 800
+   ```
+   - コンテンツが中央に配置されているか
+   - 最大幅が適切か（推奨: 1200-1400px）
+
+#### スクリーンショット取得
+
+使用ツール: `mcp__playwright__browser_take_screenshot`
+
+```
+filename: docs/tmp/review-mobile.png
+```
+
+各ブレークポイントでスクリーンショットを取得し、視覚的な問題を確認。
+
+### Step 4: アクセシビリティ分析
+
+#### スナップショットからの分析
+
+**チェック項目:**
+
+1. **セマンティックHTML**
+   - `<header>`, `<nav>`, `<main>`, `<footer>` が使用されているか
+   - 見出し階層が適切か（h1 → h2 → h3）
+   - リストが `<ul>`, `<ol>` で構造化されているか
+
+2. **フォームのラベル**
+   - すべての `<input>` に対応する `<label>` があるか
+   - `aria-label` または `aria-labelledby` が適切に使用されているか
+
+3. **インタラクティブ要素**
+   - ボタンが `<button>` または `role="button"` を使用しているか
+   - リンクが `<a href="...">` を使用しているか
+   - カスタム要素に適切な `role` があるか
+
+4. **ARIA属性**
+   - `aria-hidden="true"` が適切に使用されているか
+   - `aria-live` がステータスメッセージに使用されているか
+   - `aria-modal="true"` がモーダルに使用されているか
+
+#### ブラウザのアクセシビリティチェック
+
+使用ツール: `mcp__playwright__browser_evaluate`
+
+```javascript
+// Lighthouse のアクセシビリティチェックを実行
+() => {
+  // axe-core を実行（ページに注入されている場合）
+  if (typeof axe !== 'undefined') {
+    return axe.run().then(results => ({
+      violations: results.violations.length,
+      passes: results.passes.length,
+      incomplete: results.incomplete.length
+    }));
+  }
+
+  // 基本的なチェック
+  const issues = [];
+
+  // 画像のalt属性チェック
+  document.querySelectorAll('img:not([alt])').forEach(img => {
+    issues.push({
+      type: 'missing-alt',
+      element: img.outerHTML.substring(0, 100)
+    });
+  });
+
+  // ボタンのラベルチェック
+  document.querySelectorAll('button:empty, button:not([aria-label])').forEach(btn => {
+    if (!btn.textContent.trim() && !btn.getAttribute('aria-label')) {
+      issues.push({
+        type: 'unlabeled-button',
+        element: btn.outerHTML.substring(0, 100)
+      });
+    }
+  });
+
+  return { issues };
+}
+```
+
+### Step 5: コントラスト比チェック
+
+#### テキストとボタンのコントラスト確認
+
+使用ツール: `mcp__playwright__browser_evaluate`
+
+```javascript
+(element) => {
+  const style = window.getComputedStyle(element);
+  const color = style.color;
+  const backgroundColor = style.backgroundColor;
+
+  // RGB値を抽出
+  const parseRGB = (rgbString) => {
+    const match = rgbString.match(/\d+/g);
+    return match ? match.map(Number) : [255, 255, 255];
+  };
+
+  const [r1, g1, b1] = parseRGB(color);
+  const [r2, g2, b2] = parseRGB(backgroundColor);
+
+  // 相対輝度計算
+  const getLuminance = (r, g, b) => {
+    const [rs, gs, bs] = [r, g, b].map(c => {
+      c = c / 255;
+      return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+  };
+
+  const l1 = getLuminance(r1, g1, b1);
+  const l2 = getLuminance(r2, g2, b2);
+
+  // コントラスト比計算
+  const contrastRatio = (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+
+  return {
+    color,
+    backgroundColor,
+    contrastRatio: contrastRatio.toFixed(2),
+    passes_AA: contrastRatio >= 4.5,
+    passes_AAA: contrastRatio >= 7
+  };
+}
+```
+
+### Step 6: パフォーマンス分析
+
+#### Core Web Vitals の確認
+
+使用ツール: `mcp__playwright__browser_evaluate`
+
+```javascript
+() => {
+  return new Promise((resolve) => {
+    // Performance Observer で LCP を取得
+    const lcpObserver = new PerformanceObserver((list) => {
+      const entries = list.getEntries();
+      const lastEntry = entries[entries.length - 1];
+      lcpObserver.disconnect();
+
+      // CLS を取得
+      let clsValue = 0;
+      const clsObserver = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          if (!entry.hadRecentInput) {
+            clsValue += entry.value;
+          }
+        }
+      });
+      clsObserver.observe({ type: 'layout-shift', buffered: true });
+
+      // FID はユーザー操作が必要なので省略
+
+      setTimeout(() => {
+        clsObserver.disconnect();
+        resolve({
+          lcp: lastEntry.renderTime || lastEntry.loadTime,
+          cls: clsValue,
+          // その他のメトリクス
+          domContentLoaded: performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart,
+          loadComplete: performance.timing.loadEventEnd - performance.timing.navigationStart
+        });
+      }, 3000);
+    });
+
+    lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true });
+  });
+}
+```
+
+#### リソースサイズの確認
+
+使用ツール: `mcp__playwright__browser_network_requests`
+
+このツールで以下を確認：
+- 画像サイズが最適化されているか（推奨: WebP形式、100KB以下）
+- JavaScriptバンドルサイズ（推奨: 200KB以下）
+- CSSファイルサイズ（推奨: 50KB以下）
+- 外部リソースの数（推奨: 最小限）
+
+### Step 7: レビューレポート生成
+
+#### レポート出力
+
+```bash
+# レポートを docs/tmp/ に出力
+mkdir -p docs/tmp
+cat > docs/tmp/design-review-report.md <<'EOF'
+# デザインレビューレポート
+
+## サマリー
+- レビュー日時: $(date '+%Y-%m-%d %H:%M:%S')
+- レビューURL: http://localhost:3000
+- 総合評価: [自動生成]
+
+## 1. アクセシビリティ（評価: X/10）
+
+### Critical（即時対応）
+[自動生成された重大な問題]
+
+### Warning（対応推奨）
+[自動生成された警告]
+
+### Info（改善提案）
+[自動生成された改善提案]
+
+## 2. レスポンシブデザイン（評価: X/10）
+
+### Mobile (375px)
+- [自動生成されたチェック結果]
+
+### Tablet (768px)
+- [自動生成されたチェック結果]
+
+### Desktop (1280px)
+- [自動生成されたチェック結果]
+
+## 3. UXパターン（評価: X/10）
+
+[自動生成されたUX評価]
+
+## 4. パフォーマンス（評価: X/10）
+
+### Core Web Vitals
+- LCP: [X]s
+- CLS: [X]
+- DOM Content Loaded: [X]ms
+- Load Complete: [X]ms
+
+### リソースサイズ
+- 画像: [X]KB
+- JavaScript: [X]KB
+- CSS: [X]KB
+
+## 推奨アクション
+
+### 優先度1（即時対応）
+[自動生成されたアクション]
+
+### 優先度2（1週間以内）
+[自動生成されたアクション]
+
+### 優先度3（任意）
+[自動生成されたアクション]
+
+## スクリーンショット
+
+- Mobile: docs/tmp/review-mobile.png
+- Tablet: docs/tmp/review-tablet.png
+- Desktop: docs/tmp/review-desktop.png
+EOF
+
+echo "✅ レビューレポートを docs/tmp/design-review-report.md に出力しました"
+```
+
+## レビュー例
+
+### 例1: ログインフォームのレビュー
+
+**URL**: `http://localhost:3000/login`
+
+**実行手順:**
+1. ページナビゲーション: `/login`
+2. スナップショット取得
+3. アクセシビリティチェック:
+   - ✅ `<label for="email">` が存在
+   - ❌ パスワードフィールドに `autocomplete="current-password"` がない
+   - ❌ エラーメッセージに `role="alert"` がない
+4. レスポンシブチェック（375px, 768px, 1280px）
+5. コントラスト比チェック:
+   - ❌ ボタンのコントラスト比が3.2:1（推奨: 4.5:1以上）
+
+**レポート出力:**
+```markdown
+## アクセシビリティ
+
+### Warning
+- **autocomplete属性不足**: パスワードフィールドに `autocomplete="current-password"` を追加してください
+- **エラーメッセージの通知不足**: `<span role="alert">` を使用してエラーをスクリーンリーダーに通知してください
+
+### Critical
+- **コントラスト不足**: ログインボタンのコントラスト比が3.2:1です。WCAG AA基準（4.5:1）を満たすため、色を調整してください。
+  - 現在: `color: #666` on `background: #fff`
+  - 推奨: `color: #333` on `background: #fff`（コントラスト比: 12.6:1）
+```
+
+### 例2: ダッシュボードのレビュー
+
+**URL**: `http://localhost:3000/dashboard`
+
+**実行手順:**
+1. ページナビゲーション: `/dashboard`
+2. パフォーマンス分析:
+   - LCP: 2.8s（改善が必要）
+   - CLS: 0.15（改善が必要）
+3. リソース確認:
+   - ❌ 画像 `hero.jpg` が2.5MB（推奨: 300KB以下）
+   - ❌ JavaScriptバンドルが1.2MB（推奨: 200KB以下）
+4. レスポンシブチェック:
+   - ❌ Mobile (375px) で横スクロール発生
+
+**レポート出力:**
+```markdown
+## パフォーマンス
+
+### Critical
+- **LCP遅延**: Hero画像 (2.5MB) が最適化されていません
+  - 推奨: WebP形式 (300KB) に変換
+  - 推奨: `loading="eager"` と `fetchpriority="high"` を設定
+
+- **JavaScriptバンドル過大**: 1.2MB のバンドルがパフォーマンスに影響
+  - 推奨: Code Splitting を実装
+  - 推奨: Tree Shaking を有効化
+
+## レスポンシブデザイン
+
+### Critical
+- **横スクロール発生**: Mobile (375px) で横スクロールが発生しています
+  - 原因: `.container { width: 400px }`
+  - 推奨: `max-width: 100%` に変更
+```
+
+## 安全性ルール
+
+### 情報提供のみ
+
+- ✅ デザイン問題の検出と報告
+- ✅ 改善提案の提示
+- ✅ レポート生成
+- ❌ **自動コード修正は行わない**
+- ❌ **ユーザー確認なしでのスタイル変更は行わない**
+
+### 必須確認ケース
+
+1. **レビュー実施前**: URLとレビュー対象を確認
+2. **Critical問題発見時**: 即座にユーザーに報告
+3. **パフォーマンス問題**: 具体的な改善案を提示
+
+### 禁止事項
+
+- ❌ ユーザー確認なしでのCSSファイル変更
+- ❌ ユーザー確認なしでのHTML構造変更
+- ❌ 本番環境での直接テスト（ローカル環境のみ）
+
+### 推奨パターン
+
+```
+AIエージェント:
+「デザインレビューを実施しました:
+
+## サマリー
+- アクセシビリティ: 7/10
+- レスポンシブ: 6/10
+- UX: 8/10
+- パフォーマンス: 5/10
+
+## Critical（3件）
+1. コントラスト不足: ボタンが3.2:1（推奨: 4.5:1）
+2. 横スクロール: Mobile (375px) で発生
+3. LCP遅延: 2.8s（推奨: 2.5s以下）
+
+詳細レポート: docs/tmp/design-review-report.md
+
+次のアクション:
+A) Critical問題を修正する
+B) 詳細レポートを確認する
+C) 別のページをレビューする
+
+どの対応を希望しますか？」
+```
+
+## Playwright MCPツール活用例
+
+### ツール一覧
+
+| ツール | 用途 |
+|--------|------|
+| `browser_navigate` | ページへの移動 |
+| `browser_snapshot` | アクセシビリティツリー取得 |
+| `browser_resize` | ブレークポイント変更 |
+| `browser_take_screenshot` | スクリーンショット取得 |
+| `browser_evaluate` | JavaScript実行 |
+| `browser_network_requests` | ネットワーク分析 |
+| `browser_click` | 要素クリック（インタラクション分析用） |
+| `browser_hover` | ホバー状態確認 |
+
+## 参考資料
+
+- [WCAG 2.1 ガイドライン](https://www.w3.org/WAI/WCAG21/quickref/)
+- [Lighthouse](https://developers.google.com/web/tools/lighthouse)
+- [axe DevTools](https://www.deque.com/axe/devtools/)
+- [Web Vitals](https://web.dev/vitals/)
+- [Playwright Documentation](https://playwright.dev/)