This is a follow-up brief for the MyTalent onboarding prototype in this repo. It adds a welcome and orientation layer that is currently missing, adds role branching, and changes the modal shape on desktop. Read the whole thing, then show me the planned changes before you write code. ## Bug to fix first With cleared localStorage, the deployed build loads straight into the logged-in home feed. No onboarding appears at all. A first-time visitor with no stored state must always enter at the start of the flow. Fix this before anything else, and tell me what caused it. ## What is wrong with the flow as designed The current flow opens by asking which categories someone likes. That only works for a person who already knows what MyTalent is. Someone who has never heard of it is being asked to express a preference about a product nobody has explained to them yet. So the flow needs two things it does not have. An orientation that says what this place is and what you do here. And a fork, because a person who wants to discover talent and a person who has a talent are doing completely different things and should not get the same six screens. ## What to add Four new steps in front of the existing flow, then a fork. W1 What MyTalent is W2 What you do here W3 Who you follow and why R What brings you here (the fork) After R, the fan path and the talent path diverge, then rejoin. ### W1, what MyTalent is Headline: MyTalent is where people show what they can do. Body: Musicians, athletes, dancers, chefs, makers. They post what they are working on, and the people who care about it follow along. Underneath, live numbers pulled from the adapter, not decoration: talent count, group count, and posts this week. Real figures are the only thing that tells a stranger the place is alive. On the visual side of the panel, show three real talent cards from the mock data, gently animating. Not an illustration, not a stock photo. The product itself is the explanation. ### W2, what you do here Headline: What you actually do here Four items, each with a small live example next to it rather than an icon: - Follow talents you like, and their work lands in your feed - Join a group and get better next to people doing the same thing - Post your own work and get seen by people who understand it - Enter competitions when they open, which is coming soon Keep the competitions line honest, it is tagged SOON in the nav and should read that way here too. ### W3, who you follow and why Headline: Who you follow, and why Three real talent cards from the mock data, each with a short reason line under the name that explains why someone would follow them. Reasons are concrete, for example: posts most days, runs the Rotterdam group, won last week's challenge. This is the panel that makes following feel like a decision rather than a chore, so give it the most room. ### R, the fork Headline: What brings you here? Three options as large selectable cards: - I want to discover talent - I have a talent to share - Both This writes to a new state field and changes what comes next. Make it reversible later from settings and say so in one small line. ## The two paths **Discover path.** Runs the existing flow: categories, explore, account, handle, interests, follow, home. Frame the interests step as building a feed. **Talent path.** Same steps, but ordered and worded differently: 1. What do you do, using the existing skills taxonomy, and this is required rather than optional here 2. Who do you want to meet, showing talents in the same field plus two or three adjacent fields, framed as people to know rather than people to follow 3. Then account, handle, interests, home as before The goal on the talent path is meeting other talents, so the copy should say that. Something close to: the point is finding people who do what you do. Do not turn it into audience-growth language. **Both.** Runs the talent path, and keeps the discover framing on the interests step. ## Modal shape Right now the steps are portrait. Change it. **Desktop, above 900px.** A landscape modal, roughly 900 by 560, centred, with a scrim behind it. Two columns. The left column, about 45 percent, carries the visual: live talent cards, group cards, feed preview, whatever that step is illustrating. The right column carries headline, body and controls. The left column is not decorative, every step shows real product content there. **Mobile, below 900px.** Full-screen sheet, single column, visual above content, controls pinned to the bottom. ## Stepper and progress Across the top of the modal, inside it, on both breakpoints: - A segmented progress bar with one segment per step, filled for completed, brand colour for current, faint for upcoming - A step counter reading Step 3 of 9, using the real total for whichever path the user is on, since the two paths differ in length - The step name next to the counter Controls at the bottom of the modal: Back on the left from step two onward, Next on the right. Next is the primary button and it says what happens, so on the last step it reads Go to my feed rather than Next. A quiet Skip for now sits next to Back on the three welcome steps only. The fork and everything after it is not skippable. Keyboard: Enter advances, Escape does nothing on the welcome steps because there is nowhere to escape to yet. ## State additions The store is at localStorage key mytalent-onboarding and currently holds categories, preAuthFollows, skills, interests, follows, groups, handle, wallDismissed, completedSteps and an account object. Add: role "discover" | "talent" | "both" | null welcomeSeen boolean stepIndex number Bump the persisted version and handle migration from version 0 so an existing stored state does not crash. ## Copy rules Warm, direct, plain. Short sentences, uneven lengths. No marketing language, no superlatives, no growth-hacking words like unlock, supercharge or journey. Concrete over abstract. Never use em-dashes anywhere in UI copy or code comments, use commas, periods, "to", or restructure the sentence. ## What not to do - No illustrations, mascots or stock imagery. Every visual panel shows real product content from the adapter. - No auto-advancing slides. The person clicks Next. - The welcome steps are three, not five. If a fourth idea seems necessary, it belongs in the product, not the intro. - Do not add a video, a tour tooltip layer, or a confetti screen. - Do not gate the welcome behind an account. All four new steps run before signup. ## Acceptance criteria Walk through it yourself before telling me it is done: 1. Cleared localStorage plus a page load lands on W1, every time, on both breakpoints. 2. Desktop shows the landscape two-column modal. Resizing below 900px switches to the full-screen sheet without losing step position. 3. The progress bar segment count matches the real number of steps for the chosen path, and the counter total changes when you pick a different role. 4. Picking "I have a talent to share" makes the skills step required and shows the meet-other-talents wording. 5. Picking "I want to discover talent" skips the required skills step. 6. Back works from every step and never loses a selection. 7. Skip for now appears on W1, W2 and W3 and nowhere else. 8. Every left-hand visual panel renders real mock data, not a placeholder. 9. A stored state from the previous version loads without error after the migration. 10. Tab through the whole flow with no mouse and never lose the focus ring. ## Deliverable The updated app, plus a short note in FINDINGS.md explaining what the welcome layer fixes and why the fork exists. Show me the planned changes before writing code.