Artifacts Builder
boshi-xixixi/TraeSkill
当用户需要创建复杂的多组件 HTML Artifacts（包含 React、Tailwind CSS、shadcn/ui）时使用。此 Skill 用于需要状态管理、路由或 shadcn/ui 组件的复杂 Artifacts，不适用于简单的单文件 HTML/JSX。
用于使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂的、多组件的 claude.ai HTML artifact 的工具套件。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifact - 不适用于简单的单文件 HTML/JSX artifact。
Install Web Artifacts Builder
$ npx skills add LeastBit/Claude_skills_zh-CN --skill web-artifacts-builder -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install LeastBit/Claude_skills_zh-CN web-artifacts-builder --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/LeastBit/Claude_skills_zh-CN.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/web-artifacts-builder .claude/skills/web-artifacts-builder && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "web-artifacts-builder" agent skill from https://github.com/LeastBit/Claude_skills_zh-CN/tree/main/skills/web-artifacts-builder into .claude/skills/web-artifacts-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-artifacts-builder", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/LeastBit/Claude_skills_zh-CN/tree/main/skills/web-artifacts-builderType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add LeastBit/Claude_skills_zh-CN --skill web-artifacts-builder -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install LeastBit/Claude_skills_zh-CN web-artifacts-builder --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/LeastBit/Claude_skills_zh-CN.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/web-artifacts-builder .agents/skills/web-artifacts-builder && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "web-artifacts-builder" agent skill from https://github.com/LeastBit/Claude_skills_zh-CN/tree/main/skills/web-artifacts-builder into .agents/skills/web-artifacts-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-artifacts-builder", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add LeastBit/Claude_skills_zh-CN --skill web-artifacts-builder -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install LeastBit/Claude_skills_zh-CN web-artifacts-builder --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/LeastBit/Claude_skills_zh-CN.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/web-artifacts-builder .cursor/skills/web-artifacts-builder && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "web-artifacts-builder" agent skill from https://github.com/LeastBit/Claude_skills_zh-CN/tree/main/skills/web-artifacts-builder into .cursor/skills/web-artifacts-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-artifacts-builder", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/LeastBit/Claude_skills_zh-CN.git --path skills/web-artifacts-builder--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add LeastBit/Claude_skills_zh-CN --skill web-artifacts-builder -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install LeastBit/Claude_skills_zh-CN web-artifacts-builder --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/LeastBit/Claude_skills_zh-CN.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/web-artifacts-builder .gemini/skills/web-artifacts-builder && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "web-artifacts-builder" agent skill from https://github.com/LeastBit/Claude_skills_zh-CN/tree/main/skills/web-artifacts-builder into .gemini/skills/web-artifacts-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-artifacts-builder", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install LeastBit/Claude_skills_zh-CN web-artifacts-builderInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add LeastBit/Claude_skills_zh-CN --skill web-artifacts-builder -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/LeastBit/Claude_skills_zh-CN.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/web-artifacts-builder .github/skills/web-artifacts-builder && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "web-artifacts-builder" agent skill from https://github.com/LeastBit/Claude_skills_zh-CN/tree/main/skills/web-artifacts-builder into .github/skills/web-artifacts-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-artifacts-builder", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add LeastBit/Claude_skills_zh-CN --skill web-artifacts-builder -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install LeastBit/Claude_skills_zh-CN web-artifacts-builder --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/LeastBit/Claude_skills_zh-CN.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/web-artifacts-builder .opencode/skills/web-artifacts-builder && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "web-artifacts-builder" agent skill from https://github.com/LeastBit/Claude_skills_zh-CN/tree/main/skills/web-artifacts-builder into .opencode/skills/web-artifacts-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-artifacts-builder", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
web-artifacts-builder- GitHub stars
- 588
- Token cost
- ~458 tokens
- SKILL.md length
- 165 words
- Files
- 5 (incl. scripts)
- Skills in repo
- 16
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
用于使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂的、多组件的 claude.ai HTML artifact 的工具套件。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifact - 不适用于简单的单文件 HTML/JSX artifact。
- Works in 5 steps: 使用 scripts/init-artifact.sh 初始化前端仓库 → 通过编辑生成的代码来开发你的 artifact → 使用 scripts/bundle-artifact.sh 将所有代码打包成单个… → …
- Tasks that involve HTML artifacts
- SKILL.md covers 设计与风格指南, 快速上手 and 参考资料
- Runs Shell scripts from its folder; calls bash
What it does
Web Artifacts Builder is an agent skill from LeastBit/Claude_skills_zh-CN. 用于使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂的、多组件的 claude.ai HTML artifact 的工具套件。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifact - 不适用于简单的单文件 HTML/JSX artifact。
Its SKILL.md is about 460 tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including scripts (for example `scripts/bundle-artifact.sh` and `scripts/init-artifact.sh`).
It sits in Frontend & Design, covering HTML artifacts and React components. It works with shadcn/ui, React, Tailwind CSS and Vite. The repository describes itself as: Anthropics/skills中文学习版本 来自：https://github.com/anthropics/skills. The licence is Apache-2.0.
When your agent uses it
- Tasks that involve HTML artifacts
- Tasks that involve React components
Example prompts
- “/web-artifacts-builder”
Requirements
- A Bash shell
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- 使用 scripts/init-artifact.sh 初始化前端仓库
- 通过编辑生成的代码来开发你的 artifact
- 使用 scripts/bundle-artifact.sh 将所有代码打包成单个 HTML 文件
- 向用户展示 artifact
- (可选) 测试 artifact
What it can do on your machine
Read from SKILL.md and the folder at commit 1ab2916. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 3 files in scripts/ (Shell), which the agent can run.
Shell commands in SKILL.md call:
bash
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
ui.shadcn.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Web Artifacts Builder loads about 458 tokens when it runs. Until then it costs about 45 tokens; SKILL.md has 165 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from LeastBit/Claude_skills_zh-CN at commit 1ab2916, republished under its Apache-2.0 licence (© LeastBit). 165 words, ~458 tokens.
Download SKILL.mdSave it as
.claude/skills/web-artifacts-builder/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.- name
- web-artifacts-builder
- description
- 用于使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂的、多组件的 claude.ai HTML artifact 的工具套件。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifact - 不适用于简单的单文件 HTML/JSX artifact。
- license
- 完整条款见 LICENSE.txt
Web Artifacts 生成器 (Web Artifacts Builder)
要构建强大的前端 claude.ai artifact，请遵循以下步骤：
- 使用
scripts/init-artifact.sh初始化前端仓库 - 通过编辑生成的代码来开发你的 artifact
- 使用
scripts/bundle-artifact.sh将所有代码打包成单个 HTML 文件 - 向用户展示 artifact
- (可选) 测试 artifact
技术栈: React 18 + TypeScript + Vite + Parcel (打包) + Tailwind CSS + shadcn/ui
设计与风格指南
非常重要：为了避免通常被称为“AI 废话 (AI slop)”的设计，请避免过度使用居中布局、紫色渐变、统一的圆角和 Inter 字体。
快速上手
第 1 步：初始化项目
运行初始化脚本以创建一个新的 React 项目：
bash scripts/init-artifact.sh <项目名称>
cd <项目名称>这将创建一个配置齐全的项目，包含：
- ✅ React + TypeScript (通过 Vite)
- ✅ 带有 shadcn/ui 主题系统的 Tailwind CSS 3.4.1
- ✅ 已配置路径别名 (
@/) - ✅ 预装了 40 多个 shadcn/ui 组件
- ✅ 包含所有 Radix UI 依赖项
- ✅ 配置了 Parcel 用于打包 (通过 .parcelrc)
- ✅ Node 18+ 兼容性 (自动检测并固定 Vite 版本)
第 2 步：开发你的 Artifact
要构建 artifact，请编辑生成的文件。请参阅下面的常见开发任务获取指导。
第 3 步：打包为单个 HTML 文件
要将 React 应用打包成单个 HTML artifact：
bash scripts/bundle-artifact.sh这将创建 bundle.html —— 一个包含所有内联 JavaScript、CSS 和依赖项的自包含 artifact。此文件可以直接作为 artifact 在 Claude 对话中分享。
要求: 你的项目根目录下必须有一个 index.html。
脚本作用:
- 安装打包依赖项 (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
- 创建支持路径别名的
.parcelrc配置 - 使用 Parcel 构建 (不包含 source maps)
- 使用 html-inline 将所有资产内联到单个 HTML 中
第 4 步：与用户分享 Artifact
最后，在对话中与用户分享打包好的 HTML 文件，以便他们将其作为 artifact 查看。
第 5 步：测试/预览 Artifact (可选)
注意：这是一个完全可选的步骤。仅在必要或有要求时执行。
要测试/预览 artifact，请使用可用工具（包括其他 Skill 或内置工具如 Playwright 或 Puppeteer）。通常情况下，避免预先测试 artifact，因为这会增加请求与看到成品 artifact 之间的延迟。如果用户要求或出现问题，请在展示 artifact 后再进行测试。
参考资料
- shadcn/ui 组件: https://ui.shadcn.com/docs/components
© LeastBit, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 4 other files (scripts) in skills/web-artifacts-builder of LeastBit/Claude_skills_zh-CN.
- SKILL.md
- LICENSE.txt
- scripts/bundle-artifact.sh
- scripts/init-artifact.sh
- scripts/shadcn-components.tar.gz
Open the folder on GitHubat commit 1ab2916
Compare with similar skills
Web Artifacts Builder next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Web Artifacts Builder this skillLeastBit/Claude_skills_zh-CN | 588 | — | ~458 | Automated safety check: Pass | Apache-2.0 | |
| Artifacts Builderboshi-xixixi/TraeSkill | 274 | — | ~768 | Automated safety check: Pass | Apache-2.0 | |
| Web Artifacts Builderanthropics/skills | 180k | 40 repos | ~769 | Automated safety check: Pass | Apache-2.0 | |
| Creative Tim UI Blockscreativetimofficial/ui | 12k | — | ~2.1k | Automated safety check: Notes | MIT | |
| Shadcn Tailwind UILiarMTTT/TavernWeave | 148 | — | ~1.7k | Automated safety check: Pass | Custom licence | |
| Web Artifacts Buildermajiayu000/spellbook | 286 | — | ~744 | Automated safety check: Pass | MIT |
Similar skills
- Official
Web Artifacts Builder
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
Creative Tim UI Blocks
creativetimofficial/ui
Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.
Shadcn Tailwind UI
LiarMTTT/TavernWeave
Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.
Web Artifacts Builder
majiayu000/spellbook
A skill your agent uses when creating elaborate, multi-component claude.ai HTML artifacts with React, Tailwind CSS, shadcn/ui, state management, routing, or complex frontend structure; not for…
Web Artifacts Builder V2
sammcj/agentic-coding
Suite of tools for creating elaborate, multi-component claude.ai HTML artefacts using modern frontend web technologies (React 19, Tailwind CSS v4, shadcn/ui).
More from LeastBit/Claude_skills_zh-CN
All 16 skills in this repoSkill Creator
LeastBit/Claude_skills_zh-CN
创建高效技能的指南。当用户想要创建新技能（或更新现有技能）以扩展 Claude 的能力，包括专业知识、工作流程或工具集成时，应使用此技能。
DOCX
LeastBit/Claude_skills_zh-CN
全面的文档创建、编辑和分析功能，支持修订追踪、批注、格式保留和文本提取。当 Claude 需要处理专业文档（.docx 文件）时使用：(1) 创建新文档，(2) 修改或编辑内容，(3) 处理修订追踪，(4) 添加批注，或其他任何文档任务
MCP Builder
LeastBit/Claude_skills_zh-CN
构建高质量 MCP（模型上下文协议）服务器的指南，使 LLM 能够通过精心设计的工具与外部服务交互。在使用 Python (FastMCP) 或 Node/TypeScript (MCP SDK) 构建 MCP 服务器以集成外部 API 或服务时使用。
PDF
LeastBit/Claude_skills_zh-CN
全面的 PDF 操作工具包，用于提取文本和表格、创建新 PDF、合并/拆分文档以及处理表单。当 Claude 需要填写 PDF 表单或以编程方式大规模处理、生成或分析 PDF 文档时使用。
PPTX
LeastBit/Claude_skills_zh-CN
演示文稿创建、编辑和分析。当 Claude 需要处理演示文稿（.pptx 文件）时使用，包括：(1) 创建新演示文稿，(2) 修改或编辑内容，(3) 处理版式，(4) 添加批注或演讲者备注，或其他任何演示文稿任务
Webapp Testing
LeastBit/Claude_skills_zh-CN
使用 Playwright 与本地 Web 应用程序交互及进行测试的工具包。支持验证前端功能、调试 UI 行为、捕获浏览器截图以及查看浏览器日志。
Related
Works with
Categories
Questions about Web Artifacts Builder
What does Web Artifacts Builder do?
用于使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂的、多组件的 claude.ai HTML artifact 的工具套件。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifact - 不适用于简单的单文件 HTML/JSX artifact。. Web Artifacts Builder is an agent skill from LeastBit/Claude_skills_zh-CN.
When should I use Web Artifacts Builder?
Web Artifacts Builder fits situations like: tasks that involve HTML artifacts; tasks that involve React components.
How do I install Web Artifacts Builder in Claude Code?
Run `npx skills add LeastBit/Claude_skills_zh-CN --skill web-artifacts-builder -a claude-code`. Or copy the skill folder (skills/web-artifacts-builder in LeastBit/Claude_skills_zh-CN) into .claude/skills/web-artifacts-builder in your project. Claude Code loads it when a task matches its description.
How do I install Web Artifacts Builder in Codex?
Run `npx skills add LeastBit/Claude_skills_zh-CN --skill web-artifacts-builder -a codex`. Or copy the skill folder (skills/web-artifacts-builder in LeastBit/Claude_skills_zh-CN) into .agents/skills/web-artifacts-builder in your project. Codex loads it when a task matches its description.
Can I use Web Artifacts Builder in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add LeastBit/Claude_skills_zh-CN --skill web-artifacts-builder -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/web-artifacts-builder, .gemini/skills/web-artifacts-builder, .github/skills/web-artifacts-builder and .opencode/skills/web-artifacts-builder in your project.
What does Web Artifacts Builder need to run?
Going by SKILL.md and its folder, Web Artifacts Builder needs a shell for the scripts in its folder and the command-line tools its instructions call (bash). Our summary lists: A Bash shell.
Does Web Artifacts Builder access the network?
SKILL.md names 1 domain. As links in the text: ui.shadcn.com. This is read from the text; nothing was executed.
Is Web Artifacts Builder safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Web Artifacts Builder use?
Web Artifacts Builder is published under the Apache-2.0 licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Web Artifacts Builder use?
About 458 tokens (SKILL.md is roughly 1.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Web Artifacts Builder?
Skills that share tags, products or a category with Web Artifacts Builder: Artifacts Builder (boshi-xixixi/TraeSkill, 274 stars), Web Artifacts Builder (anthropics/skills, 180k stars), Creative Tim UI Blocks (creativetimofficial/ui, 12k stars) and Shadcn Tailwind UI (LiarMTTT/TavernWeave, 148 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Web Artifacts Builder?
LeastBit (a GitHub user) maintains it in LeastBit/Claude_skills_zh-CN, which has 588 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on January 19, 2026.
Source: LeastBit/Claude_skills_zh-CN on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.