# How to Build HTML Artifacts with React and Tailwind Using Claude Skills
> Learn to build HTML artifacts with React and Tailwind using Claude Skills. Bootstrap a React project, add Tailwind CSS and shadcn/ui components, then bundle for Claude conversations.
- Repository: [Composio/awesome-claude-skills](https://github.com/composiohq/awesome-claude-skills)
- Tags: how-to-guide
- Published: 2026-07-28
---
**You can build self-contained HTML artifacts using Claude Skills by bootstrapping a React project with Vite, developing components with Tailwind CSS and shadcn/ui, then bundling everything into a single inline HTML file ready for Claude conversations.**
The **Artifacts Builder** skill from the `ComposioHQ/awesome-claude-skills` repository provides a complete front-end toolchain that runs inside Claude Code or the Claude API. It automates the creation of interactive React applications that compile into portable [`bundle.html`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/bundle.html) files you can drop directly into Claude conversations as rich HTML artifacts.
## What Is the Artifacts Builder Claude Skill?
The Artifacts Builder skill packages React 18, TypeScript, Vite, Tailwind CSS, and shadcn/ui components into an automated workflow. According to the source code in [[`artifacts-builder/SKILL.md`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/artifacts-builder/SKILL.md)](https://github.com/ComposioHQ/awesome-claude-skills/blob/master/artifacts-builder/SKILL.md), this skill follows a three-phase architecture:
1. **Project Bootstrap** – Generates a ready-to-code React project with all dependencies
2. **Development** – Supports standard React component development with hot reload
3. **Bundling** – Compiles the entire application into a single self-contained HTML file
The skill relies on two shell scripts located in `artifacts-builder/scripts/`: [`init-artifact.sh`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/init-artifact.sh) for project creation and [`bundle-artifact.sh`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/bundle-artifact.sh) for final compilation.
## Phase 1: Bootstrapping the React Project
To build HTML artifacts with React and Tailwind using Claude Skills, you first initialize a new project using the provided initialization script.
### Running the Init Script
Execute the bootstrap command with your desired project name:
```bash
bash scripts/init-artifact.sh my-artifact
cd my-artifact
```
The [[`init-artifact.sh`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/init-artifact.sh)](https://github.com/ComposioHQ/awesome-claude-skills/blob/master/artifacts-builder/scripts/init-artifact.sh) script performs several critical setup operations:
- Creates a Vite project with React and TypeScript template
- Installs Tailwind CSS and generates [`tailwind.config.js`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/tailwind.config.js) (lines 92-101 in the source)
- Extracts shadcn/ui components from `shadcn-components.tar.gz` into `src/`
- Configures path aliases in [`tsconfig.json`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/tsconfig.json) and [`tsconfig.app.json`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/tsconfig.app.json) to resolve `@/` to `src/`
- Sets up [`vite.config.ts`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/vite.config.ts) with alias resolution (lines 54-68)
### Generated Configuration Files
The script generates [`tailwind.config.js`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/tailwind.config.js) with custom color palettes, dark mode support, and content paths. It also creates [`src/index.css`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/src/index.css) containing Tailwind directives and CSS variables (lines 62-92 of [`init-artifact.sh`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/init-artifact.sh)), plus a [`components.json`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/components.json) file for shadcn/ui metadata management (lines 80-102).
## Phase 2: Developing Components with Tailwind and shadcn/ui
Once bootstrapped, the project follows standard Vite conventions with pre-installed shadcn/ui components ready for use.
### Writing React Components
Create components using the pre-installed UI library. For example, a card component in [`src/components/ui/example-card.tsx`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/src/components/ui/example-card.tsx):
```tsx
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
export function ExampleCard() {
return (
Claude Artifact
Built with React, TypeScript, Tailwind, and shadcn/ui.
);
}
```
Import this component into [`src/App.tsx`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/src/App.tsx) and run `pnpm dev` to start the Vite development server for iterative development.
### Using Path Aliases
The initialization script configures **path aliases** (`@/`) in both TypeScript and Vite configurations. This allows clean imports like `import { Button } from '@/components/ui/button'` rather than relative paths. The alias resolution is handled in [`vite.config.ts`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/vite.config.ts) and mapped to `src/` in [`tsconfig.json`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/tsconfig.json).
## Phase 3: Bundling to a Single HTML File
The final phase converts your React application into a self-contained HTML artifact using the bundling script.
### The Bundle Script (bundle-artifact.sh)
Run the bundler when ready to distribute:
```bash
bash scripts/bundle-artifact.sh
```
The [[`bundle-artifact.sh`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/bundle-artifact.sh)](https://github.com/ComposioHQ/awesome-claude-skills/blob/master/artifacts-builder/scripts/bundle-artifact.sh) script executes three operations:
1. **Installs Parcel** as the production bundler
2. **Builds the project** into a `dist/` directory
3. **Inlines all assets** using `html-inline` to create [`bundle.html`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/bundle.html)
Parcel handles the module bundling while `html-inline` embeds CSS, JavaScript, and other assets directly into the HTML file, producing a single Artifact that requires no external dependencies.
### Output and Verification
The script outputs [`bundle.html`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/bundle.html) (approximately 2MB) in the project root. This file contains the entire React application inline—styles, scripts, and assets encoded within the HTML. You can verify the bundle by opening it in a browser or copying it into a Claude conversation where it renders as an interactive HTML artifact.
## Complete Workflow Example
Here is the complete command sequence to build HTML artifacts with React and Tailwind using Claude Skills:
```bash
# Initialize the project
bash scripts/init-artifact.sh my-dashboard
cd my-dashboard
# Install dependencies (if not done automatically)
pnpm install
# Develop your components (run in separate terminal)
pnpm dev
# Build the final artifact
bash scripts/bundle-artifact.sh
# Result: bundle.html ready for Claude
ls -lh bundle.html
```
This workflow leverages Vite for development speed, Tailwind for styling, shadcn/ui for pre-built accessible components, and Parcel with html-inline for production bundling.
## Summary
- The **Artifacts Builder** skill in `ComposioHQ/awesome-claude-skills` provides a complete React + Tailwind toolchain for Claude
- **[`init-artifact.sh`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/init-artifact.sh)** bootstraps projects with Vite, TypeScript, Tailwind, and shadcn/ui pre-configured
- **Path aliases** (`@/`) are automatically configured in [`tsconfig.json`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/tsconfig.json) and [`vite.config.ts`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/vite.config.ts) for clean imports
- **[`bundle-artifact.sh`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/bundle-artifact.sh)** uses Parcel and `html-inline` to generate single-file [`bundle.html`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/bundle.html) artifacts
- The resulting HTML files are self-contained and can be embedded directly in Claude conversations as interactive artifacts
## Frequently Asked Questions
### What is the difference between Vite and Parcel in this setup?
**Vite serves as the development server and build tool** during the coding phase, providing fast HMR (Hot Module Replacement) and TypeScript support. **Parcel handles the final production bundling** in [`bundle-artifact.sh`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/bundle-artifact.sh), optimizing and packaging the application for the single-file HTML artifact output. This dual-tool approach combines Vite's developer experience with Parcel's reliable inlining capabilities.
### Can I customize the Tailwind theme when building HTML artifacts with Claude Skills?
**Yes, the Tailwind configuration is fully customizable.** The [`init-artifact.sh`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/init-artifact.sh) script generates [`tailwind.config.js`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/tailwind.config.js) with standard settings, but you can modify the theme colors, fonts, and breakpoints before running the bundle script. The configuration supports dark mode and custom CSS variables defined in [`src/index.css`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/src/index.css).
### How large are the generated HTML files?
**Typical artifacts range between 1MB and 3MB** depending on the number of shadcn/ui components used and custom assets included. The [`bundle.html`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/bundle.html) file includes all JavaScript, CSS, and inlined assets, making it larger than standard web apps but requiring zero external network requests to function.
### Can I use other React component libraries besides shadcn/ui?
**While the skill pre-configures shadcn/ui**, you can install additional component libraries using `pnpm install` after initialization. The Vite + Tailwind setup supports any React-compatible library. However, ensure third-party dependencies are properly imported and tree-shaken to minimize the final [`bundle.html`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/bundle.html) size.