mcpField
A
artifacts-builder

artifacts-builder

github.com/ovachiever開発5643 回インストール48 週間前に更新
リポジトリ

artifacts-builder について

claude.ai向けのフロントエンドArtifactを作る開発者向けスキルです。Reactプロジェクトの初期化から、成果物を単一のHTMLファイルにまとめる手順までを案内します。

主な機能

  1. 01ReactとTypeScriptのプロジェクト初期化
  2. 02Tailwind CSSとshadcn/uiコンポーネント
  3. 03単一HTMLファイルへのバンドル
  4. 04デザインとスタイルの指針

活用シーン

  1. 01claude.ai Artifactの制作開始
  2. 02Reactベースのフロントエンド構築
  3. 03自己完結型HTML Artifactの共有

インストール

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

$npx skills add https://github.com/ovachiever/droid-tings --skill artifacts-builder

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

同梱ファイル

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

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

詳細

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 slop」と呼ばれることが多い状態を避けるため、過度に中央寄せしたレイアウト、紫色のグラデーション、均一な角丸、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 対応