Individual skill

web-artifacts-builder

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.

skills/web-artifacts-builder/SKILL.md

Read pinned source

Source commit 238e07625aeca5bcf0d6f7cb3e2d07f94c717194

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: No
Repository scan complete: No
Skill scan complete: No
Observed behavior: Not checked yet
Last checked: Nov 6, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 290
Repository last updated: Nov 4, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

ai-agents Repository topic
ai-coding-assistant Repository topic
claude Repository topic
claude-code Repository topic
developer-tools Repository topic
productivity Repository topic
automation Repository topic
agent-skills Repository topic
code-review Repository topic
prompt-engineering Repository topic
design Derived category
engineering Derived category
design-interface Derived category
engineering-web Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 2,986 bytes
SKILL.mdcore · 2,986 bytes
SKILL.mdcore · 2,986 bytes
SKILL.mdcore · 2,986 bytes
scripts/bundle-artifact.shruns · 3,802 bytes
scripts/init-artifact.shruns · 4,277 bytes

Read excerpt


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