---
name: qa-website
description: "yukamiya.me の品質保証チェックを実行するスキル。コンテンツ整合性（about-content.js と about.md の差分検出）、リンク検証（外部リンク 404 チェック）、UI/UX 検証（レスポンシブ、コンソールエラー）を Playwright MCP で自動実行し、問題があれば GitHub Issue を自動作成する。/qa コマンドで実行。"
---

# yukamiya.me QA スキル

yukamiya.me の品質保証チェックを実行し、問題があれば GitHub Issue を自動作成します。

## 実行トリガー

- `/qa` コマンド
- GitHub Actions (qa-post-deploy.yml)

## チェックカテゴリ

### 1. コンテンツ整合性チェック

**目的**: about-content.js と about.md の内容差分を検出

**チェック項目**:
- 各セクションの件数比較（media, speaking, writing など）
- バイリンガルタイトル（ja/en 両方の存在確認）
- セクションタイトルの冗長性（例: 「掲載/Media」vs「Media」）

**対象ファイル**:
- `src/data/about-content.js` - 現在のデータソース
- `src/content/pages/about.md` - 旧コンテンツ（比較用）

### 2. リンク検証チェック

**目的**: 外部リンクの 404 エラーや到達不能を検出

**チェック対象**:
- `about-content.js` 内の全 URL
- 各ページの外部リンク

**実行方法**:
```
mcp__playwright-mcp__playwright_get を使用してステータスコード確認
```

### 3. UI/UX チェック

**目的**: レスポンシブデザイン、コンソールエラーの検証

**チェック項目**:
- Desktop (1280x720) / Mobile (iPhone 13) のスクリーンショット
- コンソールエラー検出
- ページ読み込み確認

**実行方法**:
```
mcp__playwright-mcp__playwright_navigate({ url: "https://yukamiya.me/about" })
mcp__playwright-mcp__playwright_resize({ device: "iPhone 13" })
mcp__playwright-mcp__playwright_screenshot({ name: "mobile-view" })
mcp__playwright-mcp__playwright_console_logs({ type: "error" })
```

## 実行フロー

1. **コンテンツチェック**
   - `src/data/about-content.js` を読み込み
   - `src/content/pages/about.md` を読み込み
   - セクションごとに件数と内容を比較
   - 差分を検出しレポート生成

2. **リンクチェック**
   - about-content.js から全 URL を抽出
   - 各 URL に対して HTTP GET リクエスト
   - ステータスコード確認（200 以外を報告）

3. **UI/UX チェック**
   - https://yukamiya.me/about に Playwright でアクセス
   - Desktop/Mobile 両方でスクリーンショット取得
   - コンソールエラーを収集

4. **Issue 作成**
   - 問題があれば GitHub Issue を作成
   - 適切なラベル（qa, content, broken-link, ui-ux, automated）を付与

## GitHub Issue 作成

問題発見時は以下のコマンドで Issue を作成:

```bash
gh issue create \
  --title "[QA] {問題の概要}" \
  --body "$(cat <<'EOF'
## 検出日時
{timestamp}

## 概要
{description}

## 詳細
{details}

## 推奨アクション
- [ ] {action items}

---
Generated by QA Skill
EOF
)" \
  --label "qa,automated,{category}"
```

## ラベル定義

| ラベル | 用途 |
|--------|------|
| `qa` | QA スキルで検出 |
| `content` | コンテンツ整合性の問題 |
| `broken-link` | リンク切れ |
| `ui-ux` | UI/UX の問題 |
| `automated` | 自動生成された Issue |

## 既知のチェックポイント

### Media セクションの差分

- `about-content.js`: 6 件
- `about.md`: 11 件
- 欠損: YOUTRUST, デジタルプラクティス論文, WTT 2024, Waffle など

### セクションタイトル

- 日本語「掲載/Media」は冗長（英語は「Media」のみ）

## 参照ファイル

- `references/check-definitions.md` - 詳細なチェック定義
- `references/issue-templates.md` - Issue テンプレート