Web Artifacts Builder
Build complex, multi-component web UIs with React, Tailwind CSS, and shadcn/ui — bundled into a single portable HTML file.
What it does
- Scaffolds React + TypeScript + Tailwind + shadcn/ui projects
- Builds feature-rich UIs with state management and component libraries
- Bundles everything into one self-contained HTML artifact
- Guides design choices to avoid generic "AI slop" aesthetics
Installation
mog install mogteam/anthropic-web-artifacts-builder
Example prompts
- "Build a data dashboard with charts and filters"
- "Create a Kanban board with drag-and-drop"
- "Make a multi-step form wizard with validation"
- "Build a settings page with tabs and toggles"
Source
Sourced from anthropics/skills under the Apache 2.0 license. Copyright Anthropic.
Releases
v1.0.0latest
3 files2/24/2026
For AI Assistants
After installing, your AI assistant needs a pointer to the skill file. Use the agent card below or the --wire flag.
Install + auto-wire
mog install mogteam/anthropic-web-artifacts-builder --target cursor --wireCreates .cursor/rules/anthropic-web-artifacts-builder.mdc pointing to the skill.
Agent card
## Anthropic Web Artifacts Builder Build elaborate multi-component HTML artifacts using React, Tailwind CSS, and shadcn/ui. Use for complex web UIs requiring state management, routing, or a component library — not simple single-file HTML. Bundles everything into one portable HTML file. - **Install**: `mog install mogteam/anthropic-web-artifacts-builder --target cursor` - **Type**: skill - **Path after install**: `.cursor/skills/anthropic-web-artifacts-builder/SKILL.md` - **Targets**: cursor, claude-code, codex, generic When editing, read and follow @.cursor/skills/anthropic-web-artifacts-builder/SKILL.md
Paste into AGENTS.md, .cursor/rules, or your agent's instructions.
Install paths by target
cursor.cursor/skills/anthropic-web-artifacts-builder/SKILL.md
claude-code.claude/skills/anthropic-web-artifacts-builder/SKILL.md
codexmog_modules/anthropic-web-artifacts-builder/SKILL.md
genericmog_modules/anthropic-web-artifacts-builder/SKILL.md
Community Rating
No ratings yet.
skillcursorclaude-codecodexgeneric
Anthropic Web Artifacts Builder
Build elaborate multi-component HTML artifacts using React, Tailwind CSS, and shadcn/ui. Use for complex web UIs requiring state management, routing, or a component library — not simple single-file HTML. Bundles everything into one portable HTML file.
Free
Excellentmog rating(4.3)
0 installs
v1.0.0
mog install mogteam/anthropic-web-artifacts-builderSource
Anthropic
github.com/anthropics/skills75k
This package is sourced from the above repository and distributed on mog under its original license.
M
mog.md Team
@mogteam
Official curated skills and prompt templates from the mog.md team.