web-artifacts-builder

Name: web-artifacts-builder
Author: Anthropic

帮助用户用 React、Tailwind 与 shadcn/ui 构建复杂网页组件与交互原型

来源

GitHub

更新于

2026-07-21

// 安全评估需留意

仅提示词，不执行代码
开源可审计

总评

该技能材料显示其本质是一个开源的前端工件构建指南/脚本集合，不要求密钥，也未声明任何远程端点。主要安全关注点在于会初始化项目、安装前端依赖并执行本地构建脚本，属于此类开发工具的常规本地执行与供应链注意事项，整体偏低风险至需留意。

凭证密钥低风险

材料明确标注无需密钥或环境变量，README 也未要求登录、API token 或第三方凭证，未见明显凭证泄露或滥用面。

网络外发需留意

虽未声明固定远程端点，但初始化/打包过程会安装 Vite、Parcel、html-inline 等依赖，通常意味着连接包管理源获取依赖；未见将用户数据外发到不明业务端点的描述。

代码执行需留意

README 明确要求运行本地 shell 脚本（如 scripts/init-artifact.sh、scripts/bundle-artifact.sh）并执行前端构建流程，属于本机起进程和本地代码执行；按材料看这是实现其声明功能所必需，未见额外越权系统能力申请。

数据访问需留意

该技能会创建项目目录、编辑生成代码并输出 bundle.html，预计可读写当前工程文件及构建产物；从描述看数据访问范围主要限于本地项目工作区，未见过度授权声明。

来源供应链需留意

正面因素是 GitHub 开源且仓库属于 anthropics/skills，源码可审计；但许可证未声明、社区 star 为 0、维护状态未知，且会引入多项 Node 前端依赖，存在常规依赖链风险，因此建议保留供应链留意。

安全建议

仅在隔离的本地开发环境中运行初始化和打包脚本，并先审阅 scripts 目录内容。
锁定并审查安装的 npm 依赖版本，优先使用受控镜像或开启 lockfile。
将文件访问范围限制在专用项目目录，避免在含敏感文件的工作区直接执行。
如需长期使用，先确认仓库维护情况、许可证和依赖安全告警。

审计模型: gpt-5.4 · 2026-06-17

// 安装

复制安装指令，让 AI 自动完成配置 · 推荐新手

请帮我安装 askskill 上的 "web-artifacts-builder" 技能：
1. 下载 https://raw.githubusercontent.com/anthropics/skills/main/skills/web-artifacts-builder/SKILL.md
2. 保存为 ~/.claude/skills/web-artifacts-builder/SKILL.md
3. 装好后重载技能，告诉我可以用了

// 下载

下载 SKILL.md机读安装清单 ↗

// 文档

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.

Quick Start

Step 1: Initialize Project

Run the initialization script to create a new React project:

bash scripts/init-artifact.sh <project-name>
cd <project-name>

This creates a fully configured project with:

✅ React + TypeScript (via Vite)
✅ Tailwind CSS 3.4.1 with shadcn/ui theming system
✅ Path aliases (@/) configured
✅ 40+ shadcn/ui components pre-installed
✅ All Radix UI dependencies included
✅ Parcel configured for bundling (via .parcelrc)
✅ Node 18+ compatibility (auto-detects and pins Vite version)

Step 2: Develop Your Artifact

To build the artifact, edit the generated files. See Common Development Tasks below for guidance.

Step 3: Bundle to Single HTML File

To bundle the React app into a single HTML artifact:

bash scripts/bundle-artifact.sh

This creates bundle.html - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.

Requirements: Your project must have an index.html in the root directory.

What the script does:

Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
Creates .parcelrc config with path alias support
Builds with Parcel (no source maps)
Inlines all assets into single HTML using html-inline

Step 4: Share Artifact with User

Finally, share the bundled HTML file in conversation with the user so they can view it as an artifact.

Step 5: Testing/Visualizing the Artifact (Optional)

Note: This is a completely optional step. Only perform if necessary or requested.

To test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.