# Quickstart: UI Baseline

**Feature**: 010-ui-baseline | **Date**: 2026-03-05

## Prerequisites

- Node.js 18+
- pnpm 10.6+

## Setup

```bash
# Install dependencies (from repo root)
pnpm install

# Start dev server
pnpm --filter web dev
# → http://localhost:5173
```

## New Dependencies (to be added)

```bash
# Tailwind CSS v4 with Vite plugin
pnpm --filter web add tailwindcss @tailwindcss/vite

# shadcn/ui utilities
pnpm --filter web add clsx tailwind-merge class-variance-authority

# Radix UI primitives (used by shadcn/ui components)
pnpm --filter web add @radix-ui/react-slot @radix-ui/react-tooltip

# Icons
pnpm --filter web add lucide-react
```

## Key Files

| File | Purpose |
|------|---------|
| `apps/web/src/index.css` | Tailwind directives + CSS custom properties |
| `apps/web/src/lib/utils.ts` | `cn()` class merge utility |
| `apps/web/src/components/ui/` | shadcn/ui primitives (Button, Input, etc.) |
| `apps/web/src/components/combatant-row.tsx` | Combatant row component |
| `apps/web/src/App.tsx` | Main layout (header, list, action bar) |
| `apps/web/vite.config.ts` | Updated with Tailwind plugin |

## Quality Gate

```bash
# Must pass before commit
pnpm check
```

This runs: knip → format → lint → typecheck → test

## Design System

- **Styling**: Tailwind CSS v4 utility classes
- **Components**: shadcn/ui (copied into project, not a package dependency)
- **Icons**: Lucide React
- **Class merging**: `cn()` from `lib/utils.ts` (clsx + tailwind-merge)