最新のウェブフロントエンド技術（React、Tailwind CSS、shadcn/ui）を使用して、複雑で多機能なclaudeアーティファクト（HTMLやUIコンポーネント）を作成するための一連のツールです。 **次のような場合に使用:** 状態管理（データの変更を追跡・管理する機能）、ルーティング（ページ遷移）、またはshadcn/uiコンポーネント（UI部品のライブラリ）が必要な複雑なアーティファクト向けです。シンプルな単一ファイルのHTML/JSXアーティファクトには適していません。
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
claude.ai で強力なフロントエンド Artifact を構築するには、以下の手順に従ってください:
scripts/init-artifact.sh を使用してフロントエンドリポジトリを初期化するscripts/bundle-artifact.sh を使用してすべてのコードを単一の HTML ファイルにバンドルするスタック: React 18 + TypeScript + Vite + Parcel（バンドル）+ Tailwind CSS + shadcn/ui
非常に重要: いわゆる「AI スロップ」と呼ばれる見た目を避けるため、過度なセンタリングレイアウト、紫のグラデーション、均一な角丸、Inter フォントの使用は控えてください。
初期化スクリプトを実行して、新しい React プロジェクトを作成します:
bash scripts/init-artifact.sh <project-name>
cd <project-name>
このスクリプトにより、以下が完全に設定されたプロジェクトが作成されます:
@/）の設定済みArtifact を構築するには、生成されたファイルを編集します。 具体的な手順については、後述の 「よくある開発タスク」 を参照してください。
React アプリを単一の HTML Artifact にバンドルするには:
bash scripts/bundle-artifact.sh
このスクリプトにより bundle.html が生成されます。
これはすべての JavaScript・CSS・依存関係をインライン化した自己完結型の Artifact であり、Claude の会話内に Artifact として直接共有できます。
前提条件: プロジェクトのルートディレクトリに index.html が存在する必要があります。
スクリプトの処理内容:
.parcelrc 設定を作成最後に、バンドルした HTML ファイルを会話内でユーザーに共有し、Artifact として表示できるようにします。
注意: このステップは完全に任意です。必要な場合、またはリクエストされた場合にのみ実行してください。
次のような場合に使用: Artifact のテスト・確認が必要なとき。利用可能なツール（他の Skill や Playwright・Puppeteer などの組み込みツール）を使用してください。 ただし、リクエストから完成した Artifact が表示されるまでのレイテンシが増加するため、事前のテストは原則として避けてください。Artifact を提示した後、リクエストがあった場合や問題が発生した場合にテストを行ってください。
To build powerful frontend claude.ai artifacts, follow these steps:
scripts/init-artifact.shscripts/bundle-artifact.shStack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.
Run the initialization script to create a new React project:
bash scripts/init-artifact.sh <project-name>
cd <project-name>
This creates a fully configured project with:
@/) configuredTo build the artifact, edit the generated files. See Common Development Tasks below for guidance.
To bundle the React app into a single HTML artifact:
bash scripts/bundle-artifact.sh
This creates bundle.html - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.
Requirements: Your project must have an index.html in the root directory.
What the script does:
.parcelrc config with path alias supportFinally, share the bundled HTML file in conversation with the user so they can view it as an artifact.
Note: This is a completely optional step. Only perform if necessary or requested.
To test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.
原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。