Web アーティファクト ビルダー
shadcn コンポーネントと自動化スクリプトを使用して、React および Tailwind アーティファクトを単一の HTML 出力にバンドルするエージェント スキル。
出典: anthropics/skills (MIT) を基にしたコンテンツ。
強力なフロントエンド claude.ai アーティファクトを構築するには、次の手順に従います。
scripts/init-artifact.shを使用してフロントエンド リポジトリを初期化します。- 生成されたコードを編集してアーティファクトを開発します
scripts/bundle-artifact.shを使用して、すべてのコードを単一の HTML ファイルにバンドルします。- ユーザーにアーティファクトを表示する
- (オプション) アーティファクトをテストする
スタック: 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 経由)
- Tailwind CSS 3.4.1 と shadcn/ui テーマ システム
- パス エイリアス (
@/) が設定されました - 40 以上の shadcn/ui コンポーネントがプリインストールされています
- すべての Radix UI 依存関係が含まれる
- バンドル用に構成されたパーセル (.parcelrc 経由)
- Node 18+ との互換性 (Vite バージョンを自動検出してピン留め)
ステップ 2: アーティファクトを開発する
アーティファクトをビルドするには、生成されたファイルを編集します。ガイダンスについては、以下の 一般的な開発タスク を参照してください。
ステップ 3: 単一の HTML ファイルにバンドルする
React アプリを単一の HTML アーティファクトにバンドルするには:
bash scripts/bundle-artifact.shこれにより、すべての JavaScript、CSS、および依存関係がインライン化された自己完結型アーティファクトであるbundle.htmlが作成されます。このファイルは、クロードの会話でアーティファクトとして直接共有できます。
要件: プロジェクトのルート ディレクトリにindex.htmlが必要です。
スクリプトの動作:
- バンドルの依存関係 (parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline) をインストールします。
- パス エイリアスをサポートする
.parcelrc構成を作成します - Parcel を使用してビルドします (ソース マップなし)
- html-inline を使用して、すべてのアセットを単一の HTML にインライン化します。
ステップ 4: アーティファクトをユーザーと共有する
最後に、バンドルされた HTML ファイルを会話の中でユーザーと共有し、ユーザーがそれを成果物として表示できるようにします。
ステップ 5: アーティファクトのテスト/視覚化 (オプション)
注: これは完全にオプションのステップです。必要な場合または要求された場合にのみ実行してください。
アーティファクトをテスト/視覚化するには、利用可能なツール (他のスキルや、Playwright や Puppeteer などの組み込みツールを含む) を使用します。一般に、事前にアーティファクトをテストすることは避けてください。リクエストと完成したアーティファクトが表示されるまでの間に待ち時間が増えるからです。要求された場合、または問題が発生した場合は、成果物を提示した後、後でテストします。
参考資料
- shadcn/ui コンポーネント: https://ui.shadcn.com/docs/components
リソースファイル
ライセンス.txt
バイナリリソース
スクリプト/バンドル-アーティファクト.sh
スクリプトをダウンロード/bundle-artifact.sh
#!/bin/bash
set -e
echo "📦 Bundling React app to single HTML artifact..."
# Check if we're in a project directory
if [ ! -f "package.json" ]; then
echo "❌ Error: No package.json found. Run this script from your project root."
exit 1
fi
# Check if index.html exists
if [ ! -f "index.html" ]; then
echo "❌ Error: No index.html found in project root."
echo " This script requires an index.html entry point."
exit 1
fi
# Install bundling dependencies
echo "📦 Installing bundling dependencies..."
pnpm add -D parcel @parcel/config-default parcel-resolver-tspaths html-inline
# Create Parcel config with tspaths resolver
if [ ! -f ".parcelrc" ]; then
echo "🔧 Creating Parcel configuration with path alias support..."
cat > .parcelrc << 'EOF'
{
"extends": "@parcel/config-default",
"resolvers": ["parcel-resolver-tspaths", "..."]
}
EOF
fi
# Clean previous build
echo "🧹 Cleaning previous build..."
rm -rf dist bundle.html
# Build with Parcel
echo "🔨 Building with Parcel..."
pnpm exec parcel build index.html --dist-dir dist --no-source-maps
# Inline everything into single HTML
echo "🎯 Inlining all assets into single HTML file..."
pnpm exec html-inline dist/index.html > bundle.html
# Get file size
FILE_SIZE=$(du -h bundle.html | cut -f1)
echo ""
echo "✅ Bundle complete!"
echo "📄 Output: bundle.html ($FILE_SIZE)"
echo ""
echo "You can now use this single HTML file as an artifact in Claude conversations."
echo "To test locally: open bundle.html in your browser"スクリプト/init-artifact.sh
バイナリリソース
scripts/shadcn-components.tar.gz
スクリプトをダウンロード/shadcn-components.tar.gz
バイナリリソース
クロードスキルのドキュメント