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

Web Artifacts Builder

by majiayu000 in 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…

MITAuto-check passedFrontend & Design

Install Web Artifacts Builder

skills CLI
$ npx skills add majiayu000/spellbook --skill web-artifacts-builder -a claude-code

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

GitHub CLI
$ gh skill install majiayu000/spellbook web-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/majiayu000/spellbook.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/web-artifacts-builder .claude/skills/web-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
web-artifacts-builder
GitHub stars
287
Token cost
~744 tokens
SKILL.md length
348 words
Files
3 (incl. scripts)
Skills in repo
97
Repo updated
First seen
Licence
MIT

At a glance

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…

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

What it does

Web Artifacts Builder is an agent skill from majiayu000/spellbook. Use when creating elaborate, multi-component claude.ai HTML artifacts with React, Tailwind CSS, shadcn/ui, state management, routing, or complex frontend structure; not for simple single-file HTML/JSX artifacts.

Its SKILL.md is about 740 tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including scripts (for example `scripts/bundle-artifact.sh` and `scripts/init-artifact.sh`).

It sits in Frontend & Design, covering HTML artifacts. It works with React, shadcn/ui, Tailwind CSS and Vite. The repository describes itself as: Cross-runtime skills for Claude Code, Codex, and multi-agent workflows. The licence is MIT.

When your agent uses it

  • Creating elaborate
  • Multi-component claude.ai HTML artifacts with React
  • State management
  • Complex frontend structure

Example prompts

  • “/web-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 ed52af7. 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 2 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 744 tokens when it runs. Until then it costs about 58 tokens; SKILL.md has 348 words of instructions outside code blocks.

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

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 majiayu000/spellbook at commit ed52af7, republished under its MIT licence (© majiayu000). 348 words, ~744 tokens.

Download SKILL.mdSave it as .claude/skills/web-artifacts-builder/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
web-artifacts-builder
description
Use when creating elaborate, multi-component claude.ai HTML artifacts with React, Tailwind CSS, shadcn/ui, state management, routing, or complex frontend structure; not for simple single-file HTML/JSX artifacts.
license
Complete terms in LICENSE.txt

Web Artifacts Builder Skill

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
  • ✅ Starter structure for shadcn/ui-style components
  • ✅ 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
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

© majiayu000, MIT. 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 2 other files (scripts) in skills/web-artifacts-builder of majiayu000/spellbook.

  • SKILL.md
  • scripts/bundle-artifact.sh
  • scripts/init-artifact.sh

Open the folder on GitHubat commit ed52af7

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.

Web Artifacts Builder compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Web Artifacts Builder this skillmajiayu000/spellbook287—~744Automated safety check: PassMIT
Web Artifacts BuilderLeastBit/Claude_skills_zh-CN588—~458Automated safety check: PassApache-2.0
Artifacts Builderboshi-xixixi/TraeSkill275—~768Automated 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
Tailwind V4 Shadcnever-works/ever-works1622 repos~3.8kAutomated 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

  • Artifacts Builder

    boshi-xixixi/TraeSkill

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

    275 GitHub stars~768 tokensUpdated 5 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

  • Tailwind V4 Shadcn

    ever-works/ever-works

    Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.

    162 GitHub starsUsed in 2 repos~3.8k tokens
    Frontend & DesignAuto-check passed

  • 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 5 days ago
    Frontend & DesignAuto-check passed

More from majiayu000/spellbook

All 97 skills in this repo

  • Skill Ecosystem Doctor

    majiayu000/spellbook

    Audits and repairs how coding-agent Skills are owned, copied and exposed across runtimes, from canonical sources to quarantine and retirement.

    287 GitHub stars~3k tokensUpdated yesterday
    Auto-check passed

  • AGENTS.md Scaffold

    majiayu000/spellbook

    Scans a repository for real evidence and proposes, or on request writes, a small stack of root and scoped AGENTS.md files with validation commands and generated-file boundaries.

    287 GitHub stars~1.5k tokensUpdated yesterday
    Auto-check passed

  • Product Demo Builder

    majiayu000/spellbook

    Plans, produces or diagnoses evidence-backed product demo videos: script, capture plan, pacing checks and verified final media built on real product behavior.

    287 GitHub stars~3.3k tokensUpdated yesterday
    Auto-check passed

  • Flowguard Task Guard

    majiayu000/spellbook

    Single entry point that routes long or ambiguous agent tasks, checks live state, bounds autonomous loops and leaves a resumable handoff.

    287 GitHub stars~2.1k tokensUpdated yesterday
    Auto-check passed

  • npm Supply Chain Check

    majiayu000/spellbook

    Scans a repository, its lockfiles and node_modules for known malicious npm package versions and install-time indicators, using a read-only Python scanner.

    287 GitHub stars~1.5k tokensUpdated yesterday
    Auto-check passed

  • Product Manager Toolkit

    majiayu000/spellbook

    Product management helpers: a RICE scoring script, an interview transcript analyzer and PRD templates for prioritizing features, synthesizing research and writing requirements.

    287 GitHub stars~2.2k tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Web Artifacts Builder

What does Web Artifacts Builder do?

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 is an agent skill from majiayu000/spellbook.ai HTML artifacts with React, Tailwind CSS, shadcn/ui, state management, routing, or complex frontend structure; not for simple single-file HTML/JSX artifacts.

When should I use Web Artifacts Builder?

Web Artifacts Builder fits situations like: creating elaborate; multi-component claude.ai HTML artifacts with React; state management; complex frontend structure.

How do I install Web Artifacts Builder in Claude Code?

Run `npx skills add majiayu000/spellbook --skill web-artifacts-builder -a claude-code`. Or copy the skill folder (skills/web-artifacts-builder in majiayu000/spellbook) 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 majiayu000/spellbook --skill web-artifacts-builder -a codex`. Or copy the skill folder (skills/web-artifacts-builder in majiayu000/spellbook) 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 majiayu000/spellbook --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 MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Web Artifacts Builder use?

About 744 tokens (SKILL.md is roughly 3k 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: Web Artifacts Builder (LeastBit/Claude_skills_zh-CN, 588 stars), Artifacts Builder (boshi-xixixi/TraeSkill, 275 stars), Web Artifacts Builder (anthropics/skills, 180k stars) and Creative Tim UI Blocks (creativetimofficial/ui, 12k 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?

majiayu000 (a GitHub user) maintains it in majiayu000/spellbook, which has 287 GitHub stars. The repository holds 97 skills in this directory. The repository was last updated on October 8, 2026.

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