# Web Artifacts Builder
> Build complex, self-contained interactive web artifacts - rich HTML/CSS/JavaScript applications, React components with Tailwind CSS and shadcn/ui, data visualizations with D3.js or Chart.js, interactive tools, and games - all bundled into a single portable HTML file. Use when the user wants to create an interactive demo, a data visualization, a UI prototype, a mini web app, or any rich browser-rendered artifact that can be embedded or shared as a single file.
- Skill: `jignesh-ponamwar/web-artifacts-builder` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jignesh-ponamwar/web-artifacts-builder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jignesh-ponamwar/web-artifacts-builder/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Apache-2.0
- Author: Jignesh-Ponamwar (https://skillmd.com/u/jignesh-ponamwar)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jignesh-ponamwar/web-artifacts-builder
---
# Web Artifacts Builder Skill
## Two Approaches
| Approach | When to Use | Complexity |
|---------|-------------|-----------|
| **Pure HTML/CSS/JS** | Simple interactions, no framework needed | Low |
| **React + Tailwind (CDN)** | Rich UI, components, state management | Medium |
| **React + Vite + Bundle** | Production app, many dependencies | High |
---
## Approach A: Self-Contained HTML (No Build Step)
Best for: calculators, visualizations, simple tools, games.
```html
Budget Calculator
```
---
## Approach B: React + Tailwind via CDN
Best for: interactive dashboards, component demos, data visualization with state.
```html
Dashboard
```
---
## Design Guidelines
### Palette Approach
- Dark theme: `#0f172a` background, `#1e293b` card, `#6366f1` accent
- Light theme: `#f8fafc` background, `#ffffff` card, `#6366f1` accent
- Pick one dominant color; use 60-30-10 rule (background: 60%, surface: 30%, accent: 10%)
### Typography
- Headings: `font-size: clamp(1.5rem, 4vw, 2.5rem)` - scales on mobile
- Body: 16px minimum; never below 14px for readable content
- Avoid default system fonts for anything beyond demos - use `Inter` or `Geist` via Google Fonts
### Layout Principles
- Use CSS Grid for page layout, Flexbox for component layout
- Always set `max-width` on content containers (800-1200px)
- Add meaningful micro-interactions: `transition: all 0.2s`, hover states, focus rings
### What to Avoid
- Purple gradients on white - too generic
- Centered body text on wide screens
- Missing loading/empty states
- No hover states on interactive elements
- Placeholder-only content (Lorem ipsum everywhere)
---
## Common Mistakes
- **CDN versions mismatched** - check exact version numbers for React, Recharts, etc.
- **Babel `type="text/babel"` missing** - JSX won't parse without it when using CDN Babel
- **No responsive design** - always add `meta viewport` and test at 375px width
- **Missing accessibility** - buttons need `type="button"`, form inputs need labels
- **Forgetting error states** - always handle empty data, loading, and error conditions visually
- **Inline CSS overriding Tailwind** - be consistent; pick one approach per project