Fluorite MCP

日本語

English

日本語

English

ダークモード

Fluorite MCP スタートガイド ​

Fluorite MCP へようこそ！このガイドでは、Fluorite MCP と Claude Code CLI の組み合わせを迅速にセットアップして使い始めるお手伝いをいたします。Fluorite MCP の詳しい概要については、紹介ページをご覧ください。

📖 目次 ​

クイックスタート (5分) ​

ステップ 1: Fluorite MCP をインストール ​

bash
# npm でグローバルインストール
npm i -g fluorite-mcp

ステップ 2: Claude Code CLI に追加 ​

bash
# Claude Code CLI に接続
claude mcp add fluorite-mcp -- fluorite-mcp

ステップ 3: インストールを確認 ​

bash
# 接続をテスト
claude mcp list
# 一覧に 'fluorite' が表示されるはずです

ステップ 4: 最初のコマンドを試す ​

Claude Code を開いて試してください：

TypeScript でソートとフィルタリング機能を持つモダンな React データテーブルを作成

Claude は自動的に Fluorite MCP の TanStack Table、TypeScript パターン、ベストプラクティスの知識を使用して本番対応のコードを生成します！

最初のコマンド ​

UI コンポーネントの作成 ​

Radix UI と Tailwind CSS を使用してレスポンシブなナビゲーションコンポーネントを作成

動作内容:

  • Claude が spec://radix-ui-themes にアクセス
  • 適切な TypeScript パターンを使用
  • アクセシビリティ機能を含む
  • モダンな CSS プラクティスを適用

API の構築 ​

JWT 認証と Pydantic 検証を含む FastAPI エンドポイントを作成

動作内容:

  • Claude が spec://fastapi-ecosystem を使用
  • セキュリティベストプラクティスを含む
  • 適切なエラーハンドリング
  • 型安全なレスポンスモデル

テストのセットアップ ​

アクセシビリティチェック付きの Playwright テストをセットアップ

動作内容:

  • spec://playwright-axe-accessibility を使用
  • 適切なテスト構造を設定
  • CI/CD 統合を含む
  • アクセシビリティ検証を追加

スパイク開発 ​

ツリーコンポーネント用のドラッグアンドドロップ機能を試したい

動作内容:

  • Claude が関連するスパイクテンプレートを提案
  • 高速プロトタイピング設定を提供
  • 検証戦略を含む
  • 統合ガイダンスを提供

次のステップ ​

📖 詳しく学ぶ ​

次のステップ時間目的
インストールガイド15分詳細なセットアップとトラブルシューティング
コマンドリファレンス30分利用可能なすべての機能を習得
スパイクテンプレートガイド20分高速プロトタイピング技術
API ドキュメント45分完全な技術リファレンス

🛠️ 高度な使用法 ​

トピックガイド説明
カスタム仕様テンプレート作成独自のライブラリ仕様を追加
静的解析ルール開発者ガイドカスタム解析ルールを設定
チームテンプレートテンプレート作成チームテンプレートを作成・共有
プラグイン開発開発者ガイドカスタム統合を構築

🤝 コミュニティとサポート ​

リソース使用時リンク
バグ報告バグ報告、機能リクエストリポジトリメンテナーに連絡
貢献ガイドFluorite MCP の改善に協力したい貢献
トラブルシューティング問題が発生している場合トラブルシューティングガイド

📚 ドキュメントナビゲーション ​

💡 プロのヒント ​

  1. 具体的なライブラリやフレームワークを指定:

    ✅ "react-hook-form と Zod 検証でフォームを作成"
❌ "フォームを作成"

  2. 技術名を使用: Claude はより適切な仕様を選択できます

    ✅ "tRPC と Prisma で Next.js API を構築"
❌ "API を構築"

  3. ベストプラクティスを求める: Fluorite MCP には豊富なベストプラクティス知識が含まれています

    ✅ "NextAuth での Next.js 認証のベストプラクティスは何ですか？"

  4. 静的解析を活用: Claude に既存のコードを分析してもらう

    ✅ "この React コンポーネントの潜在的な問題を分析"

🎯 実用的な例 ​

ログインフォームの作成 ​

認証機能付きのユーザーログインフォームを作成してください。フォーム検証、エラーハンドリング、アクセシビリティ対応を含めてください。

期待される結果:

  • ✅ react-hook-form と zod の仕様に自動アクセス
  • ✅ TypeScript 型定義を含む完全なコンポーネント
  • ✅ アクセシビリティ準拠（ARIA ラベル、キーボードナビゲーション）
  • ✅ セキュリティベストプラクティス（XSS 防止、安全なフォーム処理）
  • ✅ パフォーマンス最適化とテスト例

API エンドポイントの構築 ​

ユーザー認証用の JWT を使用した FastAPI エンドポイントを作成。データベース統合とエラーハンドリングも含めてください。

動作内容:

  • FastAPI エコシステム仕様を使用
  • セキュリティベストプラクティスを統合
  • データベース操作パターンを提供
  • 包括的なエラーハンドリング

レスポンシブダッシュボード ​

データ可視化を含むレスポンシブダッシュボードを構築。チャート、テーブル、リアルタイム更新機能を含めてください。

含まれる内容:

  • Recharts または類似ライブラリの使用
  • レスポンシブレイアウトパターン
  • リアルタイムデータ統合
  • パフォーマンス最適化

🚀 次に何をするか？ ​

Fluorite MCP で開発ワークフローをスーパーチャージする準備が整いました！システムは Claude Code CLI と透過的に動作し、モダンな Web 開発のための豊富なコンテキストとベストプラクティスを提供します。

シンプルなリクエストから始めて、徐々により高度な機能を探索してください。技術や要件について具体的であればあるほど、Fluorite MCP があなたをより良くサポートできます。

推奨学習パス ​

  1. 基本操作を習得 (今日)

    • いくつかのシンプルなコンポーネントを作成
    • 異なるライブラリを試す
    • 自然言語パターンに慣れる

  2. 高度な機能を探索 (今週)

  3. チーム統合 (来週)

    • カスタムテンプレートの作成を学ぶ
    • チームワークフローに統合
    • CI/CD パイプラインとの連携

  4. エキスパートレベル (継続的)

    • プラグイン開発に貢献
    • コミュニティとの知識共有
    • 新しい仕様の提案

Happy coding! 🎉

助けが必要ですか？トラブルシューティングガイド をチェックしてください。

最終更新: 2025年1月

Released under the MIT License.

Copyright © 2024-present Fluorite MCP Contributors