prime-frontend について
prime-frontendは、フルスタックリポジトリで作業する開発者やコーディングエージェント向けのコードベース把握スキルです。フロントエンドの構成や規約、最近の変更に絞って分析し、タスクに沿った概要をまとめます。
主な機能
- 01任意の Jira と Confluence の情報を先に取得
- 02追跡対象ファイルからフロントエンドのルートを特定
- 03フロントエンドのドキュメントと主要ファイルを確認
- 04最近の履歴と作業ツリーの変更を確認
- 05構成、規約、現在の状態を要約
活用シーン
- 01フロントエンド実装前のエージェントによる把握
- 02Jira や Confluence の情報を使った作業範囲の確認
- 03大規模リポジトリのフロントエンド規約の特定
MCP 対応
Jira または Confluence の参照が指定された場合、Atlassian MCP ツールで内容を取得し、タスクのコンテキストとして使います。
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/prime-frontendを入力して読み込まれたか確認します。
詳細
Prime Frontend：フロントエンドのコンテキストを読み込む
目的
コードベースの構造、コンポーネント、規約を分析し、フロントエンドについて的を絞った理解を構築します。フロントエンドのコンテキストだけを読み込むことで、複雑なフルスタックのコードベースでもコンテキストウィンドウを軽く保てます。外部タスクへの参照がある場合は、分析の前提を実際の作業に合わせるため、先に読み込みます。
手順
ステップ 0：外部コンテキストを読み込む
コードベースの分析を始める前に、このステップを実行してください。 任意の引数を受け取ります：[jira-issue-keys] [confluence-page-ids]。
- Jira キーには、単一のキー（
ACC-2）またはカンマ区切りの複数キー（ACC-2,ACC-3）を指定できます。 - Confluence のページ ID は数値です。
Jira の課題キーが指定されている場合：
mcp__atlassian__getAccessibleAtlassianResourcesを呼び出してcloudIdを取得します。- Jira キーごとに、
cloudId、課題キー、responseContentFormat: "markdown"を指定してmcp__atlassian__getJiraIssueを呼び出します。 - 返された課題の要約、説明、受け入れ条件を、この後の作業すべてにおけるタスクのコンテキストとして扱います。
Confluence のページ ID が指定されている場合：
- ページ ID ごとに、
contentFormat: "markdown"を指定してmcp__atlassian__getConfluencePageを呼び出します（cloudIdを上記から使用します。まだ取得していない場合は、mcp__atlassian__getAccessibleAtlassianResourcesを呼び出して取得します）。 - 返されたページの内容を、仕様、設計文書、要件などの補足コンテキストとして扱います。
引数が指定されていない場合： このステップを完全に省略し、ステップ 1 に進みます。
読み込んだ外部コンテキストを簡潔にまとめてから続行してください。これにより、以降の下準備の前提が明確になります。
1. フロントエンドを特定する
追跡対象のファイルをすべて一覧表示し、フロントエンドのルートを特定します。
!git ls-files
よくあるフロントエンドのルート：frontend/、client/、web/、（プロジェクトがフロントエンドのみの場合は）src/、app/（Next.js）。先に適切なルートを特定してください。
2. フロントエンドのドキュメントを読む
- CLAUDE.md または同様の全体ルールファイルを読みます（プロジェクト全体の規約を確認します）。
- フロントエンドのルート内にある README を読みます。
.claude/references/frontend-component-best-practices.mdが存在する場合は読みます。プロジェクト固有のコンポーネント規約が記載されています。
3. 主要なフロントエンドファイルを特定する
構成に基づいて、以下を読みます。
- メインエントリーポイント（
main.tsx、index.tsx、app/layout.tsx、pages/_app.tsxなど） - ルーティング設定（
router.tsx、routes.ts、Next.js の場合はapp/ディレクトリ） - グローバル状態の設定（ストア、コンテキストプロバイダー）
- 共有コンポーネントライブラリのルート（
components/、ui/） - 主要な設定ファイル（
package.json、tsconfig.json、vite.config.ts、next.config.ts） - 確立されたパターンを理解するため、代表的な機能コンポーネントを 1〜2 個
フロントエンドが依存する共有型またはコントラクトを定義している場合を除き、フロントエンドのルート外にあるファイルは省略します。
4. 現在のフロントエンドの状態を把握する
最近のフロントエンド関連の動きを確認します。
!git log -10 --oneline
!git status
フロントエンドディレクトリに未コミットの変更があれば記録します。
出力レポート
以下を含む簡潔な要約を作成します。
外部タスクのコンテキスト（読み込んだ場合）
- Jira の課題：キー、タイトル、1 行の目標、受け入れ条件
- Confluence のページ：タイトルと、そこで指定されている内容
フロントエンドの概要
- フレームワークと主要なライブラリ（React、Vue、Next.js、Tailwind など）
- 確認したコンポーネントのパターン（アトミックデザイン、機能別フォルダーなど）
- 状態管理の方法
ディレクトリマップ
- フロントエンドのルートと、主要なサブディレクトリごとの簡潔な説明
規約
- 命名規則、ファイルの同じ場所への配置に関するルール
- スタイリングの方法
- 確認したテストフレームワークと規約
現在の状態
- アクティブなブランチ、最近のフロントエンドの変更
- 直ちに対応すべき懸念事項（型の不足、非推奨パターンなど）
この要約は、箇条書きと明確な見出しを使い、ざっと見て把握しやすいものにしてください。