nexu-io avatar

Artifacts Builder

This pulls together React, Tailwind CSS, and shadcn/ui to help you build multi-component HTML artifacts for Claude.ai instead of wrestling with single-file limitations. You'd reach for it when you need something more elaborate than a basic artifact, like a dashboard with multiple interactive widgets or a multi-page app prototype. It's part of ComposioHQ's curated collection, though the catalog entry here is mostly a pointer to the upstream GitHub repo where the actual tooling lives. The real value is having a structured way to compose complex artifacts rather than jamming everything into one messy component, but you'll need to grab the full bundle from the source to get the templates and scripts that make it work.

skills.sh installs
2.9K
GitHub stars
106.9K
last updated
Aug 21, 2026

Install

$ npx -y skills add nexu-io/open-design --skill artifacts-builder --agent claude-code

Installs into .claude/skills of the current project.

Files

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

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/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.

Sponsors

Details

Repository
github.com/nexu-io/open-design
Categories
Frontend Development, Design & UI/UX
First seen
Jun 3, 2026

More from nexu-io/open-design

All 217
1nexu-io avatardigits-fintech-swiss-templatenexu-io/open-designSwiss-grid fintech deck template in black / warm paper / neon-lime contrast. Use when users ask for premium data-story slides with strict modular layout, bold n2.9Kskills.sh installs
2nexu-io avatarswiss-user-research-video-templatenexu-io/open-designSwiss-style user-research narrative template in warm-paper editorial aesthetics. Use when users ask for a premium research deck or story-first live artifact wit2.9Kskills.sh installs
3affaan-m avatarmotion-uiaffaan-m/eccProduction-ready UI motion system for React/Next.js. Use when implementing animations, transitions, or motion patterns.2.8Kskills.sh installs
4pproenca avataremilkowal-animationspproenca/dot-skillsEmil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers o2.8Kskills.sh installs
5nexu-io avatararticle-magazinenexu-io/open-designHuashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.2.8Kskills.sh installs
6nexu-io avatardeck-open-slide-canvasnexu-io/open-designLocked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template.2.8Kskills.sh installs