Skip to content
cccskills
FreePublished on GitHubEnglish overview

artifacts-builder

Build complex claude.ai artifacts with React, Tailwind CSS, and shadcn/ui. Create interfaces with multiple components, state management for changing data, and routing between views, then package the app into one self-contained HTML file for sharing.

OriginalShow the original description

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

ComposioHQ/awesome-claude-skills
AI rating90/ 100See how to install

Good for

  • Creating interfaces with multiple components
  • Building artifacts with changing data and multiple views
  • Sharing a React app as a single HTML file

Overview

What it does

Build interfaces made up of multiple components using React and TypeScript, then package them into an HTML file for sharing in Claude conversations. The skill suits projects that need state management to retain data as people interact, or routing to switch between views. The initial setup includes Tailwind CSS and more than 40 shadcn/ui components.

When it helps

Use it when you want an interface that combines several interactions, such as entering information and switching what is displayed. A shared workflow covers preparing the development project and generating bundle.html, with JavaScript, CSS, and dependencies embedded in the file.

Example requests

  • “Create an artifact that retains entered information and lets me switch between views.”
  • “Build an interface with shadcn/ui and package it as a single HTML file for sharing.”

Notes

The setup supports Node 18 and later. It is intended for complex interfaces rather than simple, single-file HTML or JSX. Bundling requires an index.html file in the project root. Testing and visual checks are optional. License details are provided in LICENSE.txt.

This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.

Objective evaluation

AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.

Clear instructionsIs it clear when to use it and what it does?
AGoodThe description identifies complex interfaces needing state management or routing and specifies a single HTML file as the result.
Concrete stepsAre steps, inputs, outputs, and examples spelled out?
AGoodInitialization and bundling commands, editing steps, and the output filename are provided.
SafetyAre sending data, deleting files, and running commands disclosed?
BPartly lackingBundling explicitly installs dependencies and creates configuration files, but effects on existing configuration are unspecified.
Easy setupDoes it need few tools or API keys, and are they documented?
AGoodNode 18+ compatibility and an initialization command that prepares the required project configuration are documented.

The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 21, 2026. Treat it as a guide and read the original before installing.

Disagree? Request a re-evaluation

Tell us which point is wrong and why. No login needed. We will check it against the SKILL.md, redo the evaluation, and show the result here.

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

Files included (5)

  • SKILL.md3.0 KB
  • LICENSE.txt11.1 KB
  • scripts/bundle-artifact.sh1.5 KB
  • scripts/init-artifact.sh9.7 KB
  • scripts/shadcn-components.tar.gz19.5 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Artifacts Builder

To build powerful frontend claude.ai artifacts, follow these steps:

  1. Initialize the frontend repo using scripts/init-artifact.sh
  2. Develop your artifact by editing the generated code
  3. Bundle all code into a single HTML file using scripts/bundle-artifact.sh
  4. Display artifact to user
  5. (Optional) Test the artifact

Stack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui

Design & Style Guidelines

VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.

Quick Start

Step 1: Initialize Project

Run the initialization script to create a new React project:

bash scripts/init-artifact.sh <project-name>
cd <project-name>

This creates a fully configured project with:

  • ✅ React + TypeScript (via Vite)
  • ✅ Tailwind CSS 3.4.1 with shadcn/ui theming system
  • ✅ Path aliases (@/) configured
  • ✅ 40+ shadcn/ui components pre-installed
  • ✅ All Radix UI dependencies included
  • ✅ Parcel configured for bundling (via .parcelrc)
  • ✅ Node 18+ compatibility (auto-detects and pins Vite version)

Step 2: Develop Your Artifact

To build the artifact, edit the generated files. See Common Development Tasks below for guidance.

Step 3: Bundle to Single HTML File

To bundle the React app into a single HTML artifact:

bash scripts/bundle-artifact.sh

This creates bundle.html - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.

Requirements: Your project must have an index.html in the root directory.

What the script does:

  • Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
  • Creates .parcelrc config with path alias support
  • Builds with Parcel (no source maps)
  • Inlines all assets into single HTML using html-inline

Step 4: Share Artifact with User

Finally, share the bundled HTML file in conversation with the user so they can view it as an artifact.

Step 5: Testing/Visualizing the Artifact (Optional)

Note: This is a completely optional step. Only perform if necessary or requested.

To test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.

Reference

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

-21risk-automation

FreeSummaryAI rating 90

Automate 21risk operations through Rube MCP, a connection for agent tools. The skill discovers available actions, checks the service connection, and uses current input requirements to carry out requested tasks.

  • Find available 21risk actions
  • Run tasks after checking the service connection
  • Process multiple operations in bulk
ComposioHQ/awesome-claude-skills77.6KUpdated Sep 18, 2026

-2chat-automation

FreeSummaryAI rating 90

Automate supported 2chat tasks through Rube MCP and Composio. The skill finds available tools, checks the service connection, and uses current input requirements to carry out the requested operations.

  • Find tools for a 2chat task
  • Check the 2chat connection before running tasks
  • Run multiple supported operations together
ComposioHQ/awesome-claude-skills77.6KUpdated Sep 18, 2026

ably-automation

FreeSummaryAI rating 90

Automate Ably operations through Rube MCP and Composio. The skill discovers tools for your task, checks current input requirements, verifies an active connection, and guides execution of single operations or batches.

  • Discover available tools for an Ably task
  • Check the Ably connection before execution
  • Run multiple Ably operations together
ComposioHQ/awesome-claude-skills77.6KUpdated Sep 18, 2026

abstract-automation

FreeSummaryAI rating 80

Automate Abstract tasks using Rube MCP, a connection for agent tools. The skill searches for available operations, confirms an active service connection, and runs actions according to their current input requirements.

  • Discovering supported Abstract operations
  • Executing Abstract tasks through an agent
  • Fetching all pages of a tool response
ComposioHQ/awesome-claude-skills77.6KUpdated Sep 18, 2026

abuselpdb-automation

FreeSummaryAI rating 90

Automate Abuselpdb operations through Rube MCP, a connection for agent tools. Discover available actions and their required inputs, verify the service connection, and execute tasks using the current tool definitions.

  • Finding available Abuselpdb actions
  • Checking the connection before running tasks
  • Automating repeated Abuselpdb operations
ComposioHQ/awesome-claude-skills77.6KUpdated Sep 18, 2026

abyssale-automation

FreeSummaryAI rating 80

Automate Abyssale operations through Rube MCP, a connection for agent tools. The skill discovers available actions and their current input requirements, checks the service connection, and executes the tools returned by the search.

  • Discovering available Abyssale operations
  • Checking the Abyssale connection before execution
  • Running Abyssale operations through an agent
ComposioHQ/awesome-claude-skills77.6KUpdated Sep 18, 2026

See all skills by ComposioHQ

Report a problem with this skill