63 lines
1.5 KiB
Markdown
63 lines
1.5 KiB
Markdown
# 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)
|