SkillsMar 29, 2026·1 min read

Claude Official Skill: 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 artifact...

TO
TokRepo精选 · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

# Install via Claude Code
claude skill install anthropics/skills/web-artifacts-builder

Or manually: copy the SKILL.md content below to .claude/skills/web-artifacts-builder/SKILL.md

Intro

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 artifact.... Official skill from Anthropic's skills repository — maintained by the Claude Code team.

Skill Content

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.

Reference

Source & Thanks

Author: Anthropic Repository: anthropics/skills Skill: web-artifacts-builder License: MIT

Related Assets

Agent Skills Standard — Cross-Platform AI Skills

The shared Agent Skills format used by Claude Code, OpenAI Codex, and Gemini CLI. Write skills once, use across all major AI coding tools.

TokRepo精选

OpenAI Codex & Cookbook Official Collection

Official OpenAI resources: Codex CLI coding agent and the OpenAI Cookbook with prompting guides for GPT-5.2, Codex, and more.

TokRepo精选

OpenAI Cookbook — Official Prompting Guides

Official prompting guides from OpenAI: GPT-5.2, Codex, Meta Prompting, and Realtime API guides. The definitive reference for OpenAI model optimization.

TokRepo精选
◈Home🏆Leaderboard👤Me