New: 97,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 sickn33 in sickn33/agentic-awesome-skills

To build powerful frontend claude.ai artifacts, follow these steps:

Apache-2.0Auto-check passedFrontend & Design

Install Web Artifacts Builder

skills CLI
$ npx skills add sickn33/agentic-awesome-skills --skill web-artifacts-builder -a claude-code

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

GitHub CLI
$ gh skill install sickn33/agentic-awesome-skills 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/sickn33/agentic-awesome-skills.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
47k
Used in
3 other repos
Token cost
~824 tokens
SKILL.md length
413 words
Files
5 (incl. scripts)
Skills in repo
1,394
Repo updated
First seen
Licence
Apache-2.0

At a glance

To build powerful frontend claude.ai artifacts, follow these steps:

  • 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, Reference and When to Use, plus 1 more section
  • Runs Shell scripts from its folder; calls bash

What it does

Web Artifacts Builder is an agent skill from sickn33/agentic-awesome-skills. To build powerful frontend claude.ai artifacts, follow these steps:

Its SKILL.md is about 820 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. It works with React, Vite and shadcn/ui. The repository describes itself as: AAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,400+ agentic skills. Includes… The licence is Apache-2.0.

When your agent uses it

  • Tasks that involve HTML artifacts

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 1e53ce2. 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 824 tokens when it runs. Until then it costs about 22 tokens; SKILL.md has 413 words of instructions outside code blocks.

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

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 sickn33/agentic-awesome-skills at commit 1e53ce2, republished under its Apache-2.0 licence (© sickn33). 413 words, ~824 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
To build powerful frontend claude.ai artifacts, follow these steps:
risk
critical
source
community
date_added
2026-02-27

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

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
Show full SKILL.md (161 more words)Show less
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

When to Use

This skill is applicable to execute the workflow or actions described in the overview.

Limitations

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

© sickn33, 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 sickn33/agentic-awesome-skills.

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

Open the folder on GitHubat commit 1e53ce2

Used in 3 other repositories

We found 12 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 3 other GitHub owners. This page covers the copy in sickn33/agentic-awesome-skills, which our catalogue first saw on October 7, 2026.

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 skillsickn33/agentic-awesome-skills47k3 repos~824Automated safety check: PassApache-2.0
Web Artifacts BuilderLeastBit/Claude_skills_zh-CN588—~458Automated safety check: PassApache-2.0
Artifacts Builderboshi-xixixi/TraeSkill274—~768Automated safety check: PassApache-2.0
Web Artifacts Buildermajiayu000/spellbook286—~744Automated safety check: PassMIT
Web Artifacts Builderanthropics/skills180k40 repos~769Automated safety check: PassApache-2.0
Creative Tim UI Blockscreativetimofficial/ui12k—~2.1kAutomated safety check: NotesMIT

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。

    274 GitHub stars~768 tokensUpdated 4 mo 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…

    286 GitHub stars~744 tokensUpdated today
    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 40 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.

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

More from sickn33/agentic-awesome-skills

All 1,394 skills in this repo

  • Liuguang Banlan UI

    sickn33/agentic-awesome-skills

    Implements an interface in one of two named color modes, iridescent white or colorful black, from a parameterized starter that reports measured color intensity.

    47k GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed

  • User Thoughts Memory

    sickn33/agentic-awesome-skills

    Saves a user's project decisions, rules and preferences into a project-local mdbase so later sessions and other agents can recover the intent.

    47k GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed

  • Using LWC Memory and Graphs

    sickn33/agentic-awesome-skills

    Keeps project decisions, research and verified results available across coding-agent sessions through LWC memory, a document Wiki graph and a CodeGraph code index.

    47k GitHub starsUsed in 1 repo~2k tokens
    Auto-check passed

  • Find Complementary Founders

    sickn33/agentic-awesome-skills

    Guides an agent through assessing its own owner for cofounder fit, publishing an approved profile, and ranking complementary profiles other agents published for their owners.

    47k GitHub starsUsed in 1 repo~4.8k tokens
    Auto-check passed

  • Whatsapp Cloud API

    sickn33/agentic-awesome-skills

    Integracao com WhatsApp Business Cloud API (Meta). An agent skill from sickn33/agentic-awesome-skills.

    47k GitHub starsUsed in 2 repos~4.5k tokens
    Auto-check passed

  • Cline Pilot

    sickn33/agentic-awesome-skills

    Acts as a proxy for the Cline CLI, dispatching coding tasks one at a time, monitoring runs by hard evidence, relaying decisions to you and learning per-project preferences.

    47k GitHub starsUsed in 1 repo~4.6k tokens
    Auto-check passed

Works with

Categories

Questions about Web Artifacts Builder

What does Web Artifacts Builder do?

To build powerful frontend claude.ai artifacts, follow these steps:. Web Artifacts Builder is an agent skill from sickn33/agentic-awesome-skills.

When should I use Web Artifacts Builder?

Web Artifacts Builder fits situations like: tasks that involve HTML artifacts.

How do I install Web Artifacts Builder in Claude Code?

Run `npx skills add sickn33/agentic-awesome-skills --skill web-artifacts-builder -a claude-code`. Or copy the skill folder (skills/web-artifacts-builder in sickn33/agentic-awesome-skills) 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 sickn33/agentic-awesome-skills --skill web-artifacts-builder -a codex`. Or copy the skill folder (skills/web-artifacts-builder in sickn33/agentic-awesome-skills) 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 sickn33/agentic-awesome-skills --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 824 tokens (SKILL.md is roughly 3.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, 274 stars), Web Artifacts Builder (majiayu000/spellbook, 286 stars) and Web Artifacts Builder (anthropics/skills, 180k 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?

sickn33 (a GitHub user) maintains it in sickn33/agentic-awesome-skills, which has 47,304 GitHub stars. The repository holds 1,394 skills in this directory. The repository was last updated on October 6, 2026.

Source: sickn33/agentic-awesome-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.