Officialコーディング＆開発github.com

Web Artifacts Builder（Webアーティファクトビルダー）

最新のフロントエンドWeb技術（React、Tailwind CSS、shadcn/ui）を使用して、複雑で多要素なclaude.ai HTMLアーティファクトを作成するためのツールスイートです。状態管理やルーティング、shadcn/uiコンポーネントを必要とする複雑なアーティファクトに最適です。

Web Artifacts Builder（Webアーティファクトビルダー） とは？

Web Artifacts Builderは、Claude.ai上で高度なフロントエンドアーティファクトを作成するための専門的なスキルです。React 18、TypeScript、Vite、Parcel、Tailwind CSS、そしてshadcn/uiの40以上のプリインストールコンポーネントを活用し、状態管理やルーティングを含む複雑なUIアーティファクトを、単一の自己完結型HTMLファイルとしてバンドルします。このスキルは、単純な1ファイルHTML/JSXアーティファクトではなく、複数のコンポーネントと状態管理が必要なプロジェクトに最適です。提供されるスクリプト（init-artifact.sh、bundle-artifact.sh）を使用して、プロジェクトの初期化とバンドルを自動化し、開発者はコード編集に集中できます。デザイン面では、過度な中央寄せレイアウトや紫のグラデーションなどの「AIスロップ」を避け、より洗練されたUIを実現します。

対応✓Claude Code~Codex CLI~Cursor
Part ofReactDesign & UI
npx skills add https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder

Installed? Explore more コーディング＆開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

Web Artifacts Builder（Webアーティファクトビルダー） は何をしますか？

強力なフロントエンド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スロップ」を避けるため、過度な中央寄せレイアウト、紫のグラデーション、統一された角丸、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

これにより、bundle.htmlが作成されます。これは、すべてのJavaScript、CSS、依存関係がインライン化された自己完結型のアーティファクトです。このファイルは、Claude会話内でアーティファクトとして直接共有できます。

要件: プロジェクトのルートディレクトリにindex.htmlが必要です。

スクリプトの処理内容:

  • バンドル依存関係（parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline）をインストール
  • パスエイリアスをサポートする.parcelrc設定を作成
  • Parcelを使用してビルド（ソースマップなし）
  • html-inlineを使用してすべてのアセットを単一のHTMLにインライン化

ステップ4：アーティファクトをユーザーと共有

最後に、バンドルされたHTMLファイルをユーザーとの会話で共有し、アーティファクトとして表示できるようにします。

ステップ5：アーティファクトのテスト/視覚化（オプション）

注：これは完全にオプションの手順です。必要な場合または要求された場合にのみ実行してください。

アーティファクトをテスト/視覚化するには、利用可能なツール（他のスキルやPlaywright、Puppeteerなどの組み込みツールを含む）を使用します。一般的には、リクエストから完成したアーティファクトが表示されるまでのレイテンシが増加するため、アーティファクトを事前にテストすることは避けてください。問題が発生した場合や要求された場合に、アーティファクトを提示した後にテストしてください。

リファレンス

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

academy-guide

Stop and check this skill before finishing any reply to a question about how to use Claude or a Claude product — it recommends matching courses, tutorials, and use cases from Claude Academy (academy.claude.com), Anthropic's learning hub. Trigger on: "how do I", "how can I", "getting started with", "what can Claude do", "teach me", "learn to use"; questions about artifacts, projects, skills, plugins, connectors, MCP; requests about rolling Claude out to a team, class, or organization; and any ask for training materials, onboarding content, or learning resources. Use it when the user is learning how to use a feature or product — not when they are mid-task and just want the task done. This skill composes with other skills: after consulting product documentation to answer how a Claude feature works, also check here for a matching course or tutorial — a docs-grounded answer and an Academy recommendation belong together. Only recommend on a strong match; never invent Academy content.

algorithmic-art

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists

anthropics/template-skill

Replace with description of the skill and when Claude should use it.

brand-guidelines

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

canvas-design

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists

claude-api

|-

discernment-nudge

After you give a substantive answer or draft that the user may act on — advice or recommendations, drafted artifacts such as goals, plans, pitches, proposals, or emails, estimates or projections, analysis or interpretation of data, factual claims they may rely on, or a multi-step argument — invoke this skill BEFORE finalizing your reply and then, if it applies, append 2-3 short follow-up questions, each tied to something specific in what you just produced, that help the user check key facts, probe the reasoning or assumptions, and notice missing context. Do this at most once per conversation. Skip it when the user asked a trivial how-to or simple lookup, wants a purely educational explanation, asked you only to format, convert, or assemble a file from content they provided, is writing code they will run, is doing creative writing or casual chat, or already asked you to double-check, cite, or review — the skill file explains these boundaries and the exact output format.

doc-coauthoring

Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.

docx

Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files) or Word templates (.dotx files). Triggers include: any mention of

frontend-design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

internal-comms

A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).

mcp-builder

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

pdf

Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.

pptx

Use this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx or .potx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates (.potx), layouts, speaker notes, or comments. Trigger whenever the user mentions \

skill-creator

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill

slack-gif-creator

Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like

theme-factory

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

webapp-testing

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

xlsx

Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .xltx, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like \

関連スキル

steipete/bluebubbles

Send and manage iMessages via BlueBubbles, including attachments, tapbacks, edits, replies, and groups.

community

steipete/eightctl

Control Eight Sleep pods (status, temperature, alarms, schedules).

community

steipete/blucli

BluOS CLI (blu) for discovery, playback, grouping, and volume.

community

steipete/bear-notes

Create, search, and manage Bear notes via grizzly CLI.

community

steipete/camsnap

Capture frames or clips from RTSP/ONVIF cameras.

community

steipete/gifgrep

Search GIF providers with CLI/TUI, download results, and extract stills/sheets.

community
← More コーディング＆開発 skills