# web-artifacts-builder

> Claude/Codex skill by [@anthropics](https://omgskills.com/library/anthropics/index.md) · 183k stars · Updated 2026-10-09

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.

Tags: agent-skills

## Install

```sh
git clone https://github.com/anthropics/skills /tmp/skills && ln -s /tmp/skills/skills/web-artifacts-builder ~/.claude/skills/web-artifacts-builder
```

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

## Links

- HTML page: https://omgskills.com/library/anthropics/skills/web-artifacts-builder/
- GitHub: https://github.com/anthropics/skills
- Author: [@anthropics](https://omgskills.com/library/anthropics/index.md)

## More from this repo

- [pptx](https://omgskills.com/library/anthropics/skills/pptx/index.md) — Use this skill any time a .pptx or .potx file is involved in any way — as input, output, or both.
   - [@anthropics](https://omgskills.com/library/anthropics/index.md) · 194k stars
- [academy-guide](https://omgskills.com/library/anthropics/skills/academy-guide/index.md) — Stop and check this skill before finishing any reply to a question about how to use Claude or a Claude product — it...
   - [@anthropics](https://omgskills.com/library/anthropics/index.md) · 183k stars
- [algorithmic-art](https://omgskills.com/library/anthropics/skills/algorithmic-art/index.md) — Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration.
   - [@anthropics](https://omgskills.com/library/anthropics/index.md) · 183k stars