Imported from alsterium/drive.log.web.v2 (AGENTS.md). Install upstream with npx skills add alsterium/drive.log.web.v2. Copyright stays with the author.

AGENTS.md

Purpose

このプロジェクトは Task Master (MCP) によるタスク管理と、docs/ 配下のナレッジベースで構造化されている。 すべての作業はTask Masterのタスクにスコープされ、変更はタスクに紐づけて行う。

Task Management

• タスク管理には Task Master MCP (task-master-ai) を使用する。
• タスクファイル: .taskmaster/tasks/tasks.json
• PRD: .taskmaster/docs/prd.txt
• 新規プロジェクト開始時は parse_prd でPRDからタスクを生成する。
• タスクのステータス: pending / in-progress / done / blocked / deferred / cancelled
• next_task で次に着手すべきタスクを確認する。
• set_task_status でステータスを更新する。
• サブタスクへの分解は expand_task を使用する。

Pre-Implementation Reads (scope-based)

• 必ず AGENTS.md を読む。
• docs/tech-guidelines.md を読む。
• タスクスコープに関連する docs/ 配下のドキュメントを読む。
• 変更対象のソースファイルとその直接の依存を読む。

Operating Rules

• Task Master で現在のタスク状態を確認してから実装を開始する。
• 新しい要件が出てきた場合はタスクを追加する（タスクリスト外の作業は行わない）。
• タスクは小さく、テスト可能で、ステータス駆動にする。
• 作業セッションごとにタスクステータスを更新する。
• タスク実装前にWebSearchツールで最新情報をリサーチし、Markdownでまとめてから実装する（docs/research/<task-id>.md）。
• タスクのレビュー完了後にコミット提案を行う（コミット自体は明示指示が必要）。

Implementation Policy

1. Research first: タスクスコープについてWebSearchで調査し、docs/research/<task-id>.md にまとめる。
2. Tests first: タスクスコープのテストを追加・更新する。
3. Implement: 機能実装・バグ修正を行う。
4. Verify: テストを実行し、パスするまで修正する。
5. Document: 実装内容やアーキテクチャ変更を docs/ に反映する。

Knowledge Base Structure

docs/
├── tech-guidelines.md    # 技術ガイドライン・規約
├── architecture.md       # アーキテクチャ概要・データフロー
├── implementation.md     # 実装ログ・タスクサマリー
├── troubleshooting.md    # トラブルシューティングガイド
├── adr/                  # Architecture Decision Records
│   └── 000-template.md   # ADRテンプレート
└── research/             # タスクごとの調査メモ

Architecture Decision Records (ADR)

重要なアーキテクチャ判断は docs/adr/ にADRとして記録する。

• ファイル名: NNN-title.md (例: 001-use-app-router.md)
• テンプレート: docs/adr/000-template.md を参照。

Skills & Workflow Integration

利用可能なスキルと、ワークフローへの組み込みルールを定義する。 タスク委譲時は task(category="...", load_skills=["..."], ...) で適切なスキルをロードすること。

1. git-master — Git操作全般

コミット・リベース・履歴検索の専門スキル。

• コミット作成時: task(category="quick", load_skills=["git-master"], ...)
• リベース・スカッシュ: task(category="quick", load_skills=["git-master"], ...)
• 履歴調査 (blame, bisect, log -S): task(category="quick", load_skills=["git-master"], ...)
• リポジトリのコミットスタイル（言語・形式）を自動検出して準拠する。
• 複数ファイル変更時は自動的に原子コミットに分割する。

2. frontend-design — 高品質フロントエンドデザイン (⚡ プロジェクトスキル)

「AIスロップ」を回避し、プロダクショングレードの独創的なUIを生成する。

• 新規ページ・コンポーネント作成: task(category="visual-engineering", load_skills=["frontend-design", "frontend-ui-ux"], ...)
• UI刷新・リデザイン: task(category="visual-engineering", load_skills=["frontend-design", "frontend-ui-ux"], ...)
• タイポグラフィ・カラー・アニメーション・レイアウトにおいて独創的な選択を実現する。
• 既存の CSS Modules + グローバルスタイル規約に準拠する。

3. frontend-ui-ux — デザイナー視点のUI/UX

モックアップなしでも美しいインターフェースを構築する。

• UI改善: task(category="visual-engineering", load_skills=["frontend-ui-ux", "frontend-design"], ...)
• マイクロインタラクション・アニメーション追加: task(category="visual-engineering", load_skills=["frontend-ui-ux"], ...)
• アクセシビリティ対応: task(category="visual-engineering", load_skills=["frontend-ui-ux"], ...)
• frontend-design とセットでロードするのが最適。
• WAI-ARIA属性の設定（docs/tech-guidelines.md の規約に合致）。

4. agent-browser — CLI型ブラウザ自動化 (⚡ プロジェクトスキル)

Webサイトの操作・フォーム入力・スクレイピング・スクリーンショット。

• 開発サーバーの動作確認: bash で agent-browser コマンドを直接実行。
• E2Eワークフロー検証: task(category="deep", load_skills=["agent-browser"], ...)
• UIの見た目確認: agent-browser screenshot --annotate
• 外部サイトからのデータ取得: task(category="unspecified-low", load_skills=["agent-browser"], ...)
• 実装後のビジュアル検証に使用: pnpm dev → agent-browser open localhost:3000 → screenshot。
• diff機能で変更前後の比較が可能。

5. playwright — Playwright MCP経由のブラウザ自動化

MCP経由でのブラウザ操作・スナップショット・フォーム操作。

• インタラクティブテスト: skill_mcp(mcp_name="playwright", tool_name="browser_navigate", ...)
• アクセシビリティスナップショット取得: skill_mcp(mcp_name="playwright", tool_name="browser_snapshot", ...)
• JS評価・ネットワーク確認: skill_mcp(mcp_name="playwright", tool_name="browser_evaluate", ...)
• agent-browser を優先使用し、精密制御が必要な場合のみ playwright を使用する。

6. dev-browser — ページ状態保持型ブラウザ自動化

複数スクリプト間でページ状態を保持する高度なブラウザ自動化。

• 複数ステップの長い操作フロー: task(category="deep", load_skills=["dev-browser"], ...)
• 認証済みセッションでの操作: Extension mode で使用。
• 大量データのスクレイピング: ネットワークインターセプト活用。
• agent-browser を標準使用し、状態保持が必要な高度なケースで dev-browser を使用する。

スキル組み合わせパターン

ブラウザスキル使い分け