skills.rest
Barbaros911
Barbaros911COMMUNITY
Explore all skills by this author →
GitHub

artifacts-builder

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

Updated Aug 12, 2026
Search Tags:#React#shadcn/ui#tailwind css#HTML artifact#vite#bundling#frontend scaffolding
One-click install
npx skills add https://github.com/Barbaros911/As-mine --skill artifacts-builder-barbaros911
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: artifacts-builder
Source: https://github.com/Barbaros911/As-mine/tree/main/.claude/skills/artifacts-builder
Command: npx skills add https://github.com/Barbaros911/As-mine --skill artifacts-builder-barbaros911

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 a single shareable HTML file is repetitive 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: When a user asks for an interactive dashboard artifact with dialogs, tables, and forms, scaffold the project, build the UI with shadcn/ui components, then bundle it into one HTML file to share directly in the conversation. ## Quick Start Ask the assistant to build a complex interactive artifact with React and shadcn/ui components and share it as a single HTML file.

Frequently Asked Questions about artifacts-builder

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

FAQPage Schema
How do I create a React artifact with shadcn/ui components?▼

Run scripts/init-artifact.sh with a project name to scaffold a Vite React TypeScript project preconfigured with Tailwind CSS and over 40 shadcn/ui components. Edit the generated code, then run scripts/bundle-artifact.sh to produce a single HTML file.

How to 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 a self-contained bundle.html file.

When should I use artifacts-builder instead of a single HTML file?▼

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 can be written directly.

Does the init script work with Node 18?▼

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

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

The script requires an index.html entry point in the project root and a package.json file. Run it from the root of a project created by init-artifact.sh, not from another directory.

Related Skills

Explore More Software Engineering Skills→
iButtersiButters
3

atomic-design

Organize React UI components into a five-tier Atomic Design folder structure.

Community
Advanced
cookeyholdercookeyholder

web-artifacts-builder

Bundle React-based frontend projects into a single portable HTML artifact.

Community
Advanced
AlenryuichiAlenryuichi
20

visual-testing-loop

Automate the visual regression testing loop for frontend interfaces with Playwright.

Community
Advanced
organvm-i-theoriaorganvm-i-theoria

web-artifacts-builder

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

Official
Intermediate