Nicholai
2e4d44a881
- docs/stories/pub-1-shadcn-ui-consistency.md - docs/stories/pub-2-parallax-split-hero.md - docs/stories/pub-3-search-with-filters.md - docs/stories/pub-4-quick-search-cmdk.md - docs/stories/pub-5-aftercare-enhancements.md - docs/stories/pub-6-galleries-lightbox.md Each story: - Mirrors PRD acceptance criteria verbatim - Includes actionable Tasks/Subtasks aligned to repo components (e.g., components/hero-section.tsx, components/artist-portfolio.tsx, data/artists.ts) - Provides Dev Notes referencing docs/ui-architecture.md and docs/PRD.md - Includes Testing guidance (Vitest/RTL and a11y expectations) - Reserves Dev Agent Record and QA Results sections for subsequent phases
77 lines
4.0 KiB
Markdown
77 lines
4.0 KiB
Markdown
# UT-PUB-01 — ShadCN UI Consistency Across Pages
|
|
|
|
## Status
|
|
Draft
|
|
|
|
## 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
|
|
1. 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.1 | Initial draft of PUB-01 story | Scrum Master |
|
|
|
|
## Dev Agent Record
|
|
### Agent Model Used
|
|
<!-- dev-agent: record model/version used during implementation -->
|
|
|
|
### Debug Log References
|
|
<!-- dev-agent: link to any debug logs or traces generated -->
|
|
|
|
### Completion Notes List
|
|
<!-- dev-agent: notes about completion, issues encountered, resolutions -->
|
|
|
|
### File List
|
|
<!-- dev-agent: list all files created/modified/affected during implementation -->
|
|
|
|
## QA Results
|
|
<!-- qa-agent: append review results and gate decision here -->
|