4.1 KiB
4.1 KiB
UT-PUB-01 — ShadCN UI Consistency Across Pages
Status
Ready for Dev
Story
As a visitor,
I want the site to provide a consistent ShadCN-based UI across all pages,
so that navigation and interactions feel cohesive and predictable.
Acceptance Criteria
- Given any site page
When I navigate and interact
Then spacing, typography, components, and transitions are consistent
Tasks / Subtasks
- Establish consistency audit across key pages (AC: 1)
- Review /aftercare, /deposit, /terms, /privacy, /book, home, and artist-related pages for spacing/typography/component variance
- Document variance list and map each to ShadCN primitive or composed component
- Standardize typography and spacing scales (AC: 1)
- Align to ShadCN/Tailwind scales per docs/ui-architecture.md “Styling Guidelines”
- Normalize heading/body sizes and leading across templates/layouts
- Replace/align components to ShadCN primitives where mismatched (AC: 1)
- Identify ad-hoc buttons/inputs/cards and replace with registry-aligned ui/* components
- Ensure variant management via cva() and class merging via cn()
- Ensure consistent page skeletons and boundaries (AC: 1)
- Provide/verify loading.tsx and error.tsx per key segments for consistent loading/error states
- Verify shared page section wrappers (components/layouts or shared) for paddings, max-width, and breakpoints
- Motion and transition alignment (AC: 1)
- Use tailwindcss-animate for subtle transitions; avoid custom inline animation styles
- Verify smooth scroll behavior is consistent where Lenis is used (if applicable to page)
- Tests and checks (AC: 1)
- Add RTL tests to verify consistent class patterns on representative pages/components
- Add visual acceptance notes for spacing/typography on critical templates
Dev Notes
Pulled from project artifacts (do not invent):
- docs/ui-architecture.md
- Framework: Next.js 14 App Router with server components by default
- UI: ShadCN UI + Radix primitives; Tailwind v4 utilities; cva() variants and cn() class merge
- Styling Guidelines: Tailwind as primary styling, follow ShadCN spacing/typography tokens
- Routing: Provide loading.tsx and error.tsx for key segments; use route groups for separation
- Component Standards: Typed components, cva variants, consistent naming (kebab-case files, PascalCase components)
- Testing Requirements: Vitest + RTL for components; deterministic tests; mock external dependencies
- docs/PRD.md (Epic C — Public-Facing Website Experience)
- C1: All pages follow ShadCN baseline; unify typography, spacing, and components
- C2: Improve core public pages and ensure responsive, mobile-first behavior
- Existing Source Tree (reference only; verify before edits)
- app/ (App Router segments), components/ui/ (ShadCN primitives), components/* (composed/shared), styles/globals.css (Tailwind base)
Testing (from docs/ui-architecture.md: Testing Requirements/Best Practices)
- Unit/Component: Vitest + RTL; Arrange-Act-Assert; deterministic; mock router/network
- Structure: tests under tests/ with component and integration coverage
- Goals: Verify applied class patterns for typographic scale and spacing, and presence of ShadCN primitives/variants in representative pages
Change Log
| Date | Version | Description | Author |
|---|---|---|---|
| 2025-09-19 | 0.2 | PO validation: Ready for Dev | Product Owner |
| 2025-09-19 | 0.1 | Initial draft of PUB-01 story | Scrum Master |