以 React、Tailwind CSS、shadcn/ui 构建多组件 claude.ai Artifact，用于需状态管理或路由的页面。
安装
npx skills add anthropics/skills --skill web-artifacts-buildernpx skills add anthropics/skills --skill web-artifacts-builder -a claude-code -gnpx skills add anthropics/skills --skill web-artifacts-builder -a codex -ggemini skills install https://github.com/anthropics/skills.git --path skills/web-artifacts-buildergh skill install anthropics/skills web-artifacts-buildergit clone --depth 1 https://github.com/anthropics/skills /tmp/anthropics__skills
mkdir -p ~/.claude/skills ~/.agents/skills
cp -R /tmp/anthropics__skills/skills/web-artifacts-builder ~/.claude/skills/web-artifacts-builder # Claude Code
cp -R /tmp/anthropics__skills/skills/web-artifacts-builder ~/.agents/skills/web-artifacts-builder # Codex, Cursor, Gemini CLI, Copilot, OpenCode试试这个任务
把这份功能说明做成一个可以本地运行的交互演示，包含真实的页面切换与状态反馈，并说明如何启动和检查。
- 准备材料
- 功能范围、内容、交互要求与运行限制。
- 检查结果
- 实际运行演示，检查控件、状态恢复和不同屏幕尺寸。