@sk8metal/michi-cli 0.0.9 → 0.2.0

package/templates/ci/github-actions/php.yml

@@ -0,0 +1,52 @@
+name: Test
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - 'v*'
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        php-version: ['8.1', '8.2', '8.3']
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup PHP ${{ matrix.php-version }}
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: ${{ matrix.php-version }}
+          coverage: xdebug
+          tools: composer:v2
+
+      - name: Cache Composer packages
+        uses: actions/cache@v3
+        with:
+          path: vendor
+          key: ${{ runner.os }}-php-${{ hashFiles('**/composer.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-php-
+
+      - name: Install dependencies
+        run: composer install --prefer-dist --no-progress
+
+      - name: Run PHPStan
+        run: composer phpstan
+
+      - name: Run tests
+        run: composer test
+
+      - name: Upload coverage
+        uses: codecov/codecov-action@v3
+        if: matrix.php-version == '8.3'
+        with:
+          files: ./coverage.xml
+          fail_ci_if_error: false

package/templates/ci/screwdriver/java.yaml

@@ -0,0 +1,17 @@
+shared:
+  image: openjdk:17
+
+jobs:
+  main:
+    requires: [~pr, ~commit, ~tag]
+    steps:
+      - setup: chmod +x gradlew
+      - checkstyle: ./gradlew checkstyleMain checkstyleTest
+      - test: ./gradlew test
+      - build: ./gradlew build
+      - report: |
+          if [ -d "build/reports" ]; then
+            echo "Test reports generated"
+            # Optional: Archive reports
+            # tar -czf reports.tar.gz build/reports
+          fi

package/templates/ci/screwdriver/nodejs.yaml

@@ -0,0 +1,17 @@
+shared:
+  image: node:20
+
+jobs:
+  main:
+    requires: [~pr, ~commit, ~tag]
+    steps:
+      - install: npm ci
+      - lint: npm run lint
+      - test: npm test
+      - build: npm run build
+      - coverage: |
+          if [ -d "coverage" ]; then
+            echo "Coverage report generated"
+            # Optional: Upload to coverage service
+            # npm run coverage:upload
+          fi

package/templates/ci/screwdriver/php.yaml

@@ -0,0 +1,20 @@
+shared:
+  image: php:8.3
+
+jobs:
+  main:
+    requires: [~pr, ~commit, ~tag]
+    steps:
+      - install-composer: |
+          php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
+          php composer-setup.php
+          php -r "unlink('composer-setup.php');"
+      - install: php composer.phar install --prefer-dist --no-progress
+      - phpstan: php composer.phar phpstan
+      - test: php composer.phar test
+      - coverage: |
+          if [ -f "coverage.xml" ]; then
+            echo "Coverage report generated"
+            # Optional: Upload to coverage service
+            # php composer.phar coverage:upload
+          fi

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/)