web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Install
With your agent
Install OMGSkills skill "anthropics/skills:web-artifacts-builder" into this agent's normal skills directory: call the OMGSkills MCP get_install_plan tool for your agent and run the script it returns (it installs only the pinned commit and verifies SKILL.md), and stop if MCP or the pin is unavailable. Do not overwrite or change existing skills without asking me.
Manual command
git clone https://github.com/anthropics/skills /tmp/skills && ln -s /tmp/skills/skills/web-artifacts-builder ~/.claude/skills/web-artifacts-builderFrom README
Web Artifacts Builder To build powerful frontend claude.ai artifacts, follow these steps: Initialize the frontend repo using scripts/init-artifact.sh Develop your artifact by editing the generated code Bundle all code into a single HTML file using scripts/bundle-artifact.sh Display artifact to user (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.
More from this repo
pptx
Use this skill any time a .pptx or .potx file is involved in any way — as input, output, or both.
academy-guide
Stop and check this skill before finishing any reply to a question about how to use Claude or a Claude product — it...
algorithmic-art
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration.