Implement the 010-ui-baseline feature that establishes a modern UI using Tailwind CSS v4 and shadcn/ui-style components for the encounter screen

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-05 18:36:39 +01:00
parent 8185fde0e8
commit 1c40bf7889
20 changed files with 1533 additions and 273 deletions
--- a/specs/010-ui-baseline/plan.md
+++ b/specs/010-ui-baseline/plan.md
@@ -0,0 +1,75 @@
+# Implementation Plan: UI Baseline
+
+**Branch**: `010-ui-baseline` | **Date**: 2026-03-05 | **Spec**: [spec.md](./spec.md)
+**Input**: Feature specification from `/specs/010-ui-baseline/spec.md`
+
+## Summary
+
+Establish a modern UI baseline for the encounter screen by integrating Tailwind CSS v4 and shadcn/ui into the existing Vite + React 19 web app. Replace all unstyled HTML with a consistent design system: structured combatant rows with aligned columns, active turn highlight, grouped action bar, icon remove buttons, and consistent typography. No domain or application layer changes — all work is in the `apps/web` adapter layer.
+
+## Technical Context
+
+**Language/Version**: TypeScript 5.8 (strict mode, verbatimModuleSyntax)
+**Primary Dependencies**: React 19, Vite 6, Tailwind CSS v4, shadcn/ui, Lucide React (icons)
+**Storage**: N/A (no storage changes — localStorage persistence unchanged)
+**Testing**: Vitest (existing layer boundary tests must pass; no new visual tests in MVP baseline)
+**Target Platform**: Modern browsers (desktop-first, not broken on mobile)
+**Project Type**: Web application (monorepo: apps/web + packages/domain + packages/application)
+**Performance Goals**: No perceptible rendering delay; encounter screen usable during live tabletop play
+**Constraints**: UI-only changes; domain and application layers untouched
+**Scale/Scope**: Single screen (encounter tracker), ~6 component areas to restyle
+
+## Constitution Check
+
+*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*
+
+| Principle | Status | Notes |
+|-----------|--------|-------|
+| I. Deterministic Domain Core | PASS | No domain changes |
+| II. Layered Architecture | PASS | All changes in adapter layer (apps/web) only |
+| III. Agent Boundary | N/A | No agent features involved |
+| IV. Clarification-First | PASS | Spec is fully specified, no ambiguities |
+| V. Escalation Gates | PASS | Feature stays within spec scope |
+| VI. MVP Baseline Language | PASS | Dark theme, full responsive noted as "not in MVP baseline" |
+| VII. No Gameplay Rules | PASS | No gameplay logic involved |
+
+## Project Structure
+
+### Documentation (this feature)
+
+```text
+specs/010-ui-baseline/
+├── plan.md              # This file
+├── research.md          # Phase 0: Tailwind v4 + shadcn/ui setup research
+├── data-model.md        # Phase 1: UI component model (no domain changes)
+├── quickstart.md        # Phase 1: Developer quickstart
+├── contracts/           # Phase 1: UI component contracts
+│   └── ui-components.md
+└── tasks.md             # Phase 2 output (created by /speckit.tasks)
+```
+
+### Source Code (repository root)
+
+```text
+apps/web/
+├── src/
+│   ├── main.tsx                # Add global CSS import
+│   ├── index.css               # NEW: Tailwind directives + CSS variables
+│   ├── lib/
+│   │   └── utils.ts            # NEW: cn() helper (clsx + twMerge)
+│   ├── components/
+│   │   └── ui/                 # NEW: shadcn/ui primitives (Button, Input, Card, etc.)
+│   ├── App.tsx                 # Refactored: use new components + Tailwind classes
+│   └── hooks/
+│       └── use-encounter.ts    # UNCHANGED
+└── package.json                # Updated: new dependencies
+
+packages/domain/                # UNCHANGED
+packages/application/           # UNCHANGED
+```
+
+**Structure Decision**: Follows existing monorepo layout. New UI components live in `apps/web/src/components/ui/` following shadcn/ui convention. No new packages or layers introduced.
+
+## Complexity Tracking
+
+No constitution violations. No complexity justifications needed.