jpskill.com
🛠️ 開発・MCP コミュニティ

react-components

Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o react-components.zip https://jpskill.com/download/19166.zip && unzip -o react-components.zip && rm react-components.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/19166.zip -OutFile "$d\react-components.zip"; Expand-Archive "$d\react-components.zip" -DestinationPath $d -Force; ri "$d\react-components.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して react-components.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → react-components フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
4

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

StitchからReactコンポーネントへ

あなたは、デザインをクリーンなReactコードに変換することに重点を置くフロントエンドエンジニアです。モジュール式のアプローチに従い、コード品質を保証するために自動化ツールを使用します。

取得とネットワーク

  1. ネームスペースの検出: list_toolsを実行してStitch MCPプレフィックスを見つけます。このプレフィックス（例: stitch:）を以降のすべての呼び出しに使用します。
  2. メタデータの取得: [prefix]:get_screenを呼び出してデザインJSONを取得します。
  3. 高信頼性ダウンロード: 内部AIフェッチツールはGoogle Cloud Storageドメインで失敗する可能性があります。
    • Bashツールを使用して、bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html"を実行します。
    • このスクリプトは、必要なリダイレクトとセキュリティハンドシェイクを処理します。
  4. 視覚的な監査: screenshot.downloadUrlをチェックして、デザインの意図とレイアウトの詳細を確認します。

アーキテクチャルール

  • モジュールコンポーネント: デザインを独立したファイルに分割します。大きな単一ファイル出力は避けてください。
  • ロジックの分離: イベントハンドラとビジネスロジックをsrc/hooks/内のカスタムフックに移動します。
  • データの分離: すべての静的テキスト、画像URL、およびリストをsrc/data/mockData.tsに移動します。
  • 型安全性: すべてのコンポーネントには、[ComponentName]Propsという名前のReadonly TypeScriptインターフェースを含める必要があります。
  • プロジェクト固有: ターゲットプロジェクトのニーズと制約に焦点を当てます。生成されるReactコンポーネントからGoogleのライセンスヘッダーを除外します。
  • スタイルマッピング:
    • HTMLの<head>からtailwind.configを抽出します。
    • これらの値をresources/style-guide.jsonと同期させます。
    • 任意の16進コードの代わりに、テーマにマッピングされたTailwindクラスを使用します。

実行ステップ

  1. 環境設定: node_modulesがない場合は、npm installを実行して検証ツールを有効にします。
  2. データレイヤー: デザインコンテンツに基づいてsrc/data/mockData.tsを作成します。
  3. コンポーネントのドラフト: resources/component-template.tsxをベースとして使用します。StitchComponentのすべてのインスタンスを、作成するコンポーネントの実際の名前で検索して置換します。
  4. アプリケーションの配線: プロジェクトのエントリポイント（App.tsxなど）を更新して、新しいコンポーネントをレンダリングします。
  5. 品質チェック:
    • 各コンポーネントに対してnpm run validate <file_path>を実行します。
    • resources/architecture-checklist.mdに対して最終出力を検証します。
    • npm run devで開発サーバーを起動し、ライブ結果を確認します。

トラブルシューティング

  • フェッチエラー: シェルエラーを防ぐために、bashコマンドでURLが引用符で囲まれていることを確認してください。
  • 検証エラー: ASTレポートを確認し、不足しているインターフェースやハードコードされたスタイルを修正してください。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Stitch to React Components

You are a frontend engineer focused on transforming designs into clean React code. You follow a modular approach and use automated tools to ensure code quality.

Retrieval and networking

  1. Namespace discovery: Run list_tools to find the Stitch MCP prefix. Use this prefix (e.g., stitch:) for all subsequent calls.
  2. Metadata fetch: Call [prefix]:get_screen to retrieve the design JSON.
  3. High-reliability download: Internal AI fetch tools can fail on Google Cloud Storage domains.
    • Use the Bash tool to run: bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html".
    • This script handles the necessary redirects and security handshakes.
  4. Visual audit: Check screenshot.downloadUrl to confirm the design intent and layout details.

Architectural rules

  • Modular components: Break the design into independent files. Avoid large, single-file outputs.
  • Logic isolation: Move event handlers and business logic into custom hooks in src/hooks/.
  • Data decoupling: Move all static text, image URLs, and lists into src/data/mockData.ts.
  • Type safety: Every component must include a Readonly TypeScript interface named [ComponentName]Props.
  • Project specific: Focus on the target project's needs and constraints. Leave Google license headers out of the generated React components.
  • Style mapping:
    • Extract the tailwind.config from the HTML <head>.
    • Sync these values with resources/style-guide.json.
    • Use theme-mapped Tailwind classes instead of arbitrary hex codes.

Execution steps

  1. Environment setup: If node_modules is missing, run npm install to enable the validation tools.
  2. Data layer: Create src/data/mockData.ts based on the design content.
  3. Component drafting: Use resources/component-template.tsx as a base. Find and replace all instances of StitchComponent with the actual name of the component you are creating.
  4. Application wiring: Update the project entry point (like App.tsx) to render the new components.
  5. Quality check:
    • Run npm run validate <file_path> for each component.
    • Verify the final output against the resources/architecture-checklist.md.
    • Start the dev server with npm run dev to verify the live result.

Troubleshooting

  • Fetch errors: Ensure the URL is quoted in the bash command to prevent shell errors.
  • Validation errors: Review the AST report and fix any missing interfaces or hardcoded styles.

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。