mcpField
W
web-artifacts-builder

web-artifacts-builder

github.com/snykデザイン・UI3.2k88 回インストール2 日前に更新
リポジトリ

web-artifacts-builder について

Web Artifacts Builderは、claude.ai向けのフロントエンドartifactを作るスキルです。共有可能な単一HTMLを作る開発フローに適しており、ReactとTypeScriptのプロジェクトを初期化して、コードやアセットを1つのHTMLにまとめます。

主な機能

  1. 01ReactとTypeScriptのプロジェクト初期化
  2. 02shadcn/uiコンポーネントの事前導入
  3. 03Parcelバンドルの設定
  4. 04自己完結型の単一HTML生成
  5. 05ビジュアルデザイン指針

活用シーン

  1. 01claude.aiの会話で共有するartifactの作成
  2. 02Reactフロントエンドの単一HTMLへのバンドル
  3. 03生成したartifactの任意テスト

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/snyk/agent-scan --skill web-artifacts-builder

インストール後、Claude Code で/web-artifacts-builderを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LICENSE.txt
scripts/
bundle-artifact.sh
init-artifact.sh

詳細

Web Artifacts Builder

高機能なフロントエンドの claude.ai アーティファクトを作成するには、次の手順に従ってください：

  1. scripts/init-artifact.sh を使用してフロントエンドのリポジトリを初期化します
  2. 生成されたコードを編集してアーティファクトを開発します
  3. scripts/bundle-artifact.sh を使用してすべてのコードを単一の HTML ファイルにバンドルします
  4. アーティファクトをユーザーに表示します
  5. （任意）アーティファクトをテストします

スタック：React 18 + TypeScript + Vite + Parcel（バンドル）+ Tailwind CSS + shadcn/ui

デザインとスタイルのガイドライン

非常に重要：「AI スロップ」と呼ばれることの多い仕上がりを避けるため、中央揃えのレイアウト、紫色のグラデーション、均一な角丸、Inter フォントを過剰に使用しないでください。

クイックスタート

ステップ 1：プロジェクトを初期化する

初期化スクリプトを実行して、新しい React プロジェクトを作成します：

bash scripts/init-artifact.sh <project-name>
cd <project-name>

これにより、次の機能を備えた、完全に設定済みのプロジェクトが作成されます：

  • React + TypeScript（Vite 経由）
  • shadcn/ui のテーマシステムを備えた Tailwind CSS 3.4.1
  • パスエイリアス（@/）の設定
  • 40 個以上の shadcn/ui コンポーネントを事前インストール
  • すべての Radix UI 依存関係を同梱
  • バンドル用に Parcel を設定（.parcelrc 経由）
  • Node 18+ との互換性（Vite のバージョンを自動検出して固定）
ステップ 2：アーティファクトを開発する

アーティファクトを作成するには、生成されたファイルを編集します。詳しくは、以下の一般的な開発タスクをご覧ください。

ステップ 3：単一の HTML ファイルにバンドルする

React アプリを単一の HTML アーティファクトにバンドルするには：

bash scripts/bundle-artifact.sh

これにより、JavaScript、CSS、依存関係がすべてインライン化された、自己完結型のアーティファクト bundle.html が作成されます。このファイルは、アーティファクトとして Claude の会話に直接共有できます。

要件：プロジェクトのルートディレクトリに index.html が必要です。

スクリプトの処理内容：

  • バンドルに必要な依存関係（parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline）をインストールします
  • パスエイリアスをサポートする .parcelrc 設定を作成します
  • Parcel でビルドします（ソースマップなし）
  • html-inline を使用して、すべてのアセットを単一の HTML にインライン化します
ステップ 4：アーティファクトをユーザーに共有する

最後に、バンドルした HTML ファイルを会話でユーザーに共有し、アーティファクトとして表示できるようにします。

ステップ 5：アーティファクトをテスト／表示する（任意）

注：これは完全に任意のステップです。必要な場合、またはリクエストされた場合にのみ実行してください。

アーティファクトをテスト／表示するには、利用可能なツール（他の Skills や Playwright、Puppeteer などの組み込みツールを含む）を使用します。一般に、最初からアーティファクトをテストするのは避けてください。完成したアーティファクトをユーザーが確認できるようになるまでの待ち時間が長くなるためです。リクエストされた場合や問題が発生した場合は、アーティファクトを提示した後にテストしてください。

参考資料

コメント

Markdown 対応