initiative/specs/010-ui-baseline/quickstart.md

Quickstart: UI Baseline

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

Prerequisites

• Node.js 18+
• pnpm 10.6+

Setup

# Install dependencies (from repo root)
pnpm install

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

New Dependencies (to be added)

# 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

# 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)