Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

web-artifacts-builder · nexu-io — Claude Code skill: building artifacts

Builds HTML artifacts for claude.ai with React and Tailwind — Anthropic's reference workflow for embeddable interfaces.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add nexu-io/open-design --skill web-artifacts-builder -a claude-code
Open on GitHub

What web-artifacts-builder does

The skill handles complex HTML artifact creation with React components and Tailwind styles, formatted for claude.ai. Inside: Anthropic's reference workflow that demonstrates how to build interactive embeddable interfaces.

The OpenDesign catalogue entry helps the agent discover the skill during planning. The full upstream workflow with original scripts and assets lives in the Anthropic repository — if you need every step and asset, install from there.

The agent responds to triggers like "web artifacts", "react artifact" or "tailwind artifact". Output: a ready artifact you can embed in claude.ai or use standalone.

What it helps with

  • build an HTML artifact for claude.ai
  • create a React component with Tailwind styles
  • embed an interactive interface in claude.ai
  • follow Anthropic's reference workflow

Example prompts for the agent

  • build a web artifact with React and Tailwind
  • create a claude.ai artifact with an interactive form
  • make a react artifact with a chart and filters

How to install web-artifacts-builder

1Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill web-artifacts-builder -a claude-code

2Manually: put the files in place

~/.claude/skills/web-artifacts-builder/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/web-artifacts-builder/

From the same set39

The whole set →
ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs threejs nexu-io Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js. Claude Code CX Codex Cursor +1 3,400installs creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. Claude Code CX Codex Cursor +1 3,400installs design-brief nexu-io Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs apple-hig nexu-io Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning. Claude Code CX Codex Cursor +1 3,200installs hatch-pet nexu-io Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions. Claude Code CX Codex Cursor +1 3,100installs d3-visualization nexu-io This skill teaches the agent to create interactive D3.js visualizations. Use it to generate charts for dashboards, reports, and data-rich prototypes. Claude Code CX Codex Cursor +1 3,100installs

Other versions of web-artifacts-builder

web-artifacts-builder official anthropics This skill builds complex claude.ai HTML artifacts with React, Tailwind CSS, and shadcn/ui. Use it for interfaces with state or routing. Claude Code Claude.ai 112,122installs

Similar

expo-data-fetching expo Configures data fetching, caching, and screen states in Expo apps. Guides network calls with expo/fetch and TanStack Query. Claude Code CX Codex Cursor +1 27,200installs playwright-skill lackeyjb Write and run Playwright scripts directly in your IDE. Auto-detects dev servers, takes screenshots, checks responsive layouts, tests login flows, and validates web functionality. Claude Code CX Codex Cursor +1 6,900installs angular-migration Seth Hobson Helps move AngularJS applications to Angular through a full rewrite or staged migration. Use it for hybrid apps, component conversion, and dependency injection changes. Claude Code CX Codex Cursor 10,900installs screen-reader-testing Seth Hobson This skill guides screen reader testing for web apps with VoiceOver, NVDA, and JAWS. Use it to debug ARIA, forms, navigation, and dynamic announcements. Claude Code CX Codex Cursor 10,700installs threejs-fundamentals CloudAI-X Sets up Three.js r186 scenes, cameras, renderers, and animation loops for WebGL or WebGPU with TSL. Claude Code CX Codex Cursor +1 17,100installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. Claude Code 986,201installs

Questions about web-artifacts-builder

How to install web-artifacts-builder in Claude Code?

Run npx skills add nexu-io/open-design --skill web-artifacts-builder -a claude-code. The skill will land in ~/.claude/skills/web-artifacts-builder/SKILL.md.

What does web-artifacts-builder do?

It builds HTML artifacts for claude.ai with React and Tailwind — Anthropic's reference workflow that shows how to build embeddable interfaces.

How does the catalogue entry differ from the upstream version?

The OpenDesign entry helps the agent find the skill during planning. The full workflow with original scripts and assets lives in the Anthropic repository — if you need the complete chain, install from there.

Source text

SKILL.md · Apache-2.0 
---
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:

```bash
# 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.

© nexu-io · Apache-2.0 · nexu-io/open-design

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor