Web Artifacts Builder
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.
概要
The Web Artifacts Builder is a specialized toolset designed for the Claude AI environment, hosted within the popular anthropics/skills repository on GitHub. This skill enables the generation of sophisticated, multi-component HTML artifacts that go beyond basic single-file JSX outputs. By leveraging modern frontend technologies such as React, Tailwind CSS, and the shadcn/ui component library, it facilitates the creation of interactive web interfaces with integrated state management and routing capabilities. According to the source documentation, this skill is specifically optimized for complex web development tasks where standard artifact generation may be insufficient. It provides a structured approach for developers to implement professional-grade UI components and modular architectures directly within the Claude interface, benefiting from the broad community support reflected in the source repository's high popularity.
ユースケース
導入方法
# Review source first
open https://github.com/anthropics/skills/blob/main/skills/web-artifacts-builder/SKILL.mdCopy or clone the skill folder into your agent skills directory after reviewing its instructions and scripts.
セキュリティ
Users should review the code generated by this skill for compliance with their specific security standards, as it utilizes external libraries like React and shadcn/ui. As part of the anthropics/skills repository, implementation should follow standard web security practices for frontend artifacts, ensuring that any state handling or routing logic does not expose sensitive data within the client-side environment.
関連Skills
Constant Time Testing
trailofbits/skills
Constant-time testingは、暗号コード内のタイミングサイドチャネルを検出します。暗号実装のタイミング脆弱性を監査する際に使用します。
Managed Deep Agents
langchain-ai/langchain-skills
LangSmithでmda CLIを使用してManaged Deep Agentsを構築、テスト、またはデプロイする際のINVOKE THIS SKILL。コードファーストでファイルベースのプロジェクトレイアウト、define_deep_agent / defineDeepAgent、作成されたツールとミドルウェア、MCPコネクタ、cronスケジュール、スキル、サンドボックス、mda init/dev/deploy、Context Hub、およびPythonとTypeScriptでのヒューマンインザループ（human-in-the-loop）割り込みをカバーしています。
GSAP Core
mxyhi/ok-skills
コアな API のための公式 GSAP スキル — gsap.to()、from()、fromTo()、easing、duration、stagger、defaults、gsap.matchMedia()（レスポンシブ、prefers-reduced-motion）。ユーザーが JavaScript アニメーションライブラリ、React/Vue/vanilla でのアニメーション、GSAP のトゥイーン、イージング、基本的なアニメーション、レスポンシブまたは reduced-motion を求めた際に使用します。
花叔Design · Huashu-Design
mxyhi/ok-skills
花叔Design——HTMLを使用して、高精度プロトタイプ、インタラクティブデモ、スライド、アニメーション、デザインバリエーションの探索、デザインの方向性に関するアドバイス、専門家によるレビューを提供します。タスクに応じて適切な専門家（UX、アニメーター、スライドデザイナー、プロトタイパー）になりきり、ウェブデザインのありきたりな表現を避けます。トリガーワード：プロトタイプ作成、インタラクティブプロトタイプ、HTMLデモ、アニメーションデモ、デザインバリエーション、hi-fiデザイン、UI mockup、prototype、HTMLページを作成、可視化を作成、アプリプロトタイプ、iOSプロトタイプ、MP4/GIFを書き出し、60fps動画、デザインスタイル、デザインの方向性、カラーパレット、おすすめのスタイル、スタイルを選択、きれいなものを作る、レビュー、見栄えの確認、review this design、解説付きアニメーション、解説動画、長尺の解説動画、voiceover、narration、5分でわかるXの解説
Design Build
tinh2/skills-hub-registry
独特でプロダクションレベルのインターフェースを、Ralph Wiggumのようなスピードで構築します。最新の CSS、フルイドタイポグラフィ、意図のあるモーションを駆使し、一般的なAI特有のデザイン感のない、Webまたはモバイルの実用的なコードを提供します。使用場面：'build UI', 'design this', 'create interface', 'make it look good', 'build screen', 'implement design', 'frontend build', 'design build'。
Design Audit
tinh2/skills-hub-registry
アクセシビリティ (WCAG 2.2)、パフォーマンス、テーマ設定、レスポンシブ/アダプティブデザイン、およびアンチパターン検出にわたる包括的な自律型デザイン品質監査。重要度評価と修正案を含む優先順位付けされたレポートを作成します。使用場面: 'audit design', 'check accessibility', 'a11y audit', 'design review', 'UI quality check', 'WCAG audit', 'design quality'。