skills.rest
zhengfran
zhengfranCOMMUNITY
Explore all skills by this author →
GitHub

artifacts-builder

Bundle a React and shadcn/ui frontend into a single HTML artifact.

Updated Jul 11, 2022
Search Tags:#typescript#react#shadcn/ui#tailwind css#claude artifacts#parcel bundling#single-html export
One-click install
npx skills add https://github.com/zhengfran/dotconfig --skill artifacts-builder-zhengfran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: artifacts-builder
Source: https://github.com/zhengfran/dotconfig/tree/main/tools/ai/agents/skills/artifacts-builder
Command: npx skills add https://github.com/zhengfran/dotconfig --skill artifacts-builder-zhengfran

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pnpm, node, and includes scripts (resource) components.

What problem does it solve?

Building multi-component frontend artifacts for claude.ai can be slow and brittle when dependencies, routing/state, and UI libraries are involved; this Skill streamlines the end-to-end workflow to produce a single, shareable HTML artifact.

Core Features & Use Cases

  • Initialize a complete frontend scaffold: Generates a React 18 + TypeScript project with Tailwind CSS and shadcn/ui preinstalled so you can build complex interactive UIs quickly.
  • Build a production-ready single-file artifact: Bundles the React app and inlines all assets into one HTML file for reliable display in Claude conversations.
  • Use for state, routing, and component-heavy artifacts: Best suited for artifacts that require modern frontend structure (state management, navigation/routing patterns, and shadcn/ui components) rather than simple one-off HTML/JS snippets.

Quick Start

Run the initializer for your new project by executing the command: bash scripts/init-artifact.sh <project-name>.

Frequently Asked Questions about artifacts-builder

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

FAQPage Schema
How do I bundle a multi-component React app into a single HTML file for Claude artifacts?▼

To bundle a multi-component React app into a single HTML file, this Skill uses pnpm-based Parcel bundling with html-inline to inline all dependencies into one bundle.html file for Claude conversations.

Can I use shadcn/ui and Tailwind CSS in my Claude artifacts?▼

Yes, you can use shadcn/ui and Tailwind CSS in Claude artifacts. The Skill initializes a React 18 and TypeScript scaffold with these libraries preinstalled to support complex interactive UIs.

Do I need pnpm and Node.js to build single-file React artifacts?▼

Yes, you need pnpm and Node.js installed to build single-file React artifacts. The bundling process relies on pnpm to manage dependencies and Parcel to compile the project into a single HTML file.

When should I use this bundling approach instead of simple HTML for Claude?▼

Use this bundling approach instead of simple HTML when your Claude artifact requires modern frontend structure like TypeScript, Tailwind styling, app state, routing, or shadcn/ui components rather than static snippets.

How do I initialize a React TypeScript project for Claude artifact bundling?▼

To initialize a React TypeScript project for Claude artifact bundling, run the provided initializer script using the command bash scripts/init-artifact.sh followed by your desired project name.

What are the limitations of using Parcel to inline React dependencies into a single HTML file?▼

A limitation of using Parcel to inline React dependencies is that it requires a project with a root index.html and package.json, meaning it is not suited for generating simple one-off HTML or JavaScript snippets.

Related Skills

Explore More Software Engineering Skills→
JoaquinCampoJoaquinCampo
3

web-artifacts-builder

Bundle React frontend artifacts into a single self-contained HTML file.

Community
Advanced
poko8nadapoko8nada

context7-mcp

Retrieve version-pinned official documentation and code examples for libraries.

Community
Intermediate
cpfcoachingcpfcoaching

web-artifacts-builder

Construct interactive web artifacts with React and Tailwind CSS.

Community
Intermediate
wangx7wangx7

web-artifacts-builder

Bundle React and TypeScript projects into single-file HTML artifacts for claude.ai.

Community
Intermediate