New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Artifacts Builder

by boshi-xixixi in boshi-xixixi/TraeSkill

当用户需要创建复杂的多组件 HTML Artifacts（包含 React、Tailwind CSS、shadcn/ui）时使用。此 Skill 用于需要状态管理、路由或 shadcn/ui 组件的复杂 Artifacts，不适用于简单的单文件 HTML/JSX。

Apache-2.0Auto-check passedFrontend & Design

Install Artifacts Builder

skills CLI
$ npx skills add boshi-xixixi/TraeSkill --skill artifacts-builder -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install boshi-xixixi/TraeSkill artifacts-builder --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/boshi-xixixi/TraeSkill.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.trae/Skills/03_Developer_ArtifactsBuilder .claude/skills/artifacts-builder && rm -rf skills-src

Use ~/.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/

Facts

Skill name
artifacts-builder
GitHub stars
275
Token cost
~768 tokens
SKILL.md length
370 words
Files
6 (incl. scripts)
Skills in repo
16
Repo updated
First seen
Licence
Apache-2.0

At a glance

当用户需要创建复杂的多组件 HTML Artifacts（包含 React、Tailwind CSS、shadcn/ui）时使用。此 Skill 用于需要状态管理、路由或 shadcn/ui 组件的复杂 Artifacts，不适用于简单的单文件 HTML/JSX。

  • Works in 5 steps: Initialize Project → Develop Your Artifact → Bundle to Single HTML File → …
  • Tasks that involve HTML artifacts
  • SKILL.md covers Design & Style Guidelines, Quick Start and Reference
  • Runs Shell scripts from its folder; calls bash

What it does

Artifacts Builder is an agent skill from boshi-xixixi/TraeSkill. 当用户需要创建复杂的多组件 HTML Artifacts（包含 React、Tailwind CSS、shadcn/ui）时使用。此 Skill 用于需要状态管理、路由或 shadcn/ui 组件的复杂 Artifacts，不适用于简单的单文件 HTML/JSX。

Its SKILL.md is about 770 tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including scripts (for example `AGENTS.md`, `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: 为 Trae IDE 打造的全流程标准化 AI 开发技能库，内置调度分发与多角色研发技能，一键导入规范 AI 编码工作流 🚀. The licence is Apache-2.0.

When your agent uses it

  • Tasks that involve HTML artifacts
  • Tasks that involve React components

Example prompts

  • “/artifacts-builder”

Requirements

  • A Bash shell

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Initialize Project
  2. Develop Your Artifact
  3. Bundle to Single HTML File
  4. Share Artifact with User
  5. Testing/Visualizing the Artifact (Optional)

What it can do on your machine

Read from SKILL.md and the folder at commit 9cf38e6. 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

Artifacts Builder loads about 768 tokens when it runs. Until then it costs about 38 tokens; SKILL.md has 370 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~38
When it runs · the whole SKILL.md, loaded when a task matches
~768

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 boshi-xixixi/TraeSkill at commit 9cf38e6, republished under its Apache-2.0 licence (© boshi-xixixi). 370 words, ~768 tokens.

Download SKILL.mdSave it as .claude/skills/artifacts-builder/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.
name
artifacts-builder
description
当用户需要创建复杂的多组件 HTML Artifacts（包含 React、Tailwind CSS、shadcn/ui）时使用。此 Skill 用于需要状态管理、路由或 shadcn/ui 组件的复杂 Artifacts，不适用于简单的单文件 HTML/JSX。
license
Complete terms in LICENSE.txt

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.

Quick Start

Step 1: Initialize Project

Run the initialization script to create a new React project:

bash
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. If you need to confirm design choices or functionality with the user during development, use mcp-feedback-enhanced (e.g., ask_followup_question) if available.

Show full SKILL.md (184 more words)Show less
Step 3: Bundle to Single HTML File

To bundle the React app into a single HTML artifact:

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

Reference

© boshi-xixixi, 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 5 other files (scripts) in .trae/Skills/03_Developer_ArtifactsBuilder of boshi-xixixi/TraeSkill.

  • SKILL.md
  • AGENTS.md
  • LICENSE.txt
  • scripts/bundle-artifact.sh
  • scripts/init-artifact.sh
  • scripts/shadcn-components.tar.gz

Open the folder on GitHubat commit 9cf38e6

Compare with similar skills

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.

Artifacts Builder compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Artifacts Builder this skillboshi-xixixi/TraeSkill275—~768Automated safety check: PassApache-2.0
Web Artifacts BuilderLeastBit/Claude_skills_zh-CN588—~458Automated safety check: PassApache-2.0
Web Artifacts Builderanthropics/skills180k41 repos~769Automated safety check: PassApache-2.0
Creative Tim UI Blockscreativetimofficial/ui12k—~2.1kAutomated safety check: NotesMIT
Shadcn Tailwind UILiarMTTT/TavernWeave153—~1.7kAutomated safety check: PassCustom licence
Web Artifacts Buildermajiayu000/spellbook287—~744Automated safety check: PassMIT

Similar skills

  • Web Artifacts Builder

    LeastBit/Claude_skills_zh-CN

    用于使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂的、多组件的 claude.ai HTML artifact 的工具套件。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifact - 不适用于简单的单文件 HTML/JSX artifact。

    588 GitHub stars~458 tokensUpdated 8 mo ago
    Frontend & DesignAuto-check passed

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 41 repos~769 tokens
    Frontend & DesignAuto-check passed

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

    12k GitHub stars~2.1k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check: notes

  • Shadcn Tailwind UI

    LiarMTTT/TavernWeave

    Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.

    153 GitHub stars~1.7k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • 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…

    287 GitHub stars~744 tokensUpdated today
    Frontend & DesignAuto-check passed

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

    162 GitHub stars~1.9k tokensUpdated today
    Frontend & DesignAuto-check passed

More from boshi-xixixi/TraeSkill

All 16 skills in this repo

  • AI Team Orchestration

    boshi-xixixi/TraeSkill

    Bootstrap and run a multi-agent AI development team. An agent skill from boshi-xixixi/TraeSkill.

    275 GitHub stars~1.4k tokensUpdated 4 mo ago
    Auto-check passed

  • Arize Instrumentation

    boshi-xixixi/TraeSkill

    INVOKE THIS SKILL when adding Arize AX tracing or observability to an app for the first time, or when the user wants to instrument their LLM app or get started with LLM observability.

    275 GitHub stars~5.1k tokensUpdated 4 mo ago
    Auto-check: notes

  • Dotnet MCP Builder

    boshi-xixixi/TraeSkill

    Build Model Context Protocol (MCP) servers in C/.NET against the current ModelContextProtocol 1.x NuGet packages.

    275 GitHub stars~1.7k tokensUpdated 4 mo ago
    Auto-check passed

  • Skill Creator

    boshi-xixixi/TraeSkill

    当用户需要创建新 Skill 或更新现有 Skill 时使用。此 Skill 提供技能创建的完整工作流指导，包括需求分析、编写规范、工程化构建、质量评估和迭代优化。

    275 GitHub stars~3.9k tokensUpdated 4 mo ago
    Auto-check passed

  • Trae Project Setup

    boshi-xixixi/TraeSkill

    Trae 项目规范化配置专家。用于快速初始化 Trae 项目配置文件、生成项目规则、用户偏好设置和 Skill 模板。当用户需要：(1) 初始化新项目的 Trae 配置 (2) 生成 .trae 目录结构 (3) 创建 USERPREFERENCES.md 用户偏好文件 (4) 创建 projectrules.md 项目规则文件 (5) 创建新的 Skill 模板 时使用此 Skill。

    275 GitHub stars~708 tokensUpdated 4 mo ago
    Auto-check: notes

  • Web Coder

    boshi-xixixi/TraeSkill

    Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards.

    275 GitHub starsUsed in 1 repo~5.2k tokens
    Auto-check passed

Works with

Categories

Questions about Artifacts Builder

What does Artifacts Builder do?

当用户需要创建复杂的多组件 HTML Artifacts（包含 React、Tailwind CSS、shadcn/ui）时使用。此 Skill 用于需要状态管理、路由或 shadcn/ui 组件的复杂 Artifacts，不适用于简单的单文件 HTML/JSX。. Artifacts Builder is an agent skill from boshi-xixixi/TraeSkill.

When should I use Artifacts Builder?

Artifacts Builder fits situations like: tasks that involve HTML artifacts; tasks that involve React components.

How do I install Artifacts Builder in Claude Code?

Run `npx skills add boshi-xixixi/TraeSkill --skill artifacts-builder -a claude-code`. Or copy the skill folder (.trae/Skills/03_Developer_ArtifactsBuilder in boshi-xixixi/TraeSkill) into .claude/skills/artifacts-builder in your project. Claude Code loads it when a task matches its description.

How do I install Artifacts Builder in Codex?

Run `npx skills add boshi-xixixi/TraeSkill --skill artifacts-builder -a codex`. Or copy the skill folder (.trae/Skills/03_Developer_ArtifactsBuilder in boshi-xixixi/TraeSkill) into .agents/skills/artifacts-builder in your project. Codex loads it when a task matches its description.

Can I use 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 boshi-xixixi/TraeSkill --skill 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/artifacts-builder, .gemini/skills/artifacts-builder, .github/skills/artifacts-builder and .opencode/skills/artifacts-builder in your project.

What does Artifacts Builder need to run?

Going by SKILL.md and its folder, 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 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 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 Artifacts Builder use?

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 Artifacts Builder use?

About 768 tokens (SKILL.md is roughly 3.1k 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 Artifacts Builder?

Skills that share tags, products or a category with Artifacts Builder: Web Artifacts Builder (LeastBit/Claude_skills_zh-CN, 588 stars), Web Artifacts Builder (anthropics/skills, 180k stars), Creative Tim UI Blocks (creativetimofficial/ui, 12k stars) and Shadcn Tailwind UI (LiarMTTT/TavernWeave, 153 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Artifacts Builder?

boshi-xixixi (a GitHub user) maintains it in boshi-xixixi/TraeSkill, which has 275 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on May 12, 2026.

Source: boshi-xixixi/TraeSkill on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.