web-artifacts-builder
shadcn/ui コンポーネントを使用した React アーティファクトの構築
こちらからも入手できます: davila7,Azeem-2,anthropics
Claude の会話で複数のコンポーネントからなる React アーティファクトを作成するには、複雑なバンドルと設定が必要です。このスキルは、React 18、TypeScript、Tailwind CSS、40 以上の shadcn/ui コンポーネントを含むプロジェクトセットアップを自動化し、すべてを単一の HTML ファイルにバンドルします。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「web-artifacts-builder」を使用しています。 "task-board" という名前のカンバンボードレイアウトのプロジェクトを初期化する
期待される結果:
プロジェクト 'task-board' が React 18、TypeScript、Vite、Tailwind CSS 3.4.1、40 以上の shadcn/ui コンポーネントとともに正常に作成されました。パスエイリアス (@/) が設定されています。開発サーバーを起動するには 'cd task-board && pnpm dev' を実行してください。
「web-artifacts-builder」を使用しています。 現在の React プロジェクトを単一の HTML アーティファクトにバンドルする
期待される結果:
バンドル完了！出力：bundle.html (487 KB)。すべての JavaScript、CSS、アセットをインライン化。ブラウザで bundle.html を開いてプレビューするか、Claude の会話で直接共有してください。
セキュリティ監査
低リスクStatic analysis flagged 39 patterns across 3 files (451 lines). All findings evaluated as false positives: shell commands are legitimate build tooling with hardcoded arguments, filesystem operations modify only project-local configuration files, network references are documentation URLs only, and weak crypto detections are false matches on CSS color values. The skill is a frontend scaffolding tool with no malicious patterns detected.
低リスクの問題 (2)
リスク要因
⚡ スクリプトを含む (1)
📁 ファイルシステムへのアクセス (1)
品質スコア
作れるもの
インタラクティブなダッシュボードコンポーネント
テーブル、カード、チャート、フィルターなどの複数の shadcn/ui コンポーネントを使用した複雑なデータ可視化ダッシュボードを構築し、Claude の会話で直接使用できます。
マルチステップフォームアプリケーション
ユーザーオンボーディング体験のために、バリデーション、状態管理、ダイアログ、タブ、アコーディオンなどの UI コンポーネントを備えた高度なフォームフローを作成します。
デザインシステムショーケース
デザインドキュメントのために、shadcn/ui のテーマ設定、ダークモードサポート、レスポンシブレイアウトを紹介する包括的なコンポーネントライブラリを生成します。
これらのプロンプトを試す
すべての shadcn/ui コンポーネントが設定された "dashboard-demo" という名前の新しい Web アーティファクトプロジェクトを初期化してください。
名前、メールアドレス、ステータスを表示するデータテーブルを備えた顧客管理ダッシュボードを作成してください。select コンポーネントと input コンポーネントを使用してフィルターコントロールを追加します。ドロップダウンメニューを介してページネーションと行アクションを含めます。
form、input、select、button コンポーネントを使用して 3 ステップの登録フォームを構築してください。react-hook-form を zod バリデーションで使用します。ステップ 1 で個人情報を収集、ステップ 2 で設定を処理、ステップ 3 で確認を表示します。進行状況インジケーターを含めます。
next-themes を使用したダークモードトグルを備えた分析ダッシュボードを作成してください。メトリックカード、折れ線グラフのプレースホルダー、最近のアクティビティテーブル、設定ダイアログを含めます。適切な shadcn/ui テーマ設定を備えた card、table、dialog、button、switch コンポーネントを使用します。
ベストプラクティス
- すべての依存関係と設定が適切に設定されていることを確認するために、開発を開始する前に常に init-artifact.sh を実行する
- shadcn/ui の規約に合わせたクリーンなインポートのために、提供されているパスエイリアス (@/components、@/lib) を使用する
- ビルド時間と出力サイズを最小限に抑えるために、bundle-artifact.sh は開発完了後にのみ実行する
回避
- シンプルな単一ファイル React スニペットにはこのスキルを使用しない - マルチコンポーネントアプリケーション向けに設計されている
- Parcel バンドル設定とパスエイリアス解決を理解していない限り、ビルドスクリプトを変更しない
- bundle.html をバージョン管理にコミットしない - アーティファクト共有セッションごとに新規生成する
よくある質問
このスキルとシンプルな React アーティファクト生成の違いは何ですか？
pnpm の代わりに npm や yarn を使用できますか？
バンドルされた HTML ファイルはなぜとても大きいのですか？
初期化後にカスタムの shadcn/ui コンポーネントを追加できますか？
このスキルは Claude Code ワークスペースモードで動作しますか？
デフォルトの shadcn カラーを超えて Tailwind テーマをカスタマイズするにはどうすればよいですか？
開発者の詳細
作成者
ZhanlinCuiライセンス
Complete terms in LICENSE.txt
リポジトリ
https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection/tree/main/web-artifacts-builder参照
main
ファイル構成