mcpField
W
web-artifacts-builder

web-artifacts-builder

github.com/sickn33開発48.7k554 回インストール1 日前に更新
リポジトリ

web-artifacts-builder について

web-artifacts-builder は、Claude の会話で使うフロントエンド成果物を作成するスキルです。React/TypeScript プロジェクトの初期化から開発、共有用 HTML ファイルへのバンドルまでを案内します。

主な機能

  1. 01React/TypeScript プロジェクトの初期化
  2. 02Tailwind と shadcn 風コンポーネントの利用
  3. 03リソースを単一 HTML ファイルにバンドル
  4. 04生成物の任意テスト

活用シーン

  1. 01Claude の会話向けフロントエンド成果物の作成
  2. 02React インターフェースの共有用 HTML 化

インストール

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

$npx skills add https://github.com/sickn33/agentic-awesome-skills --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／TypeScript／Vite のスキャフォールドと Parcel、Tailwind 3.x、バンドルされた shadcn スタイルのコンポーネントスナップショット。スナップショットと依存関係のバージョンが混在しているため、ビルドの検証が必要です。

カタログ変更に関する通知：初期化パスとバージョンの処理を修正し、既存の出力を保持し、バンドルされたコンポーネントスナップショットの明示的なチェックを追加しました。Apache-2.0 ライセンスのテキストは保持されています。アーカイブの各メンバーには、このツリー内でファイルごとの上流ライセンス表示や固定されたソースがありません。完全な出自とライセンスの互換性は未解決のため、サードパーティライセンスの監査が完了したと主張しないでください。

インストール済みのスキルディレクトリからスクリプトを解決し、使い捨ての出力先親ディレクトリで初期化を実行してください。インストール／ビルドコマンドはパッケージを取得し、ライフサイクルスクリプトを実行する場合があります。選択したバージョンを確認し、ロックファイルを保持してください。明示的に確認済みの CREATE_VITE_VERSION と、互換性のあるサポート対象 Node／pnpm ツールチェーンを指定してください。認証情報や個人データをクライアントバンドルに埋め込まないでください。自己完結型の HTML であっても、JavaScript を実行し、外部リソースを要求する場合があります。

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

非常に重要：「AIスロップ」と呼ばれることが多い状態を避けるため、中央寄せレイアウトの多用、紫色のグラデーション、均一な角丸、Inter フォントは避けてください。

クイックスタート

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

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

CREATE_VITE_VERSION=<reviewed-version> bash "$SKILL_DIR/scripts/init-artifact.sh" <project-name>
cd <project-name>

これにより、次の設定がすべて済んだプロジェクトが作成されます。

  • ✅ React + TypeScript（Vite 経由）
  • ✅ shadcn/ui テーマシステムを備えた Tailwind CSS 3.4.1
  • ✅ パスエイリアス（@/）の設定
  • ✅ shadcn/ui コンポーネント 40 個以上を事前インストール済み
  • ✅ すべての Radix UI 依存関係を含む
  • ✅ Parcel によるバンドルの設定（.parcelrc 経由）
  • 明示的に選択したスキャフォールドと互換性のある、サポート対象の Node ツールチェーンが必要です。Node 18 との互換性を一律に保証するものではありません
ステップ 2：アーティファクトを開発する

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

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

React アプリを単一の HTML アーティファクトにバンドルするには、次を実行します。

bash "$SKILL_DIR/scripts/bundle-artifact.sh"

これにより、バンドル可能な JavaScript／CSS／アセットをインライン化した bundle.html が作成されます。自己完結型またはオフラインで動作すると説明する前に、動的 URL、フォント、画像、ワーカーチャンク、実行時のリクエストを確認してください。このファイルは、アーティファクトとして Claude の会話内で直接共有できます。

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

スクリプトの処理内容：

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

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

ステップ 5：成果物のテスト／可視化（任意）

生成したプロジェクトの型チェック／ビルドチェックと、代表的なブラウザチェックを実行してから、動作すると説明してください。主な操作、キーボード／フォーカスの挙動、レスポンシブレイアウト、最終的にバンドルされたファイルを確認してください（Vite の開発モードだけでなく）。チェックを実行できない場合は、成果物を共有する際にその制限を伝えてください。公開や外部へのアップロードには、依頼者の承認が必要です。

バンドルされたスナップショットに関する注意事項：カレンダーのスタイルには、Tailwind 3.4.1 では動作しない可能性のある新しい Tailwind 構文が含まれています。リサイズ可能なパネルの API はバージョンに依存します。初期化処理では、Progress の値の転送漏れと Menubar の displayName の誤記を修正しています。フォームヘルパーを使用するには、FormProvider/FormField/FormItem を組み合わせる必要があります。また、ダイアログ／コマンドダイアログには、アクセシブルなタイトルと説明が必要です。これらは初期コンポーネントであり、アクセシビリティが認定されたコンポーネント一式ではありません。

参照

使用する場面

このスキルは、概要に記載されたワークフローまたはアクションを実行する場合に適用できます。

制限事項

  • このスキルは、タスクが上記の説明範囲に明確に該当する場合にのみ使用してください。
  • 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
  • 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中止して確認を求めてください。

コメント

Markdown 対応