Motir

Estimate: 25m · Depends on: 1.0.5.2

Produce a viewable mockup of the three auth screens — sign-up, sign-in, and password reset — before any production React is written. The user reviews the mockup; Subtask 1.1.5 implements the React using this mockup as its source of truth.

Why this exists: Design-first ordering is a load-bearing product principle (see vision.html §13). Without a mockup subtask, visual decisions get made implicitly while writing React — by the time the user sees the rendered page, they're reviewing both the look and the code at once, which is much harder than reviewing the look first and the code second. This subtask creates the artifact that 1.1.5 reads.

What you'll do: Open Pencil (or another visual prototyping tool the coding agent can drive) and lay out the three screens using only the primitive components produced in 1.0.5.2 (Button, Input, Card). Both sign-up and sign-in screens must include a "Continue with Google" button as a peer sign-in method (visual placement convention: above the email field with an "or" divider between the two methods). Reference the awesome-design-md corpus for layout patterns common in auth screens. Save the result to /design/auth-screens.pen and export /design/auth-screens.png so reviewers without Pencil can still see what you drew.

Acceptance criteria

• Three screens drafted: sign-up form, sign-in form, reset-password request form (+ the confirmation screen that follows it).
• Sign-up and sign-in screens include a "Continue with Google" button (above the email field, separated by an "or" divider). Visual style follows Google's brand guidelines for sign-in buttons (white background, Google "G" logo, "Continue with Google" label).
• Each screen uses primitives from /docs/design-system.md exclusively — does NOT introduce new component patterns. The Google button composes Button variant="secondary" with the Google logo as leftIcon.
• Error states drawn for each form (invalid email, password too short, account not found, OAuth failure).
• Loading state drawn (button shows spinner during submit, including the Google button during OAuth redirect).
• Mobile breakpoint considered: at <640px, the card fills the width with reasonable padding.
• Output saved to /design/auth-screens.pen and /design/auth-screens.png.
• Reviewer can view the mockup and react before any React is written.

Context refs

• /docs/design-system.md — canonical visual reference
• /components/ui/Button.tsx, Input.tsx, Card.tsx — the primitives to compose from
• README.md — stack reference (Next.js + Tailwind)
• awesome-design-md — external pattern library, fetched at prompt-gen time