Anthropic Claudeソフトウェア開発⭐ リポ 132,723品質スコア 85/100

web-artifacts-builder

React、Tailwind CSS、shadcn/uiなどの最新フロントエンド技術を使用して、複雑で多層的なclaude.ai HTMLアーティファクトを作成するためのツールスイートです。状態管理、ルーティング、またはshadcn/uiコンポーネントが必要な複雑なアーティファクトの構築に使用します。シンプルな単一ファイルのHTML/JSXアーティファクトには向きません。

description の原文を見る

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.

SKILL.md 本文

注意: このスキルのライセンスは ライセンス未確認 です。本サイトでは本文プレビューのみを表示しています。利用前に GitHub の原本でライセンス条件をご確認ください。

Web Artifacts Builder

強力なフロントエンドの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-

...

全文を GitHub の原本で見る →リポジトリ

詳細情報

作者: anthropics
リポジトリ: anthropics/skills
ライセンス: 不明
最終更新: 2026/5/9

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/anthropics/skills / ライセンス: 未指定