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

artifacts-builder — Claude Code skill: what it does, how to install

A skill designed for generating multi-component claude.ai HTML artifacts. It uses React and Tailwind CSS alongside shadcn/ui components.

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

What artifacts-builder does

This skill provides agents with instructions to generate complex claude.ai web artifacts. The workflow focuses on React. It pairs the framework with Tailwind CSS and shadcn/ui components so the agent can build multi-component layouts during planning.

The entry originates from the ComposioHQ awesome-claude-skills repository and holds prototype status. Because this catalogue item only advertises the capability, full upstream assets and helper scripts must be installed separately from the source repository. That makes checking the upstream bundle necessary before generating complex components.

What it helps with

  • generate multi-component claude.ai HTML artifacts
  • scaffold React interfaces with Tailwind CSS styling
  • integrate shadcn/ui components into generated web prototypes

Example prompts for the agent

  • Build a multi component artifact using React.
  • Use artifacts-builder to design a UI dashboard with shadcn/ui.
  • Generate an html artifact for claude.ai with interactive components.

How to install artifacts-builder

1Skills CLI (Vercel)

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

2Manually: put the files in place

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

Copy the whole skill folder; for one project use .claude/skills/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

Similar

react-native-best-practices callstackincubator Provides React Native performance guidelines based on Callstack practices. It helps agents diagnose FPS drops, memory leaks, and large bundles. Claude Code CX Codex Cursor +1 30,100installs 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 gsap-framer-scroll-animation official Utkarsh Patrikar This skill helps GitHub Copilot build scroll-driven motion with GSAP ScrollTrigger and Framer Motion. Use it for vanilla JS, React, or Next.js work. GitHub Copilot 3,900installs magic-ui magicuidesign The magic-ui skill teaches Claude Code to work with Magic UI components in React and Next.js: select animations, install via shadcn registry, and check accessibility. Claude Code CX Codex Cursor +1 1,200installs build-zoom-contact-center-app official anthropics Reference skill for Zoom Contact Center architecture. It guides integrations across desktop client apps, web embeds, and native iOS or Android SDKs. Claude Code CX Codex Cursor +1 2,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

Questions about artifacts-builder

How to install artifacts-builder in Claude Code?

Run npx skills add nexu-io/open-design --skill artifacts-builder -a claude-code. You can also place the skill file directly at ~/.claude/skills/artifacts-builder/SKILL.md.

What does artifacts-builder do?

It guides the agent in creating multi-component claude.ai HTML artifacts using modern frontend technologies like React, Tailwind CSS, and shadcn/ui.

Where do the upstream scripts come from?

The skill references ComposioHQ's awesome-claude-skills repository. To run original workflows and scripts, inspect and install the bundle directly from the upstream project.

Source text

SKILL.md · Apache-2.0 
---
name: artifacts-builder
description: |
  Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).
triggers:
  - "artifacts builder"
  - "html artifact"
  - "multi component artifact"
  - "react artifact"
od:
  mode: prototype
  category: web-artifacts
  upstream: "https://github.com/ComposioHQ/awesome-claude-skills/tree/master/artifacts-builder"
---

# artifacts-builder

> Curated from ComposioHQ awesome-claude-skills.

## What it does

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).

## Source

- Upstream: https://github.com/ComposioHQ/awesome-claude-skills/tree/master/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/ComposioHQ/awesome-claude-skills/tree/master/artifacts-builder
```

Then ask the agent to invoke this skill by name (`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