skills.rest
AnderHonorato
AnderHonoratoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-artifacts-builder

Creates and bundles React, Tailwind, and shadcn/ui projects into single HTML artifacts.

Updated Aug 28, 2026
Search Tags:#frontend#react#shadcn/ui#tailwind css#vite#html artifact#bundling
One-click install
npx skills add https://github.com/AnderHonorato/Mem-rias-IA---Infinity --skill web-artifacts-builder-anderhonorato
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-artifacts-builder
Source: https://github.com/AnderHonorato/Mem-rias-IA---Infinity/tree/main/Manus/Skills/snapshots/anthropic-web-artifacts-builder
Command: npx skills add https://github.com/AnderHonorato/Mem-rias-IA---Infinity --skill web-artifacts-builder-anderhonorato

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, typescript, vite, tailwindcss, parcel, html-inline, shadcn/ui, radix-ui, and includes scripts (resource) components.

What problem does it solve? Building complex claude.ai HTML artifacts with state management, routing, or component libraries requires a full frontend toolchain, and manually scaffolding React projects and inlining them into one shareable HTML file is slow and error-prone. ## Core Features & Use Cases - Project Scaffolding: Initializes a React 18 + TypeScript + Vite project with Tailwind CSS, path aliases, and 40+ pre-installed shadcn/ui components via scripts/init-artifact.sh. - Single-File Bundling: Compiles the app with Parcel and inlines all JavaScript and CSS into one self-contained bundle.html via scripts/bundle-artifact.sh. - Node Compatibility Handling: Auto-detects the Node.js version and pins Vite 5.4.11 for Node 18 environments. - Use Case: Build an interactive dashboard artifact with shadcn/ui tables, dialogs, and charts, then bundle it into a single HTML file to share directly in a Claude conversation. ## Quick Start Ask the assistant to initialize a new React artifact project named my-dashboard, build the interface with shadcn/ui components, and bundle it into a single HTML artifact.

Frequently Asked Questions about web-artifacts-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a React artifact for claude.ai with shadcn/ui?▼

Run scripts/init-artifact.sh with a project name to scaffold a React 18 + TypeScript + Vite project with Tailwind CSS and 40+ shadcn/ui components pre-installed. Develop the app, then run scripts/bundle-artifact.sh to produce a single bundle.html file.

How do I bundle a React app into a single HTML file?▼

Run scripts/bundle-artifact.sh from the project root. It installs Parcel and html-inline, builds the app without source maps, and inlines all JavaScript and CSS into one self-contained bundle.html file.

When should I use this instead of a simple single-file HTML artifact?▼

Use it for complex artifacts requiring state management, routing, or shadcn/ui components. Simple single-file HTML or JSX artifacts do not need this toolchain and should be written directly.

Does the init script work with Node.js 18?▼

Yes, the script auto-detects the Node version and pins Vite to 5.4.11 for Node 18 compatibility, while Node 20 and above use the latest Vite. Versions below Node 18 are rejected with an error.

Why does bundle-artifact.sh fail with an index.html error?▼

The bundling script requires an index.html entry point in the project root and must be run from the directory containing package.json. Run it inside the project created by init-artifact.sh, not from the skill directory.

Related Skills

Explore More Software Engineering Skills→
AWS-EducateAWS-Educate

web-artifacts-builder

Build React, TypeScript, Vite, Tailwind CSS, and shadcn/ui web artifacts into a single HTML file.

Official
Advanced
SynthropicTechnologySynthropicTechnology

artifacts-builder

Bundle React, Tailwind, and shadcn projects into a single HTML artifact.

Official
Advanced
impact-initiativesimpact-initiatives

frontend-design

Design production-grade frontend interfaces with cohesive CSS and UI patterns.

Official
Advanced
SnoopiamSnoopiam

artifacts-builder

Bundle React and TypeScript projects into single HTML artifacts.

Community
Advanced