フレームワーク
claude-code-showcase
ChrisWiles/claude-code-showcase
概要
このツールの詳細と使い方を解説します。
React コンポーネント・GraphQL・Formik・Jest テスト・体系的デバッグなど開発現場に直結する6スキルと、PR レビュー・チケット管理・ドキュメント同期などの6コマンド・2エージェントを収録。JIRA・GitHub・Linear・Sentry・Slack・Notion・PostgreSQL・Memory の8 MCP サーバーを同梱した実践的なショーケース集。
連携方式スキルフックMCP
使い方
Claude Code がインストール済みであることを前提としています
MCP として使う
MCP とは？ →外部サービスやデータをClaude に接続する拡張機能です
- 1.「GitHub で見る」ボタンからリポジトリを開き、README に書かれたインストール手順に従います。
- 2.MCP サーバーを追加するには、以下のコマンドを実行します。
claude mcp add <サーバー名> <コマンド>具体的なコマンドは各リポジトリの README を確認してください。
- 3.設定後、Claude Code を再起動すると新しいツールとして使えるようになります。
スキルとして使う
スキルとは？ →Claude Code に特定の作業を覚えさせる命令ファイルです。/スキル名 と入力するだけで呼び出せます
- 1.「GitHub で見る」ボタンからリポジトリを開き、使いたいスキルの
SKILL.mdファイルをダウンロードします。 - 2.ダウンロードしたファイルを以下のフォルダに置きます。
.claude/commands/ - 3.Claude Code のチャット欄で
/スキル名と入力すると起動します。
フックとして使う
フックとは？ →「ファイルを保存したとき」「コミットする前」など、決まった操作をきっかけに自動で動くスクリプトです
- 1.「GitHub で見る」ボタンからリポジトリを開き、使いたいフックのスクリプトファイルをダウンロードします。
- 2.以下の設定ファイルの
hooks欄に「どのタイミングで」「何を実行するか」を追記します。~/.claude/settings.json - 3.設定したタイミングが来ると Claude Code が自動でスクリプトを実行します。
スキル一覧
6 件core-componentsコアコンポーネントライブラリとデザインシステムパターン。UI 構築・デザイントークン・コンポーネントライブラリ利用時に活用formik-patternsFormik を使ったフォーム処理とバリデーションパターン。フォーム構築・バリデーション実装・送信処理時に活用graphql-schemaGraphQL クエリ・ミューテーション・コード生成パターン。Apollo Client や型生成を含む GraphQL 操作全般に活用react-ui-patternsローディング状態・エラーハンドリング・データフェッチのモダン React UI パターン。非同期データ管理や UI 状態管理に活用systematic-debugging根本原因分析を重視した4フェーズデバッグ手法。バグ調査・テスト失敗の修正・予期しない動作のトラブルシューティングに活用testing-patternsJest テストパターン・ファクトリ関数・モック戦略・TDD ワークフロー。ユニットテスト作成や TDD の red-green-refactor サイクルに活用