コマンドリファレンス
このガイドでは、Claude Code CLI での Fluorite MCP のすべての利用可能なコマンド、機能、使用パターンについて説明します。
📖 目次
自然言語コマンド
Fluorite MCP は自然言語を通じて Claude Code CLI と透過的に動作します。単に構築したいものを記述すれば、Claude が自動的に関連する仕様にアクセスします。
UI コンポーネント開発
基本コンポーネント作成
バリアント付きの shadcn/ui を使用してボタンコンポーネントを作成動作内容:
spec://shadcn__uiにアクセス- 適切な TypeScript 型を含む
- バリアントサポートを追加（default、destructive、outline、secondary、ghost、link）
- アクセシビリティ属性を含む
- Tailwind CSS クラスを使用
高度なコンポーネントパターン
TanStack Table を使用してソート、フィルタリング、ページネーション機能付きのデータテーブルを構築結果:
spec://tanstack-tableを使用- 適切なカラム定義を実装
- サーバーサイドソート/フィルタリングを追加
- TypeScript インターフェースを含む
- レスポンシブデザインパターン
フォームコンポーネント
react-hook-form、Zod 検証、shadcn/ui コンポーネントでフォームを作成機能:
- react-hook-form 統合
- Zod スキーマ検証
- エラーメッセージハンドリング
- アクセシビリティ準拠
- 型安全なフォームデータ
API 開発
REST API 作成
JWT 認証と Pydantic モデルを含む FastAPI エンドポイントを作成含まれる内容:
- JWT トークンハンドリング
- Pydantic リクエスト/レスポンスモデル
- エラーハンドリングミドルウェア
- OpenAPI ドキュメント
- 型ヒントと検証
データベース統合
Prisma と PostgreSQL を使用した Next.js API ルートをセットアップ機能:
- Prisma クライアントセットアップ
- データベース接続ハンドリング
- CRUD 操作
- エラーハンドリング
- 型安全なデータベースクエリ
認証システム
NextAuth.js セットアップ
Google と GitHub プロバイダーを使用して NextAuth.js で認証を実装含まれる内容:
- プロバイダー設定
- セッションハンドリング
- ミドルウェアセットアップ
- 型定義
- セキュリティベストプラクティス
カスタム認証実装
JWT とリフレッシュトークンを使用したカスタム認証システムを構築機能:
- トークン生成/検証
- リフレッシュトークンローテーション
- セキュアクッキーハンドリング
- レート制限
- セッション管理
テストコマンド
エンドツーエンドテスト
アクセシビリティチェックとビジュアル回帰を含む Playwright テストをセットアップ含まれる内容:
- Playwright 設定
- axe を使用したアクセシビリティテスト
- ビジュアル回帰セットアップ
- CI/CD 統合
- 並列テスト実行
ユニットテストセットアップ
コンポーネントテスト用に Vitest と React Testing Library を設定機能:
- Vitest 設定
- テストユーティリティ
- モック実装
- カバレッジレポート
- CI 統合
ライブラリ仕様
自然言語または直接参照を使用して 87 以上のライブラリの詳細仕様にアクセス。
コアライブラリ
| ライブラリ | 自然言語例 | 直接アクセス |
|---|---|---|
| shadcn/ui | "shadcn/ui で UI コンポーネントを作成" | spec://shadcn__ui |
| TanStack Table | "データテーブルを構築" | spec://tanstack-table |
| NextAuth.js | "認証をセットアップ" | spec://nextauth |
| Prisma | "Prisma でデータベースを設定" | spec://prisma |
| Zod | "フォーム検証を追加" | spec://zod |
状態管理
Zustand でグローバル状態管理を実装利用可能なライブラリ:
- Zustand:
spec://zustand- 軽量状態管理 - Jotai:
spec://jotai- アトミック状態管理 - TanStack Query:
spec://tanstack-query- サーバー状態管理 - Redux Toolkit: 高度な状態管理パターン
フォームライブラリ
検証と型安全性を含む複雑なフォームを作成オプション:
- react-hook-form:
spec://react-hook-form- パフォーマンス重視のフォーム - Zod:
spec://zod- スキーマ検証 - Valibot: 代替検証ライブラリ
- Yup: 従来の検証
データ可視化
インタラクティブなチャートとダッシュボードを作成ライブラリ:
- Recharts:
spec://recharts- React チャートライブラリ - D3.js: カスタム可視化
- Chart.js: Canvas ベースのチャート
- Tremor: ダッシュボードコンポーネント
静的解析コマンド
Fluorite MCP には包括的な静的解析機能が含まれています。
フレームワーク固有解析
Next.js 解析
Next.js プロジェクトを一般的な問題とパフォーマンス問題について解析検出内容:
- サーバーコンポーネントでのクライアントフック
- ハイドレーションミスマッチ
- 画像最適化問題
- ルート設定問題
- パフォーマンスアンチパターン
React 解析
この React コンポーネントをベストプラクティスと潜在的バグについてチェックチェック内容:
- フック使用パターン
- コンポーネントライフサイクル問題
- 状態管理問題
- パフォーマンス最適化
- アクセシビリティ懸念
Vue 解析
この Vue.js アプリケーションを Composition API 問題について解析識別内容:
- リアクティビティ問題
- ライフサイクル管理
- コンポーネント通信
- パフォーマンスボトルネック
- TypeScript 統合
エラー予測
このコードの潜在的なランタイムエラーを予測予測に含まれる内容:
- ハイドレーションエラー
- 型ミスマッチ
- 非同期操作の失敗
- メモリリーク
- パフォーマンス劣化
カスタム解析ルール
プロジェクト用のカスタムルールで静的解析を実行設定可能なルール:
- チームコーディング標準
- フレームワーク固有パターン
- セキュリティ要件
- パフォーマンス予算
- アクセシビリティ準拠
スパイク開発コマンド
スパイクテンプレートを使用した高速プロトタイピングと実験。
スパイクの発見
ドラッグアンドドロップ機能を実験する必要があるレスポンス: Claude が関連するスパイクテンプレートと高速プロトタイピングアプローチを提案します。
利用可能なスパイクカテゴリ（v0.20.3で6,200+テンプレート）
| カテゴリ | 数 | テンプレート例 |
|---|---|---|
| Next.js | 300+ | 最小アプリ、API ルート、認証、App Router |
| React | 420+ | コンポーネント、フック、状態管理、テスト |
| Angular | 420+ | コンポーネント、サービス、ルーティング、TypeScript |
| Vue | 280+ | Composition API、Pinia、リアクティブパターン |
| FastAPI | 200+ | REST API、WebSocket、認証、データベース統合 |
| TypeScript/JavaScript | 1,200+ | ユーティリティ、型定義、パターン |
| Python | 600+ | API、バックエンド、データ処理、機械学習 |
| Go | 420+ | サーバー、マイクロサービス、並行処理 |
| Rust | 350+ | システムプログラミング、Web API、性能重視 |
| Kotlin | 280+ | Android、Spring Boot、関数型プログラミング |
| GitHub Actions | 200+ | CI/CD、テストパイプライン、デプロイ |
| Playwright | 150+ | E2E テスト、アクセシビリティ、ビジュアル回帰 |
| Docker/Kubernetes | 120+ | コンテナ化、オーケストレーション、デプロイ |
| データベース | 180+ | Prisma、TypeORM、MongoDB、PostgreSQL |
| 認証/セキュリティ | 160+ | JWT、OAuth、NextAuth.js、セキュリティパターン |
| テスト | 140+ | Jest、Vitest、Cypress、単体・統合テスト |
| AWS/クラウド | 100+ | Lambda、S3、CloudFormation、サーバーレス |
| その他フレームワーク | 1,000+ | Express、Spring、Django、Laravel など |
クイックプロトタイプの作成
Next.js スパイク
サーバーサイドレンダリングをテストする最小 Next.js アプリを作成利用可能なテンプレート:
nextjs-minimal: 基本 SSR セットアップnextjs-api-hello: シンプル API ルートnextjs-auth-nextauth-credentials: 認証テストnextjs-prisma-sqlite-crud: データベース操作
API 開発スパイク
データベース統合を含む FastAPI をテストテンプレート:
fastapi-minimal: 基本 FastAPI セットアップfastapi-sqlmodel-sqlite: データベース統合fastapi-jwt-auth: 認証テストfastapi-websockets: リアルタイム通信
テストスパイク
Playwright アクセシビリティテストを実験オプション:
playwright-minimal: 基本テストセットアップplaywright-axe-accessibility: アクセシビリティテストplaywright-visual-regression: ビジュアルテストplaywright-docker-ci: CI/CD 統合
スパイクワークフローコマンド
1. 発見フェーズ
React 状態管理用にどのスパイクテンプレートが利用可能ですか？2. プレビューフェーズ
nextjs-auth-spike テンプレートに含まれる内容を表示3. 実装フェーズ
認証をテストするために fastapi-jwt-auth スパイクを適用4. 検証フェーズ
このスパイク実装の検証を手伝って直接 MCP ツール
上級ユーザー向けの MCP ツールへの直接アクセス：
仕様管理
仕様の一覧表示
直接呼び出し: list-specs
利用可能なすべてのライブラリ仕様を表示仕様のフィルタリング
React 関連のすべての仕様を一覧表示特定仕様の取得
詳細な Prisma 仕様を表示カタログ操作
カスタム仕様の追加
直接呼び出し: upsert-spec
内部ツール用のカスタムライブラリ仕様を追加カタログ統計
直接呼び出し: catalog-stats
仕様カタログについての統計を表示解析ツール
プロジェクト解析
直接呼び出し: static-analysis
プロジェクトの包括的な静的解析を実行パラメーター:
projectPath: プロジェクトディレクトリframework: ターゲットフレームワーク（nextjs、react、vue）predictErrors: エラー予測を有効化analyzeDependencies: 依存関係を解析
コード検証
直接呼び出し: quick-validate
このコードスニペットを検証パラメーター:
code: 検証するコードlanguage: プログラミング言語framework: フレームワークコンテキスト
診断
サーバーヘルスチェック
直接呼び出し: self-test
Fluorite MCP が正しく動作しているかチェックパフォーマンス指標
直接呼び出し: performance-test
MCP サーバーのパフォーマンス指標を表示サーバー指標
直接呼び出し: server-metrics
サーバーの観測可能性データを表示高度な使用パターン
マルチライブラリ統合
Next.js、Prisma、NextAuth.js、TanStack Query でフルスタックアプリを作成結果: Claude が複数の仕様を調整して統合アプリケーションを作成します。
フレームワーク移行
Create React App から Next.js への移行を手伝ってプロセス:
- 現在の構造を解析
- 移行ポイントを特定
- ステップバイステップアプローチを提案
- 互換性ガイダンスを提供
パフォーマンス最適化
Core Web Vitals のためにこの React アプリを最適化解析:
- バンドルサイズ最適化
- コード分割戦略
- 画像最適化
- キャッシュ推奨事項
セキュリティ強化
セキュリティ脆弱性について認証実装を監査チェック:
- トークンハンドリング
- セッション管理
- 入力検証
- アクセス制御
アクセシビリティ準拠
このコンポーネントを WCAG 2.1 AA 準拠にする改善:
- セマンティックマークアップ
- キーボードナビゲーション
- スクリーンリーダーサポート
- カラーコントラスト
コマンドパターンとヒント
ベストプラクティス
1. 技術スタックを具体的に
✅ "react-hook-form、Zod 検証、shadcn/ui コンポーネントでフォームを作成"
❌ "フォームを作成"2. フレームワークコンテキストに言及
✅ "tRPC と Prisma で Next.js API ルートを構築"
❌ "API を構築"3. 要件を含める
✅ "ソート、フィルタリング、ページネーション、TypeScript でデータテーブルを作成"
❌ "テーブルを作成"4. ベストプラクティスを求める
✅ "NextAuth.js 実装のセキュリティベストプラクティスは何ですか？"
✅ "この React コンポーネントのパフォーマンス最適化を教えて"一般的なコマンドパターン
| パターン | 例 | 使用例 |
|---|---|---|
| 作成 + ライブラリ | "Y を使って X を作成" | 新しいコンポーネント/機能 |
| セットアップ + フレームワーク | "Y と Z で X をセットアップ" | 環境設定 |
| 解析 + コンテキスト | "Y 問題について X を解析" | コードレビュー/デバッグ |
| 最適化 + 指標 | "Y パフォーマンスのために X を最適化" | パフォーマンス改善 |
| 移行 + 方向 | "X から Y に移行" | 技術移行 |
統合コマンド
データベース操作
PostgreSQL で Prisma をセットアップし CRUD 操作を生成API 統合
Zod 検証と Prisma クエリで tRPC プロシージャを作成状態管理
Zustand でグローバル状態を実装し localStorage に永続化スタイリングシステム
shadcn/ui とカスタムデザイントークンで Tailwind CSS を設定エラーハンドリングとトラブルシューティング
一般的な問題
1. 仕様が見つからない
Error: Specification 'unknown-lib' not found解決策: 利用可能なすべての仕様を一覧表示 を使用して正しい名前を見つけてください。
2. 無効なパラメーター
Error: Invalid parameters for static analysis解決策: API ドキュメントでパラメーター要件を確認してください。
3. 解析タイムアウト
Error: Static analysis timed out解決策: より小さなコードセクションまたは特定のファイルの解析を試してください。
デバッグコマンド
なぜ Claude は React 仕様を使用していないのですか？このリクエストで使用されている正確な仕様を表示Fluorite MCP が適切に動作しているかチェック実用的な使用例
認証システムの完全実装
NextAuth.js を使用した完全な認証システムを実装してください。
Google OAuth、GitHub OAuth、メール/パスワード認証を含めてください。
セッション管理、ミドルウェア保護、TypeScript 型も必要です。期待される出力:
- 完全な NextAuth.js 設定
- 複数プロバイダー設定
- セッション管理とミドルウェア
- 保護されたルートとページ
- TypeScript 型定義
E コマースプラットフォーム
Next.js、Prisma、Stripe を使用したシンプルな E コマースプラットフォームを構築。
商品一覧、ショッピングカート、チェックアウト、支払い処理を含めてください。含まれる機能:
- 商品管理システム
- ショッピングカート機能
- Stripe 決済統合
- 注文管理
- 在庫追跡
データダッシュボード
レスポンシブなデータダッシュボードを作成。
リアルタイムチャート、データテーブル、フィルタリング機能を含めてください。
Recharts、TanStack Table、Next.js を使用。ダッシュボード機能:
- インタラクティブチャート
- データフィルタリング
- リアルタイム更新
- レスポンシブレイアウト
- エクスポート機能
v0.20.3 の新機能
拡張されたスパイクテンプレート
- 6,200+ テンプレート: 前バージョンから大幅拡張
- 多言語サポート: TypeScript、JavaScript、Python、Go、Rust、Kotlin対応
- 複数フレームワーク: Angular、Vue、React の包括的カバレッジ
- エンタープライズパターン: 本番環境対応のテンプレート
改良されたリアルタイム検証
- ファイル変更監視:
realtime-validationでの連続的な品質チェック - フレームワーク固有分析: Next.js、React、Vue の高度な解析
- エラー予測: 潜在的問題の事前検出
新しいコマンドパターン
- 智能的発見:
discover-spikesでの自然言語によるテンプレート検索 - 自動スパイク適用:
auto-spikeでのタスクに最適なテンプレート選択 - バッチ処理: 複数ファイルでの効率的な解析と検証
品質向上機能
- 50+ 検証ルール: 静的解析エンジンの大幅拡張
- カスタムルール: プロジェクト固有の品質基準設定
- 継続的学習: 使用パターンからの智能的改善
次のステップ
- スパイクテンプレートガイド - 高速プロトタイピングを学ぶ
- API ドキュメント - 完全な技術リファレンス
- 開発者ガイド - 高度なカスタマイズ
- トラブルシューティング - 一般的な問題と解決策
最終更新: 2025年8月15日 | バージョン 0.20.3