claude-skills/

Anthropic公式スキル・プラグインの日本語ディレクトリ

last sync 22h ago
スキルSkills

🏗️web-artifacts-builder

プラグイン
example-skills
ライセンス
Complete terms in LICENSE.txt
ソース
GitHub で見る ↗

説明

モダンなフロントエンドWeb技術（React、Tailwind CSS、shadcn/ui）を使用して、 精巧かつ複数コンポーネントで構成されたclaude.ai HTMLアーティファクトを 作成するためのツール群。 次のような場合に使用: 状態管理、ルーティング、またはshadcn/uiコンポーネントを必要とする 複雑なアーティファクトの構築。 シンプルな単一ファイルのHTML/JSXアーティファクトには使用しないこと。

原文を表示

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

ユースケース

  • ✓複雑なアーティファクトを構築するとき
  • ✓状態管理が必要な場合
  • ✓ルーティング機能が必要な場合
  • ✓shadcn/uiコンポーネントを使用するとき

本文（日本語訳）

Web Artifacts Builder

claude.ai で強力なフロントエンド Artifact を構築するには、以下の手順に従ってください:

  1. scripts/init-artifact.sh を使用してフロントエンドリポジトリを初期化する
  2. 生成されたコードを編集して Artifact を開発する
  3. scripts/bundle-artifact.sh を使用してすべてのコードを単一の HTML ファイルにバンドルする
  4. Artifact をユーザーに表示する
  5. （任意）Artifact をテストする

スタック: 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 依存関係を含む
  • ✅ Parcel によるバンドル設定済み（.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 のテスト・確認が必要なとき。利用可能なツール（他の Skill や Playwright・Puppeteer などの組み込みツール）を使用してください。 ただし、リクエストから完成した Artifact が表示されるまでのレイテンシが増加するため、事前のテストは原則として避けてください。Artifact を提示した後、リクエストがあった場合や問題が発生した場合にテストを行ってください。

リファレンス

原文（English）を表示

Web Artifacts Builder

To build powerful frontend claude.ai artifacts, follow these steps:

  1. Initialize the frontend repo using scripts/init-artifact.sh
  2. Develop your artifact by editing the generated code
  3. Bundle all code into a single HTML file using scripts/bundle-artifact.sh
  4. Display artifact to user
  5. (Optional) Test the artifact

Stack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui

Design & Style Guidelines

VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.

Quick Start

Step 1: Initialize Project

Run the initialization script to create a new React project:

bash scripts/init-artifact.sh <project-name>
cd <project-name>

This creates a fully configured project with:

  • ✅ React + TypeScript (via Vite)
  • ✅ Tailwind CSS 3.4.1 with shadcn/ui theming system
  • ✅ Path aliases (@/) configured
  • ✅ 40+ shadcn/ui components pre-installed
  • ✅ All Radix UI dependencies included
  • ✅ Parcel configured for bundling (via .parcelrc)
  • ✅ Node 18+ compatibility (auto-detects and pins Vite version)

Step 2: Develop Your Artifact

To build the artifact, edit the generated files. See Common Development Tasks below for guidance.

Step 3: Bundle to Single HTML File

To bundle the React app into a single HTML artifact:

bash scripts/bundle-artifact.sh

This creates bundle.html - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.

Requirements: Your project must have an index.html in the root directory.

What the script does:

  • Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
  • Creates .parcelrc config with path alias support
  • Builds with Parcel (no source maps)
  • Inlines all assets into single HTML using html-inline

Step 4: Share Artifact with User

Finally, share the bundled HTML file in conversation with the user so they can view it as an artifact.

Step 5: Testing/Visualizing the Artifact (Optional)

Note: This is a completely optional step. Only perform if necessary or requested.

To test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.

Reference

原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。