Rebuild the responsive product UI and complete interaction quality gates

[Vinosaamaa]

Updated owner direction: complete visual reconstruction

The owner rejected the current UI and explicitly requested a modern UI design skill, a complete product redesign, and proper support for different screen sizes and mobile devices. Existing mockups and visual decisions may be superseded. Begin the independent visual reconstruction now while service launch work continues; final interaction and release gates still depend on the capability issues below.

Use the upstream anthropics/skills frontend-design skill, pin its source revision and license, and vendor a usable copy in the repository. Write a Chanter-specific design plan before code: palette, typography, spacing, layouts, navigation, components, responsive behavior and state treatments. Review the plan against real education/community workflows before implementation.

Visual reconstruction acceptance

• Replace the existing visual system across marketing/auth, app navigation, Home, Course workspace, Community, Friends/DM, Inbox/Calendar, teaching, settings/billing, admin and legal surfaces; do not limit the work to color overrides.
• A versioned design document and component/token system explain the choices and supersede obsolete visual specifications explicitly.
• Mobile layouts prioritize usable navigation, reading and messaging; tablet and desktop layouts adapt deliberately without clipping or excessive empty space. Respect safe areas, software-keyboard space, reduced motion and touch interaction.
• Review actual screenshots at 360/390, 768, 1280, 1920 and 3840 CSS-pixel widths; test portrait/landscape, long names/content, dialogs, nested tabs, tables and empty/error states.
• Existing real API behavior, accessibility semantics and secure session boundaries continue working. No synthetic production data or fake functionality is introduced for appearance.
• Document skill usage, implementation, route/control inventory, visual review, browser checks and exact-head CI in the final issue PR.

Parent

#107 (identified by #238)

What to build

Finish Chanter's user-facing quality pass after the underlying capabilities are real. Every visible interactive control must work or be removed, all critical journeys must be keyboard/screen-reader operable, and the approved UI must remain responsive and performant on supported devices.

Acceptance criteria

• A route-by-route control inventory has no unexplained disabled, placeholder, no-op, demo-only, or "not available yet" control in production.
• Essential controls are implemented end to end; nonessential future controls are removed or replaced by truthful non-interactive status without suggesting an action is available.
• Loading, empty, partial, offline/reconnecting, permission-denied, validation, rate-limit, provider-outage, and retry states are designed for every critical surface.
• Automated axe checks and manual keyboard/screen-reader checks meet WCAG 2.2 AA for auth, Home, Course, Community, Friends/DM, billing, admin, and legal journeys.
• Focus order/visibility, landmarks, labels, tab semantics, dialogs, live regions, contrast, reduced motion, and touch targets are verified.
• Desktop 1280/1920/4K and representative mobile/tablet viewports have no clipping, overlap, horizontal overflow, or unusable fixed controls.
• Route-level code splitting and asset optimization meet documented JS/CSS/image budgets and p75 Core Web Vitals targets on a production-like connection.
• Chromium, Firefox, and WebKit smoke suites prove the critical journeys with zero unexpected console/page/network errors.

Blocked by

• Ship transactional email and durable secure browser sessions #242
• Store Course Resources durably and quarantine unsafe uploads #244
• Productionize AI orchestration, safety, usage metering, and evaluations #248
• Add platform administration, abuse reporting, and moderation operations #249
• Replace simulated plans with truthful beta and provider-backed billing #250
• Implement account export, coordinated deletion, retention, and legal truthfulness #251