The web-artifacts-builder skill, reviewed

What it tells the agent to do

1. Run bash scripts/init-artifact.sh <project-name> and cd into the new project
2. Edit the generated React files to build the artifact, avoiding 'AI slop' styling
3. Run bash scripts/bundle-artifact.sh to inline everything into bundle.html
4. Share bundle.html with the user as an artifact
5. Optionally test it with Playwright, Puppeteer or other tools, but only after presenting it or if asked

Lines worth reading

Straight from the file, with why each one matters.

1. line 3not for simple single-file HTML/JSX artifacts

   A description that says when not to use it. That is rare and helps the agent route requests well.

2. line 20avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font

   A blunt, specific list of the default AI look. Far more usable than 'make it look good'.

3. line 70avoid testing the artifact upfront as it adds latency

   This puts speed ahead of verification on purpose: ship first, test if issues arise. Bold, and debatable.

4. line 43See **Common Development Tasks** below for guidance.

   There is no such section below. Step 2, the actual work, points at nothing.

Watch out for

• Medium

  The agent runs two bash scripts whose contents could not be reviewed here. What they actually do rests on the file's description alone.

  line 28bash scripts/init-artifact.sh <project-name>

• Low

  The bundle script installs npm packages from the registry, so it needs network access and pulls in third-party code.

  line 57Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)

The scorecard

• TriggerSays when to use it
  8/10

  Says what, when, and when not. 'Suite of tools' is a vague opener.

• FocusOne clear job
  8/10

  One job: build and bundle rich artifacts. Clear scope.

• LeanLight to load
  9/10

  About 830 tokens, with the work pushed into scripts.

• ConcreteSteps you can follow
  6/10

  Exact commands, but step 2 is vague and its guidance section is missing.

• SafeSafe to run
  7/10

  Nothing destructive in view. Unseen scripts install npm packages.

How it could be better

1. Add the missing Common Development Tasks section

   Step 2 points to guidance that does not exist, so the core editing work has no direction.

   Add

   ## Common Development Tasks
   
   - Add a page: create `src/pages/<Name>.tsx` and register it in `<router file>`.
   - Use a component: `import { Button } from "@/components/ui/button"`.
   - Shared state: <how state is managed in the template>.

   Copy

2. Say how to check the bundle worked

   There is no done-check, so a broken bundle could be shared without anyone noticing.

   Add

   After bundling, confirm `bundle.html` exists and is non-empty, and that it contains no external `<script src=` or `<link href=` references except <allowed CDNs>.

   Copy

3. Disclose network and install side effects

   The user should know that both scripts fetch and install packages before running them.

   Add

   Note: `init-artifact.sh` and `bundle-artifact.sh` install npm packages and need network access. <list what init-artifact.sh installs and where>.

   Copy

4. Lead the description with the action

   'Suite of tools' wastes the first words. Requests sound like 'build a React artifact'.

   Add

   description: Builds complex claude.ai HTML artifacts with React, Tailwind CSS and shadcn/ui, bundled into a single HTML file. Use when an artifact needs state management, routing, multiple components or shadcn/ui - not for simple single-file HTML/JSX artifacts.

   Copy