web-artifacts-builder
claude.aiのアーティファクト機能を活用して、強力なフロントエンドコンポーネントを構築する際に使用するスキルです。アーティファクトの作成手順に沿って、効率的かつ高品質なUIを生成します。
description の原文を見る
To build powerful frontend claude.ai artifacts, follow these steps:
SKILL.md 本文
Web Artifacts Builder
強力なフロントエンド claude.ai artifacts を構築するには、以下の手順に従ってください:
scripts/init-artifact.shを使用してフロントエンドリポジトリを初期化します- 生成されたコードを編集して artifact を開発します
scripts/bundle-artifact.shを使用してすべてのコードを単一の HTML ファイルにバンドルします- artifact をユーザーに表示します
- (オプション) artifact をテストします
スタック: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
デザイン・スタイルガイドライン
非常に重要: よく「AI slop」と呼ばれるものを避けるため、過度に中央寄せされたレイアウト、紫のグラデーション、均一な角丸、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 依存関係を含む
- ✅ Parcel を bundling 用に構成 (.parcelrc 経由)
- ✅ Node 18+ との互換性 (Vite バージョンを自動検出およびピン留め)
ステップ 2: Artifact の開発
artifact を構築するには、生成されたファイルを編集します。ガイダンスについては、以下の一般的な開発タスクを参照してください。
ステップ 3: 単一 HTML ファイルへのバンドル
React アプリを単一の HTML artifact にバンドルするには:
bash scripts/bundle-artifact.sh
これにより bundle.html が作成されます - すべての JavaScript、CSS、および依存関係がインライン化された自己完結型の artifact です。このファイルは Claude の会話で artifact として直接共有できます。
要件: プロジェクトのルートディレクトリに index.html が必要です。
スクリプトの動作:
- バンドリング依存関係 (parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline) をインストール
- パスエイリアスサポートを備えた
.parcelrc設定を作成 - Parcel でビルド (ソースマップなし)
- html-inline を使用してすべてのアセットを単一 HTML にインライン化
ステップ 4: ユーザーとの Artifact の共有
最後に、バンドルされた HTML ファイルをユーザーとの会話で共有して、artifact として表示できるようにします。
ステップ 5: Artifact のテスト・可視化 (オプション)
注: これは完全にオプショナルなステップです。必要な場合またはリクエストされた場合のみ実行してください。
artifact をテスト・可視化するには、利用可能なツール (他の Skills または Playwright や Puppeteer などの組み込みツール) を使用してください。一般的には、リクエストと完成した artifact が表示されるまでの遅延が増加するため、事前に artifact をテストすることは避けてください。後でリクエストされた場合、または問題が発生した場合にテストしてください。
リファレンス
- shadcn/ui コンポーネント: https://ui.shadcn.com/docs/components
使用時期
このスキルは、概要で説明したワークフローまたはアクションを実行するために適用できます。
制限事項
- このスキルは、タスクが上記で説明されたスコープと明確に一致する場合にのみ使用してください。
- 出力を環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
- 必要な入力、許可、セーフティー境界、または成功基準が不明な場合は、一旦停止して明確にすることを求めてください。
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- sickn33
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/sickn33/antigravity-awesome-skills / ライセンス: MIT
関連スキル
agent-browser
AI エージェント向けのブラウザ自動化 CLI です。ウェブサイトとの対話が必要な場合に使用します。ページ遷移、フォーム入力、ボタンクリック、スクリーンショット取得、データ抽出、ウェブアプリのテスト、ブラウザ操作の自動化など、あらゆるブラウザタスクに対応できます。「ウェブサイトを開く」「フォームに記入する」「ボタンをクリックする」「スクリーンショットを取得する」「ページからデータを抽出する」「このウェブアプリをテストする」「サイトにログインする」「ブラウザ操作を自動化する」といった要求や、プログラマティックなウェブ操作が必要なタスクで起動します。
anyskill
AnySkill — あなたのプライベート・スキルクラウド。GitHubを基盤としたリポジトリからエージェントスキルを管理、同期、動的にロードできます。自然言語でクラウドスキルを検索し、オンデマンドでプロンプトを自動ロード、カスタムスキルのアップロードと共有、スキルバンドルの一括インストールが可能です。OpenClaw、Antigravity、Claude Code、Cursorに対応しています。
engram
AIエージェント向けの永続的なメモリシステムです。バグ修正、意思決定、発見、設定変更の後はmem_saveを使用してください。ユーザーが「覚えている」「記憶している」と言及した場合、または以前のセッションと重複する作業を開始する際はmem_searchを使用します。セッション終了前にmem_session_summaryを使用して、コンテキストを保持してください。
skyvern
AI駆動のブラウザ自動化により、任意のウェブサイトを自動化できます。フォーム入力、データ抽出、ファイルダウンロード、ログイン、複数ステップのワークフロー実行など、ユーザーがウェブサイトと連携する必要があるときに使用します。Skyvernは、LLMとコンピュータビジョンを活用して、未知のサイトも自動操作可能です。Python SDK、TypeScript SDK、REST API、MCPサーバー、またはCLIを通じて統合できます。
pinchbench
PinchBenchベンチマークを実行して、OpenClawエージェントの実世界タスクにおけるパフォーマンスを評価できます。モデルの機能テスト、モデル間の比較、ベンチマーク結果のリーダーボード提出、またはOpenClawのセットアップがカレンダー、メール、リサーチ、コーディング、複数ステップのワークフローにどの程度対応しているかを確認する際に使用します。
openui
OpenUIとOpenUI Langを使用してジェネレーティブUIアプリを構築できます。これらはLLM生成インターフェースのためのトークン効率的なオープン標準です。OpenUI、@openuidev、ジェネレーティブUI、LLMからのストリーミングUI、AI向けコンポーネントライブラリ、またはjson-render/A2UIの置き換えについて述べる際に使用します。スキャフォルディング、defineComponent、システムプロンプト、Renderer、およびOpenUI Lang出力のデバッグに対応しています。