Skills2026年3月29日·1 分钟阅读

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...

TokRepo精选 · Community

快速使用

先拿来用，再决定要不要深挖

这里应该同时让用户和 Agent 知道第一步该复制什么、安装什么、落到哪里。

# 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

介绍

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:

Initialize the frontend repo using scripts/init-artifact.sh
Develop your artifact by editing the generated code
Bundle all code into a single HTML file using scripts/bundle-artifact.sh
Display artifact to user
(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

shadcn/ui components: https://ui.shadcn.com/docs/components

来源与感谢

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

Claude Official Skill: web-artifacts-builder

先拿来用，再决定要不要深挖

Skill Content

Web Artifacts Builder

Design & Style Guidelines

Reference

相关资产

Agent Skills Standard — Cross-Platform AI Skills

OpenAI Codex & Cookbook Official Collection

OpenAI Cookbook — Official Prompting Guides