開発tax-assistantメモ
背景
tax-assistantプロジェクトでは、Claude Codeのスラッシュコマンド（.claude/commands/*.md）で業務フローを定義している。これらのコマンド一覧をWebブラウザで確認・閲覧できるビューアページを実装した。
アーキテクチャ
- フロントエンド（Nuxt/Vue）からスラッシュコマンドのMarkdownファイルを直接読むことはできない
- バックエンド（FastAPI）に
.claude/commands/*.mdを読み取るAPIを作成 - フロントエンドはAPIを呼んでコマンド一覧とMarkdown内容を取得・表示
- 既存の
/plansページと同じアーキテクチャを踏襲
実装内容
バックエンドAPI
- FastAPIエンドポイント: コマンドファイルの一覧取得、個別取得
- frontmatterのパース（description, phase情報）
- フェーズ順でソート
frontmatter拡張
全13件のコマンドファイルにphaseフィールドを追加した。
Phase分類:
| Phase | 件数 | 内容 |
|---|---|---|
setup-client | 3件 | クライアント系セットアップ |
setup-master | 2件 | マスター系セットアップ |
data-entry | 2件 | データ取込 |
verification | 2件 | 確認・修正 |
journal | 0件 | 仕訳処理 |
output | 2件 | 出力確認 |
review | 2件 | レビュー |
フロントエンド（commands.vue）
- 3カラムレイアウト: Phase別にカードを配置
- カードクリックで右側に詳細パネル（CommandDetailPanel.vue）を表示
- Markdownレンダリング
- 共通ヘッダー（new-defaultレイアウト）を使用
- 左カラムをsetup-client/setup-masterの上下分割に対応
レイアウトの工夫
- 最初は独自ヘッダーで実装したが、共通ヘッダー（definePageMeta layout: 'new-default'）に変更した
- ナビゲーションタブにコマンド一覧を追加（useTabCategories.ts）
- コンテンツ部分は3カラム+詳細パネルを維持
技術ポイント
- plansページの実装パターンを踏襲
- フェーズバッジ表示（Phase 2-1: データ取込 等）
- DevToolsで動作確認（2059x1136pxの全幅表示を確認）