# How to Create HTML Artifacts with React and Tailwind CSS Using Claude Skills

> Learn to create HTML artifacts with React Tailwind CSS using Claude Skills. Automate project scaffolding, UI development, and bundling into a single HTML file.

- Repository: [Composio/awesome-claude-skills](https://github.com/composiohq/awesome-claude-skills)
- Tags: how-to-guide
- Published: 2026-08-30

---

**Claude Skills automates the creation of self-contained HTML artifacts through a three-stage pipeline that scaffolds a React 18 project with Tailwind CSS, enables development with shadcn/ui components, and bundles everything into a single HTML file using Parcel.**

The **Artifacts Builder** skill in the `ComposioHQ/awesome-claude-skills` repository eliminates manual build-tool configuration when you create HTML artifacts with React and Tailwind CSS. This workflow generates a Vite-based React TypeScript project pre-wired with Tailwind utilities and 40+ shadcn/ui components. After development, the skill compiles your application into a single [`bundle.html`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/bundle.html) file ready for deployment as a Claude artifact.

## Understanding the Architecture

The Artifacts Builder operates through two primary shell scripts that handle initialization and bundling. The [`artifacts-builder/scripts/init-artifact.sh`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/artifacts-builder/scripts/init-artifact.sh) script scaffolds the entire development environment, while [`artifacts-builder/scripts/bundle-artifact.sh`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/artifacts-builder/scripts/bundle-artifact.sh) handles production optimization.

Key architectural components include:

- **Vite Configuration**: Generates [`vite.config.ts`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/vite.config.ts) with React Fast Refresh and TypeScript path aliases (`@/` → `src/`)
- **Tailwind Setup**: Creates [`tailwind.config.js`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/tailwind.config.js) with shadcn/ui theming, dark-mode support, and [`postcss.config.js`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/postcss.config.js)
- **Component Library**: Extracts 40+ shadcn/ui components (Accordion, Dialog, Card, etc.) from `artifacts-builder/scripts/shadcn-components.tar.gz` into `src/components/ui/`
- **Parcel Bundling**: Inlines all JavaScript, CSS, and image assets into a single HTML artifact

## Step 1: Initialize Your Project

Run the initialization script to scaffold a new artifact project. This requires Node.js version 18 or higher.

```bash
bash artifacts-builder/scripts/init-artifact.sh my-artifact
cd my-artifact

```

The script performs the following actions automatically:

1. Verifies Node.js version and installs `pnpm` if missing
2. Creates a Vite React TypeScript project using `pnpm create vite`
3. Installs Tailwind CSS, PostCSS, and Autoprefixer
4. Generates [`tailwind.config.js`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/tailwind.config.js) with shadcn/ui design tokens (lines 93-100 of [`init-artifact.sh`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/init-artifact.sh))
5. Extracts shadcn/ui component source files to `src/components/ui/`
6. Configures [`vite.config.ts`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/vite.config.ts) with path aliases for clean imports

## Step 2: Develop with Tailwind and shadcn/ui

Create your user interface using Tailwind utility classes and pre-installed shadcn/ui components. Edit [`src/App.tsx`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/src/App.tsx) to compose your artifact:

```tsx
import { Button } from '@/components/ui/button';
import '@/index.css';

export default function App() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center bg-background p-4">
      <h1 className="text-4xl font-bold text-primary mb-6">
        Hello from Claude!
      </h1>
      <Button className="bg-primary text-primary-foreground">
        Click me
      </Button>
    </main>
  );
}

```

Key development patterns:

- Import components using the `@/components/ui/` alias (e.g., `@/components/ui/button`)
- Apply Tailwind utilities like `bg-background`, `text-primary`, and `flex`
- Run `pnpm dev` to start the local development server at `http://localhost:5173`

## Step 3: Bundle into a Single HTML Artifact

Execute the bundling script to compile your React application into a self-contained HTML file:

```bash
bash scripts/bundle-artifact.sh

```

This script performs the following operations:

1. Installs Parcel bundler and required plugins (`@parcel/config-default`, `parcel-resolver-tspaths`, `html-inline`)
2. Builds the project with production optimizations and no source maps
3. Inlines all assets (JavaScript bundles, CSS stylesheets, images) into [`bundle.html`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/bundle.html)

The resulting [`bundle.html`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/bundle.html) file contains no external dependencies and can be copied directly into Claude conversations as an HTML artifact.

## Complete Example Workflow

The following commands demonstrate the complete pipeline from initialization to final artifact:

```bash

# Initialize the project

bash artifacts-builder/scripts/init-artifact.sh demo-artifact
cd demo-artifact

# Create a sample component

cat > src/App.tsx <<'EOF'
import { Button } from '@/components/ui/button';
import '@/index.css';

export default function App() {
  return (
    <main className="flex min-h-screen items-center justify-center bg-background p-6">
      <h1 className="text-5xl font-bold text-primary mb-8">
        Claude Artifact Demo
      </h1>
      <Button className="bg-primary text-primary-foreground">
        Get Started
      </Button>
    </main>
  );
}
EOF

# Preview during development

pnpm dev

# Generate final artifact

bash scripts/bundle-artifact.sh

# Output: bundle.html

```

## Key Implementation Details

According to the source code in `ComposioHQ/awesome-claude-skills`, the initialization script handles several critical configuration steps. The [`tailwind.config.js`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/tailwind.config.js) is generated with shadcn/ui theming variables and dark mode support, extending the default Tailwind theme with CSS custom properties for consistent design tokens.

The [`vite.config.ts`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/vite.config.ts) includes the React plugin for Fast Refresh and path resolution mapping `@/` to `./src/`, enabling clean absolute imports throughout your project. The [`src/index.css`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/src/index.css) file is created with Tailwind directives (`@tailwind base`, `@tailwind components`, `@tailwind utilities`) plus shadcn/ui CSS variables for theming consistency.

For detailed usage instructions, refer to [`artifacts-builder/SKILL.md`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/artifacts-builder/SKILL.md) in the repository root.

## Summary

- **Initialize** new projects using [`artifacts-builder/scripts/init-artifact.sh`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/artifacts-builder/scripts/init-artifact.sh) to automatically configure React 18, TypeScript, Vite, Tailwind CSS, and shadcn/ui components
- **Develop** interfaces using Tailwind utility classes and 40+ pre-installed shadcn/ui components via the `@/components/ui/` alias
- **Bundle** applications into single HTML files using [`scripts/bundle-artifact.sh`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/scripts/bundle-artifact.sh), which leverages Parcel to inline all assets
- The resulting [`bundle.html`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/bundle.html) requires no external dependencies and deploys directly as a Claude HTML artifact

## Frequently Asked Questions

### What Node.js version is required for the Artifacts Builder?

The [`init-artifact.sh`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/init-artifact.sh) script requires Node.js version 18 or higher. The script automatically checks your Node version and installs `pnpm` if it is not present on your system.

### Can I customize the Tailwind configuration after initialization?

Yes. The script generates a standard [`tailwind.config.js`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/tailwind.config.js) file in your project root (lines 93-100 of [`init-artifact.sh`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/init-artifact.sh)) that extends the default theme with shadcn/ui design tokens. You can modify this file to add custom colors, spacing, or plugins before running the bundle script.

### How does the bundling process handle images and assets?

The [`bundle-artifact.sh`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/bundle-artifact.sh) script uses Parcel with the `html-inline` plugin to encode all local assets directly into the HTML file. JavaScript bundles, CSS stylesheets, and images are inlined as data URIs, producing a single [`bundle.html`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/bundle.html) file with no external network requests.

### Is TypeScript support included by default?

Yes. The initialization script creates a Vite-based React TypeScript project by default. The [`vite.config.ts`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/vite.config.ts) includes TypeScript path aliasing (`@/` → `src/`), and all shadcn/ui components are provided as TypeScript source files for full type safety during development.