review · segments
Frontend design review and Tier 1 fixes for whenwipe.com (tarkovai)
claude 828 events 2 segments frontend-fixes
segment 1 of 2
Conduct a read-only frontend design review of all public routes and write a prioritized report
Invoked the frontend-design skill, read routes and shared layouts, dispatched parallel subagents to review streamer profiles/charts, search, Twitch Drops, and content/legal pages, directly read flagship pages (home, Hunger Games), verified rendered SEO output via HTTP fetches, and synthesized all findings into docs/frontend-design-review.md. The report covers 5 dimensions (design, layout, SEO, accessibility, performance) with P1-P3 priorities and effort estimates.
outcome
docs/frontend-design-review.md written with prioritized findings across all public pages
next steps
—
key decisions
- Used parallel subagents to cover page groups efficiently while reading flagship pages directly for aesthetic judgment
- Applied frontend-design skill principles (bold typography, distinctive color, atmosphere/depth) as the critical lens
- Verified actual rendered <head> output to ground SEO findings in true page output, not just Blade inference
open questions
—
1 week ago → 1 week ago
segment 2 of 2
Implement Tier 1 fixes from the design review report
Created branch frontend-fixes, then implemented chunk 1 (SEO head mechanism: per-page OG/Twitter/canonical/robots via @yield, self-referencing canonical, <h1> on home and search, section labels to <h2>) and chunk 2 (re-skinned search results onto x-user-link, added eager-load with ->query() for currentProfileImageUrl/currentLiveStream, noindex/follow on search results, improved empty states with <h1>). Chunk 1 committed; chunk 2 code is written but uncommitted. Pint + npm build pass. Remaining items (layout bugs, search label, N+1 fixes, stale copy, dead loader, typography) not yet started.
outcome
Branch frontend-fixes created; chunk 1 committed; chunk 2 code in place but uncommitted; remaining 5 items not started
next steps
- Commit chunk 2 (search re-skin) after verifying
- Fix layout bugs: sticky top-[114px] via --header-h CSS variable, mobile header search width
- Add type=search, aria-label, role=search, and submit button to global search
- Kill remaining N+1s (stream-card profile images, drops show participants, search) and bundle/defer Chart.js
- Fix stale wipe-17 hardcore copy and remove dead 'load more' chat loader
- Add distinct display face and tabular mono font via Tailwind config and layouts
key decisions
- Used @yield('robots') hook for per-page robots control (noindex,follow on search results)
- Used sr-only <h1> on home to preserve dense above-the-fold layout while fixing zero-h1 SEO gap
- Used Str::limit in search results title to prevent XSS and long-query issues
- Reused existing x-user-link component for search results to enforce visual consistency and eliminate duplicated markup
- Used ->query(fn...) on Scout search to eager-load relations without affecting Meilisearch query logic
open questions
- Will the Meilisearch index need any schema changes for the eager-load approach? (Pre-existing local indexing limitation)
- Need to verify the sticky navigation CSS variable approach works across all pages with three sticky bars
- Need to confirm the font-display swap behavior for new web fonts (no CLS)
1 week ago → 1 week ago