/web-artifacts-builder
Build complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts.
One skill from open-design.
shell
$ npx -y skills add nexu-io/open-design --skill web-artifacts-builder --agent claude-codeInstalls just this skill. Get the whole plugin for auto-invocation.
How it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfClaude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/web-artifacts-builder
Context preview
The summary Claude sees to decide when to auto-load this skill.
Build complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts.
Stats
Stars80,924
Forks9,350
LanguageTypeScript
LicenseApache-2.0
Ships with open-design
SKILL.md
web-artifacts-builder.SKILL.md
--- name: web-artifacts-builder description: | Build complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts. triggers: - "web artifacts" - "tailwind artifact" - "react artifact" - "anthropic artifact" od: mode: prototype category: web-artifacts upstream: "https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder" --- # web-artifacts-builder > Curated from Anthropic's official skills repository. ## What it does Build complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts. ## Source - Upstream: https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder - Category: `web-artifacts` ## How to use This catalogue entry advertises the skill in Open Design so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory:
