# UI Web

> Generate slop-free UI for React + Tailwind + shadcn/ui. Use whenever the user asks to build, design, scaffold, restyle, or improve a screen, component, page, landing, app, or any web interface. Replaces frontend-design, design-html, design-shotgun, design-consultation. Two phases — tokens first (with approval gate), then UI — both gated by a self-audit checklist that the model MUST run before claiming done.

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

---


# ui-web — Slop-Free Web UI Skill

You are generating production-grade web UI in React + TypeScript + Tailwind. This skill exists because untouched LLMs produce **AI slop**: purple→blue gradients, Inter everywhere, 3-icon-card grids, "Lightning fast / Powered by AI" copy, glassmorphism by default, arbitrary spacing values, and the median of every Tailwind tutorial scraped from GitHub. This skill replaces guesses with **constraints**.

The non-negotiable rule: **NEVER use a buzzword in place of a token.** Words like *clean*, *modern*, *professional*, *sleek*, *premium* are banned from your reasoning. Every aesthetic choice must trace back to a named anchor recipe in `anchors.md` and a token in the project's `tailwind.config.ts`.

---

## Workflow (follow in order)

### Step 0 — Project scan (decides bootstrap vs extend mode)

Before any other action, check for:

```
DESIGN_RULES.md            # at repo root → if exists, you are in EXTEND mode
tailwind.config.{ts,js}    # → if exists with custom theme, you are in EXTEND mode
app/globals.css            # check for CSS custom properties / tokens
src/styles/tokens.css
```

- **If `DESIGN_RULES.md` exists**: read it. Read the existing `tailwind.config.*`. Skip to **Step 3 (Phase 2: UI)**. Use only existing tokens. NEVER add new colors/spacing/radii without asking.
- **If tokens exist but no `DESIGN_RULES.md`**: read tokens, infer the closest matching anchor, ask the user to confirm the inferred anchor, then write `DESIGN_RULES.md` and proceed to Phase 2.
- **If neither exists**: you are in **bootstrap mode**. Continue to Step 1.

### Step 1 — Intake (interactive, bootstrap only)

Use AskUserQuestion to gather, in this order:

1. **Anchor pick** — show the 8 recipes from `anchors.md` (one-line summary each). Let the user pick 1–3. If 2–3, ask which is primary and which contributes type vs color vs motion.
2. **Ban menu** — show the 8 ban patterns from `ban-patterns.md` with the 3 default-on items pre-checked. Confirm.
3. **Project context**:
   - Content density: airy / balanced / dense
   - Primary surface: marketing site / app / docs / dashboard / mobile-web
   - Dark mode: required / optional / none
   - Brand color (if any): hex value or "derive from anchor"

Do NOT ask vibe questions ("how should it feel?"). Ask only the questions above.

### Step 2 — Phase 1: tokens (gated)

Generate, in this order:

1. **`tailwind.config.ts`** — extend `theme` using the chosen anchor's recipe. Use the template at `templates/tailwind.config.ts.tmpl`. Required keys: `colors`, `spacing`, `borderRadius`, `fontSize`, `fontFamily`, `boxShadow`, `transitionDuration`, `transitionTimingFunction`.
2. **`app/globals.css`** (or `src/index.css` for Vite) — CSS custom properties mirroring the Tailwind tokens, plus dark-mode overrides if requested.
3. **`eslint.config.js` patch** — enable the slop-blocking lint rules from `templates/eslint.slop.cjs.tmpl`. Add a `lint:design` script to `package.json`.
4. **`DESIGN_RULES.md`** at repo root — fill `templates/DESIGN_RULES.md.tmpl` with the chosen anchors, active bans, token file paths, and verification command.
5. **`CLAUDE.md` patch** — append (do not overwrite): `Before any UI/UX work, read and follow DESIGN_RULES.md.`

Then **run the Token Audit** from `verification.md` and print the PASS/FAIL table to the user. **Do not proceed to Phase 2 until the user approves.**

### Step 3 — Phase 2: UI

Generate the requested screen/component using **only tokens from the config**. Follow:

- **`component-anatomy.md`** — exact rules for button, input, card, list, nav, modal, toast, empty-state, form-field, table-row.
- **`motion.md`** — easing curves and durations.
- **`copy-voice.md`** — every string is real, contextual copy. No lorem ipsum, no filler.
- **`icons-imagery.md`** — icon library, sizing, alignment. No emoji bullets in serious UI.

Then **run the UI Audit** from `verification.md` AND `pnpm lint:design` (or `npm`/`yarn` equivalent). Print the audit table. Fix every FAIL before claiming done.

---

## Files in this skill

| File | When to read |
|---|---|
| `anchors.md` | Step 1, before showing the user choices. ALWAYS read fully — never quote from memory. |
| `ban-patterns.md` | Step 1, when showing ban menu. Step 2 and 3, when verifying. |
| `component-anatomy.md` | Step 3, before writing any component. |
| `motion.md` | Step 3, when adding any transition or animation. |
| `copy-voice.md` | Step 3, before writing any user-facing string. |
| `icons-imagery.md` | Step 3, when choosing icons or images. |
| `verification.md` | After Step 2 (Token Audit) and after Step 3 (UI Audit). MANDATORY — do not skip. |
| `templates/*` | Use as the basis for the generated files; fill placeholders, never ship as-is. |

## Hard rules (the model must obey these always)

1. **No arbitrary values.** Forbidden: `mt-[13px]`, `w-[372px]`, `text-[#3a4f6b]`, `rounded-[7px]`. Every value must be a token in `tailwind.config.ts`. If you need a value that does not exist, ask the user to add it to the token set.
2. **No buzzwords in code or comments.** Banned strings in your output: *clean*, *modern*, *professional*, *sleek*, *premium*, *beautiful*, *elegant* (except in copy if the user explicitly asked for those words).
3. **No default-style-tells unless the chosen anchor explicitly allows them.** Specifically: no `bg-gradient-to-r from-purple-* to-pink-*`, no `from-indigo-* to-purple-*`, no `backdrop-blur` on regular cards (only on iOS-style chrome/sheets if anchor allows).
4. **No filler copy.** No lorem ipsum. No "Lightning fast", "Built for the modern web", "Powered by AI", "Get started in seconds", "The future of X", "Beautiful and intuitive".
5. **Touch targets ≥ 44px** on any control intended for tap.
6. **Focus rings always visible.** Never `focus:outline-none` without an explicit replacement.
7. **Every async surface has empty + loading + error states.** No exceptions.
8. **Dark mode parity.** If the project supports dark mode, every component you write must work in both — verify by reading the colors you used.
9. **You must run the verification checklist** before responding "done". Print the audit table to the user.

## What this skill is NOT

- Not a magic-aesthetic generator. You still have to pick an anchor and follow it.
- Not a copy generator. Phase 2 stops and asks for real copy when needed.
- Not a brand-design tool. Brand identity (logo, custom typography family selection beyond what anchors provide) is the user's call.
- Not a replacement for design review with humans. The audit table is a floor, not a ceiling.