Skip to content
Content
Auto-invokedWhat is this?This plugin ships a FLOW.md router the engine fires, so the matching skill runs itself. No slash command to remember.Learn how →Skill

/web-artifacts-builder

Build complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts.

GuideBoost this skill
@nexu-ionexu-io@nexu-io
From plugin
open-design
96k164 skills1 command1 MCP
Install
$ npx -y skills add nexu-io/open-design --skill web-artifacts-builder --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • 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.

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 OpenDesign 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:

# Inspect the upstream README for exact paths
open https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder

Then ask the agent to invoke this skill by name (`web-artifacts-builder`) or with one of the trigger phrases listed in this skill's frontmatter.

Read it on GitHub ↗
Ships withopen-design

🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.

Get the whole plugin, auto-invoked
Stats
JavaScriptReactVueshadcn/uiHTML
+7 tags
CSSDockerGitHubAnthropicOpenAIMCPFigma
95,466
Stars
11,063
Forks
Active
Maintenance
TypeScript
Language
Apache-2.0
License
4d ago
Last commit
4mo ago
Created

Repo: nexu-io/open-design

In this plugin
164 skills1 command1 MCP
See everything inside

Other skills on open-design.

See all 164 skills in open-design