# Web Frontend

> Use when building an elaborate multi-component claude.ai HTML artifact needing state, routing, or shadcn/ui — not for simple single-file artifacts.

- Skill: `lawless-m/web-frontend` (Agent Skill)
- Install (CLI): `npx skillmds@latest add lawless-m/web-frontend`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lawless-m/web-frontend/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Complete terms in LICENSE.txt
- Author: lawless-m (https://skillmd.com/u/lawless-m)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/lawless-m/web-frontend

---


# Web Frontend

Tooling for React 18 + TypeScript + Vite + Tailwind + shadcn/ui artifacts, bundled to a single self-contained HTML file via Parcel. Use it for complex artifacts (state management, routing, shadcn/ui components); for a simple single-file HTML/JSX artifact, skip this and just write the file.

## Design: avoid "AI slop"

VERY IMPORTANT: avoid excessive centered layouts, purple gradients, uniform rounded corners, and the Inter font.

## Workflow

1. **Init**: `bash scripts/init-artifact.sh <project-name>` then `cd <project-name>`. Creates a fully configured project: React + TypeScript via Vite, Tailwind CSS 3.4.1 with the shadcn/ui theming system, 40+ shadcn/ui components pre-installed, all Radix UI deps, `@/` path aliases, and Parcel bundling via `.parcelrc`. Auto-detects Node 18+ and pins a compatible Vite version.
2. **Develop**: edit the generated files.
3. **Bundle**: `bash scripts/bundle-artifact.sh` — requires an `index.html` in the project root. Builds with Parcel (no source maps) and inlines all JS/CSS/assets into a single `bundle.html`.
4. **Share** the `bundle.html` as the artifact.
5. **Test (optional)**: only if requested or if issues arise — testing upfront adds latency before the user sees the artifact.

## Reference

- shadcn/ui components: https://ui.shadcn.com/docs/components