Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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.
.claude/skills/majiayu000-web-artifacts-builder/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-10 | ✗→✓ | ▲ Improved | 37% | 0% |
| case-11 | ✗→✓ | ▲ Improved | -28% | 0% |
| case-13 | ✗→✓ | ▲ Improved | -43% | 0% |
| case-16 | ✗→✓ | ▲ Improved | -17% | 0% |
| case-19 | ✗→✓ | ▲ Improved | -56% | 0% |
To build powerful frontend claude.ai artifacts, follow these steps:
scripts/init-artifact.shscripts/bundle-artifact.shStack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
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.
Run the initialization script to create a new React project:
bashbash scripts/init-artifact.sh <project-name> cd <project-name>
This creates a fully configured project with:
@/) configuredTo build the artifact, edit the generated files. See Common Development Tasks below for guidance.
To bundle the React app into a single HTML artifact:
bashbash 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:
.parcelrc config with path alias supportFinally, share the bundled HTML file in conversation with the user so they can view it as an artifact.
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.
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-18 | pass→pass | 12,963 | 2,154 | -83% | 1 | 1 | 0% | 1,957 | 963 | -51% | 0 | 0 | — |
case-01 | fail→fail | 31,057 | 16,538 | -47% | 1 | 1 | 0% | 6,187 | 1,185 | -81% | 0 | 0 | — |
case-02 | fail→fail | 30,746 | 36,252 | +18% | 1 | 1 | 0% | 6,187 | 933 | -85% | 0 | 0 | — |
case-03 | fail→fail | 29,579 | 9,528 | -68% | 1 | 1 | 0% | 6,179 | 1,131 | -82% | 0 | 0 | — |
case-04 | pass→fail | 17,641 | 11,054 | -37% | 1 | 1 | 0% | 3,556 | 1,176 | -67% | 0 | 0 | — |
case-05 | pass→fail | 17,057 | 10,969 | -36% | 1 | 1 | 0% | 3,298 | 1,250 | -62% | 0 | 0 | — |
case-06 | pass→pass | 18,210 | 16,679 | -8% | 1 | 1 | 0% | 3,374 | 3,893 | +15% | 0 | 0 | — |
case-07 | fail→fail | 16,362 | 12,549 | -23% | 1 | 1 | 0% | 2,526 | 1,148 | -55% | 0 | 0 | — |
case-08 | pass→fail | 14,409 | 7,672 | -47% | 1 | 1 | 0% | 2,102 | 1,093 | -48% | 0 | 0 | — |
case-09 | pass→pass | 6,348 | 1,866 | -71% | 1 | 1 | 0% | 1,020 | 854 | -16% | 0 | 0 | — |
case-10 | fail→pass | 4,632 | 1,713 | -63% | 1 | 1 | 0% | 655 | 897 | +37% | 0 | 0 | — |
case-11 | fail→pass | 7,499 | 1,534 | -80% | 1 | 1 | 0% | 1,157 | 836 | -28% | 0 | 0 | — |
case-12 | pass→pass | 3,095 | 1,748 | -44% | 1 | 1 | 0% | 441 | 850 | +93% | 0 | 0 | — |
case-13 | fail→pass | 10,605 | 2,195 | -79% | 1 | 1 | 0% | 1,730 | 978 | -43% | 0 | 0 | — |
case-14 | pass→pass | 10,536 | 2,662 | -75% | 1 | 1 | 0% | 1,516 | 1,006 | -34% | 0 | 0 | — |
case-15 | pass→pass | 16,199 | 8,991 | -44% | 1 | 1 | 0% | 2,475 | 1,963 | -21% | 0 | 0 | — |
case-16 | fail→pass | 11,593 | 6,587 | -43% | 1 | 1 | 0% | 2,179 | 1,809 | -17% | 0 | 0 | — |
case-17 | pass→pass | 6,962 | 1,985 | -71% | 1 | 1 | 0% | 1,013 | 878 | -13% | 0 | 0 | — |
case-19 | fail→pass | 15,583 | 3,183 | -80% | 1 | 1 | 0% | 2,372 | 1,054 | -56% | 0 | 0 | — |
case-20 | pass→pass | 6,857 | 1,404 | -80% | 1 | 1 | 0% | 976 | 838 | -14% | 0 | 0 | — |
case-21 | fail→pass | 12,269 | 1,496 | -88% | 1 | 1 | 0% | 2,122 | 851 | -60% | 0 | 0 | — |
case-22 | pass→pass | 7,045 | 3,536 | -50% | 1 | 1 | 0% | 1,029 | 1,160 | +13% | 0 | 0 | — |
case-23 | fail→pass | 15,351 | 3,444 | -78% | 1 | 1 | 0% | 2,171 | 1,154 | -47% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 23 cases were attempted, and 16 counted toward the lift figure. The other 7 produced results that are not comparable between the two arms, so they are excluded from the headline rather than averaged into it. The headline lift of +17 percentage points is the difference between those two pass rates over the 16 comparable cases. 6 cases got worse with the skill loaded, and they are included in that figure.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.