Build a clickable onboarding prototype for MyTalent. Read this whole brief before writing any code, then plan the file structure and confirm it back to me in one short message before you start building. ## What MyTalent is A global talent and creator social platform. Users are talents (musicians, athletes, dancers, chefs, developers, and so on), fans who follow them, and clubs or organisations who scout them. The product surface is a feed, an explore page, talent profiles, groups, posts, notifications, messaging, plus a points and XP system with achievements. Design reference, the Option #3 direction in their Figma: https://www.figma.com/design/TVEEDu1bmaTsynyt92QFi9/MyTalent?node-id=1120-32425 That section holds the desktop frames at 1512 wide (Option #3 NEW REVISED 3 is the current one) and the mobile frames at 430 wide. Pull the component vocabulary from there: sidebar navigation, the What's new composer, feed cards with view counts, talent cards with a role label, This weeks talents rail, Trending Topics with post counts, and the profile block carrying XP. Production runs at mytalent.com on Next.js 15 App Router, Tailwind, Cloudflare, with native apps alongside the web app. Their Tailwind setup uses semantic token names: bg-brand, bg-brand-hover, text-onBrand, bg-default, border-borderTertiary, text-caption, leading-lh-caption. Use those exact names so this can be lifted into their codebase later. ## What their current onboarding actually does I audited this on production with a real new account. Do not reproduce any of it. It is listed so you know what problems this build exists to solve. Nine screens. After registering (Apple, Google, or email plus a password with strict rules), the user lands on a fully loaded home feed, and a blocking modal appears on top of it with no close button, no skip and no back. Four steps: display name, username (locked for 30 days), date of birth, country. Then an interstitial saying the account was created, with a single button and no skip. Then a second phase of three steps that are all skippable: talents, interests (max 5), profile picture. Then an achievement screen. Confirmed problems: - Selecting a talent and an interest produced a Discover Talents rail identical to the one rendered before onboarding started. The personalization step changes nothing the user can see. - Nothing in onboarding seeds follows or group joins, so the Following tab is empty on arrival. - Identity and compliance steps are hard gated. The personalization steps are optional. - Age is asked twice (passive 16+ at signup, date of birth again at step 3) and verified neither time. - Date of birth uses a calendar picker that opens on the current month with no typed entry. - The talents step has a search field. The interests step uses the same taxonomy and has none. - Username suggestions are all random-adjective-plus-number and never offer the clean handle. No live availability check on a field locked for 30 days. - No autocomplete attributes anywhere, so password managers and autofill do not work. ## What to build A standalone Next.js 15 App Router app, TypeScript, Tailwind. Seven screens, each on its own route, state persisted so a refresh resumes where you left off. All data comes from a single mock adapter module so swapping to real APIs is one file. ### Routes / A1 category picker, no auth /explore A2 browse, follow and join while logged out /join B account creation /setup/handle C1 /setup/interests C2 /setup/follow C3 /home D first-run home The wall in A3 is a bottom sheet over /explore, not a route. ### Screen specs A1, route /. One question, "What are you into?", and the ten category tiles: Arts, Business, Crafts, Culinary, Education, Lifestyle, Music, Performance, Sports, Technology. Multi-select. Above the tiles, a "Busiest right now" panel showing four categories with post counts as social proof (Music 12.3K, Arts 15.8K, Sports 9.6K, Lifestyle 8.8K). Primary button reads "Show me {first selected category}" and is disabled until something is picked. Secondary ghost button, "Just browse everything", which skips selection. A2, route /explore. Talent cards and group cards filtered by the A1 selection. Every card has a working Follow or Join button while logged out. Selections are held in local state. A dark bar pinned to the bottom shows "{n} saved. Make an account to keep them." with a Keep button. A3, sheet over /explore. Fires automatically on the third follow, or on Keep, or on any write action. Headline "Keep your {n} picks", body explaining the feed is already built and it takes about twenty seconds. Primary "Create my account", ghost "Not yet, keep looking" which dismisses. Do not fire it again automatically once dismissed. B, route /join. One screen. Apple, Google, passkey as outline buttons. Then email with a magic link, no password field at all. Then date of birth as three separate typed inputs, DD, MM, YYYY, with autocomplete set to bday-day, bday-month and bday-year. Never a calendar picker. Then country as a select, prefilled to Netherlands with a green note saying it was detected from the connection and can be changed. Helper text under the primary button: "Age and country are asked once, here." C1, route /setup/handle. Handle only. An @ prefix inside the field. Live availability check against the mock adapter, debounced, showing a green "@name is free" or red "@name is taken". Three suggestions offered as pills, and the clean form comes first (adem_nl, ademvp, adem_builds). No display name step and no avatar step. Helper text: "Display name and photo come later, not now." C2, route /setup/interests. The most important screen. Talents and interests merged into one step, both drawing on the same taxonomy, both prefilled from A1. Sticky at the top, a live feed preview panel: the label "Your feed", a count in mono type, a row of avatar tiles that animate in as picks are made, and a progress bar. The count must be derived from actual selection state so the number visibly moves on every tap. This is the whole argument of the redesign, so it has to feel immediate. Below it, two groups. "You do this (optional)" as chips, and "You want to see this, {n} of 5" as chips with a hard cap of 5 that disables the rest. Both groups get a search field. C3, route /setup/follow. Talents and groups generated from the C2 selection. Anything followed back in A2 is already on. Groups get equal weight with talents, not a footnote. Soft gate at five: the button reads "Continue with {n} follows" below five and "Go to my feed" at five or more, and is never disabled. Hint text below shows how many more would help. D, route /home. The first-run state of the home screen, which is deliberately different from steady state: - Header with the handle, following count and group count. - A dark XP card: "First steps", "50 / 200 XP" in mono, a progress bar, and a caption saying posting once earns the next achievement. - A composer that is not blank. It reads "Share your first {their first picked skill} post". - A confirmation card stating the feed was built from n interests, n follows and n groups. - Following and For you tabs, with Following selected by default and actually populated. - A This week's talents rail built from who they followed. - Feed posts from the accounts they followed. - Bottom nav: Home, Explore, Groups, Alerts, You. ### State model One store (Zustand or React context, your call) persisted to localStorage, with these fields: categories string array preAuthFollows string array, from A2, before an account exists skills string array, the "you do this" picks interests string array, max 5 follows string array groups string array handle string wallDismissed boolean completedSteps string array Pre-auth picks must survive account creation and appear again in C3 and on /home. That continuity is the point of the whole flow, so make it obvious in the UI that it happened. ### Design system - Brand #4fa4ff, taken from the Figma file variable Brand Color/Light. Hover #3b8de6, text-on-light #1560ad, wash #eaf3ff. - Page background #eef2f9, surface white, ink #0d1526, muted #66718a, border #e2e8f3. - Radius 16px on cards, 11px on controls, pill on chips. - Typography: Plus Jakarta Sans for everything, DM Mono for numeric readouts only (the feed count, the XP figure). Do not use Inter, system-ui, Roboto, Open Sans, Arial or Helvetica. - Mobile first at 430px, which is the width of the Figma mobile frames. On viewports above 900px, centre the app in a device frame rather than stretching it, because onboarding is a phone experience. ### Copy rules Sentence case throughout. Active voice. A button says what happens: "Create my account", not "Submit". Never use em-dashes anywhere in UI copy or code comments, use commas, periods, "to", or restructure the sentence. Empty states are an invitation to act, not an apology. ## Constraints - No backend. Everything behind lib/adapter.ts returning mock data with realistic latency, so real endpoints drop in later without touching components. - Use the Figma placeholder names for people (Mohamed El-Sharif, Jean-Jacques Barcola, Val Caroche, Lyn Okafor, Sara Vermeulen, Candice Moreau, Andre Myhren), not real production accounts. - Every input needs a correct autocomplete attribute. This is a direct fix for an audited defect, so do not skip it. - Keyboard focus must be visible on every interactive element. Respect prefers-reduced-motion. - Fire an analytics event per step through a stub track function in lib/analytics.ts, taking an event name and a payload: onboarding_started, one event per step with time on step, interests_selected with count, follows_completed with count, groups_joined with count, onboarding_completed. Log to console for now. - No feature carousel, no intro slides, no "you're all set" interstitial, no forced notification permission prompt. ## Acceptance criteria Walk through it yourself before telling me it is done: 1. Picking Music in A1 filters A2 to musicians. 2. Following three people in A2 fires the sheet once, and dismissing it does not fire it again. 3. Those three follows appear already toggled on in C3 and are counted on /home. 4. Tapping an interest in C2 visibly changes the feed count in the same frame. 5. The 5 interest cap disables remaining chips rather than silently ignoring taps. 6. C3 is passable with zero follows and the button text changes accordingly. 7. /home Following tab has content in it, not an empty state. 8. A refresh mid flow resumes on the same step with selections intact. 9. Tab through every screen with no mouse and never lose the focus ring. ## Deliverables The app, a README.md covering how to run it and where the adapter boundary sits, and a short FINDINGS.md listing which audited defect each screen fixes so I can hand that to the client alongside the build. Do not start until you have shown me the planned file structure.