# Web Artifacts Builder

> Build production-quality HTML artifacts using React, Tailwind CSS, and shadcn/ui.

- Skill: `heldinhow/web-artifacts-builder` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add heldinhow/web-artifacts-builder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/heldinhow/web-artifacts-builder/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Heldinhow (https://skillmd.com/u/heldinhow)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/heldinhow/web-artifacts-builder

---


# Web Artifacts Builder

## Overview
Web artifacts are self-contained HTML files with embedded React components. This skill should be invoked when building interactive web UIs as standalone artifacts, dashboards, or prototypes.

## Core Principles
- **Self-Contained**: All code in single HTML file
- **Component Library**: Use shadcn/ui components
- **Styling**: Tailwind CSS for styling
- **Accessibility**: Follow ARIA guidelines

## Preparation Checklist
- [ ] Set up React project with Tailwind
- [ ] Install shadcn/ui components needed
- [ ] Plan component structure
- [ ] Configure export mechanism

## Step-by-Step Process
1. **Setup**: Initialize React with Tailwind
2. **Components**: Build with shadcn/ui
3. **Accessibility**: Implement ARIA attributes
4. **Responsive**: Ensure mobile compatibility
5. **Export**: Bundle as self-contained HTML
6. **Test**: Verify in browser

## Do's and Don'ts
- ✅ **Do** use accessible components
- ✅ **Do** make responsive designs
- ✅ **Do** optimize bundle size
- ❌ **Don't** include unnecessary dependencies
- ❌ **Don't** skip accessibility
- ❌ **Don't** ignore mobile users

## Anti-Patterns
- **Bloat**: Too many unused components
- **No Accessibility**: Ignoring ARIA
- **Desktop Only**: Not testing mobile
- **Missing Fallbacks**: Not handling edge cases