Estimate: 32m · Depends on: 1.1.1, 1.1.2, 1.1.3, 1.1.4
Translate the approved mockup from 1.1.1 into real React pages, wired to the Better-Auth setup from 1.1.2, the user repository from 1.1.3, and the Google OAuth provider from 1.1.4. The mockup is the source of truth for the visual outcome — this subtask should not make new visual decisions; if something feels off in the mockup, raise it as a re-plan of 1.1.1 rather than diverging here.
Why depend on 1.1.4 (Google OAuth): the sign-up/sign-in pages ship with a working "Continue with Google" button, not a stub. Half-finished implementations that say "Google login coming soon" are explicitly disallowed by CLAUDE.md. The dependency forces ordering: Google OAuth lands before the pages, so when the pages are built the button is wired the first time.
What you'll do: Create /app/(auth)/sign-up/page.tsx, /app/(auth)/sign-in/page.tsx, /app/(auth)/reset-password/page.tsx. Each page composes Button, Input, Card from /components/ui/. Email/password submit handlers use Server Actions calling Better-Auth's server API; form state uses useFormState for error display. The "Continue with Google" button on sign-up + sign-in is a Button variant="secondary" whose onClick initiates Better-Auth's OAuth sign-in flow (signIn.social({ provider: "google" })); it shows a spinner during the redirect. Empty + loading + error states from the mockup must all render.
/design/auth-screens.png (pixel-equivalence not required; visual-equivalence is)./app./app with a session cookie set. Button shows a spinner during the redirect.aria-live="polite"; keyboard tab order is sensible (Google button is reachable via Tab before the email field)./design/auth-screens.pen + /design/auth-screens.png — the mockup from 1.1.1/docs/design-system.md — token reference/components/ui/Button.tsx, Input.tsx, Card.tsx — primitives to compose/lib/auth/index.ts — Better-Auth instance + Google provider (from 1.1.2 + 1.1.4)/lib/users/repo.ts — user repository (from 1.1.3)signIn helpers for credentials + social providers