# Web Artifacts Builder

> Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern fron…

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

- Page: https://ss33.ai/skills/dokhacgiakhoa/web-artifacts-builder-51150777008
- Publisher: dokhacgiakhoa
- Category: [Software Development](https://ss33.ai/skills/category/software-development-t44z8z) › [Frontend & UI](https://ss33.ai/skills/category/software-development-t44z8z/frontend-and-ui-q25e9r)
- License: Apache-2.0
- Source: https://github.com/dokhacgiakhoa/agent-skills-4-vibe-coding-cli/blob/c4a059bbf7a8d6b2162071f0fbfe74053faa6d20/.agent/skills/web-artifacts-builder/SKILL.md

## Skill

SKILL.md: https://ss33.ai/api/v1/ss33/download/dokhacgiakhoa/web-artifacts-builder-51150777008

# Web Artifacts Builder

To build powerful frontend claude.ai artifacts, follow these steps:
1. Initialize the frontend repo using `scripts/init-artifact.sh`
2. Develop your artifact by editing the generated code
3. Bundle all code into a single HTML file using `scripts/bundle-artifact.sh`
4. Display artifact to user
5. (Optional) Test the artifact

**Stack**: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui

## Design & Style Guidelines

VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.

## Quick Start

## 🧠 Knowledge Modules (Fractal Skills)

### 1. [Step 1: Initialize Project](./sub-skills/step-1-initialize-project.md)
### 2. [Step 2: Develop Your Artifact](./sub-skills/step-2-develop-your-artifact.md)
### 3. [Step 3: Bundle to Single HTML File](./sub-skills/step-3-bundle-to-single-html-file.md)
### 4. [Step 4: Share Artifact with User](./sub-skills/step-4-share-artifact-with-user.md)
### 5. [Step 5: Testing/Visualizing the Artifact (Optional)](./sub-skills/step-5-testingvisualizing-the-artifact-optional.md)