feat(onboarding): redesign the post-signup funnel steps

[tsahimatsliah]

Redesigns the post-signup onboarding funnel (/onboarding) into one visual language, from the signup wall through to the Plus step.

The paid /helloworld funnel is unchanged. Every shared surface here gates its onboarding treatment on isOnboarding, threaded from the page through FunnelStepper into FunnelProgressContext (useIsOnboardingFunnel).

Status: all review findings are addressed. One item still needs a human decision — see The new dependency. Preview: https://claude-onboarding-button-alignme.preview.app.daily.dev

---

The design language

• Shared chrome. FunnelStepTopBar — logo top-left (icon only below laptop, 24px on desktop), Skip top-right, an even 24px on all three sides. The row is sized off the logo, so the space above the wordmark matches the gutter beside it and the y position is identical on every step.
• One type scale. OnboardingHeadline / OnboardingSubheadline: one size, weight and 440px measure. Six steps previously used three different sizes.
• Docked glass CTA. FunnelGlassBar — a blurred, bordered bar the CTA sits inside, on a 440px rail (funnelStepRail), with a scrim so content dissolves under it. Used by the steps, by account details and by verify-email, so the primary action looks the same on all of them.
• Background. The giveback funnel's brand-gradient canvas (OnboardingBackground), ported with theme tokens via color-mix. The band is 21rem, so the colour occupies roughly the top fifth of the screen.
• Experiment (onboarding_chrome, default = control): the variant swaps the gradient for an animated edge-aura frame plus progress dots under the CTA. Read through useOnboardingChrome so the two pieces can't disagree.

Screens

• Signup wall, account details, verify email, sign-back. These render from the isAuthenticating branch before FunnelStepper mounts, so they take the funnel's chrome through an explicit isOnboardingFunnel prop rather than context — there is no context to read yet. It carries the headline scale and the glass CTA. Deliberately not folded into simplified, which eleven other surfaces set, including /helloworld and the recruiter modals.
• Pick tags. CTA is disabled rather than hidden below the minimum; floating search field; tighter tag grid (scoped, so feed settings and the post panels keep theirs); tag-styled preview toggle. The feed preview is capped at 3 cards per row with a matching width cap — it previously took its column count from the viewport and divided its own narrower box by six, so cards landed far under their designed 340px.
• Content types. Icons and an always-visible selection ring; retired types (Community picks, Standups) dropped — and the same filter feeds getContentTypeNotEmpty, so the "pick at least one" gate can't count a card the step never drew.
• Reading reminder. Full-width option rows with hints, in its own OnboardingReadingReminder; state extracted to useReadingReminder so Submit and skip sit in the docked bar. Implements the APG radio pattern (one tab stop, arrows move selection).
• Plus / Upload CV. Production's layouts kept; only the title pair follows the shared scale.

Where the Terms/Privacy notice appears

It lives on RegistrationForm, under the button that creates the account — not on the funnel shell, which also serves screens where the account already exists.

Screen	Notice
Signup wall	yes — the hero's own, tablet+ (unchanged from main)
Account details	yes — at every width
Welcome back / Log in / Verify email	no

Account details previously had none below tablet, so a phone could reach "Sign up" without ever being shown the terms.

Keeping it out of the paid funnel

Review found the redesign reaching /helloworld in thirteen places. All fixed:

• isGlass was hardcoded on six steps, so the paid funnel got the glass bar plus a second logo and Skip over its own stepper header. The gate now lives inside FunnelStepCtaWrapper, which reads useIsOnboardingFunnel() itself — no caller can get it wrong.
• useReadingReminder ran above the !isOnboarding early return, so /helloworld mounted it alongside main's ReadingReminder — which runs the same effects internally — and logged the step's impression twice per view. The onboarding branch is its own component now. FunnelReadingReminder.spec.tsx pins both directions.
• ReadingReminder is restored byte-identical to main; the new screen is a separate component, because the two differ in where the actions live.
• ContentTypes, OnboardingPWA, UploadCv, EditTag, RegistrationFieldsForm and FunnelProfileForm keep main's type scale, width caps, padding, field icons and containers off the onboarding path.
• Restored bg-gradient-funnel-onboarding-tall and the edit-tags branch that selects it.
• ProfileForm moved out of stepsFullWidth into an onboarding-only list.
• CTA copy restored: Get it for {browser} (not Add to {browser}).

The new dependency

⚠️ This is the one open question on the PR.

edge-aura draws the experiment arm's animated frame. MIT, zero runtime deps, no network calls or eval, and it honours prefers-reduced-motion. It is also two weeks old with a single maintainer, so:

• Pinned exactly (0.6.0, no caret) — a pre-1.0 package should not pull in an unreviewed 0.6.x.
• Loaded through next/dynamic, gated on hasAura. The engine is ~64 kB of canvas code and FunnelStepBackground renders on every funnel step, so a static import shipped it to the whole control cohort and into the extension bundle for a background they never see. Only the type import stays static, and that is erased at compile time.

It still needs an explicit yes from whoever owns the bundle: permanent build coupling (paths in three tsconfigs, a jest moduleNameMapper in three packages) for a decorative background, and extension releases go through store review. If the answer is no, the arm detaches cleanly — useOnboardingChrome is the only reader of the flag, and the gradient canvas is the control path either way.

Also worth a look

• The top-bar logo was a live link: linkDisabled only adds pointer-events-none, keeping the real href and the tab stop, so Tab + Enter walked the user out of the funnel mid-flow. The mark is drawn directly as decoration now.
• The content-type cards are a multi-select set, so they carry role="checkbox" + aria-checked rather than aria-pressed. The hidden <input> behind them was unreachable and nothing read its name, so it is gone. The unselected ring moved to border-subtlest-primary — it is the only affordance marking a card as selectable.
• ⚠️ One change is intentionally global. PlusListItem's tooltip dropped its width override on every Plus surface. The old value fought itself: !tablet:max-w-72 was dead (Tailwind's important prefix goes after the variant), leaving !max-w-full to un-cap the tooltip to the full viewport. That was wrong everywhere, so the fix is global. Nothing else about those tooltips changes; the centering is untouched.
• Fixed a pre-existing strict-mode violation in ContentTypes/helpers.ts, surfaced once the file entered the changed-file guard.

Reviewing

• Storybook: Components/Onboarding/Signup funnel steps — per-step stories with the experiment arm as an arg, plus mobile and desktop overviews for both arms.
• Worth a click through /helloworld on the preview. The paid-funnel branches were restored by reading main's markup; only ReadingReminder is provably byte-identical, and the reading-reminder double-log above is the kind of leak that survives a read-through.
• To review the aura arm on the preview, the flag default needs a temporary flip — GrowthBook dev tools are off in preview builds.

🤖 Generated with Claude Code

Preview domain

https://claude-onboarding-button-alignme.preview.app.daily.dev

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
daily-webapp	Ready	Preview	Jul 30, 2026 6:51pm
storybook	Building	Preview	Jul 30, 2026 6:51pm

[tsahimatsliah]

Summary

A genuinely large redesign of the post-signup funnel, and the craft in it is high — the shared type scale, the funnelStepRail, moving the isGlass gate inside FunnelStepCtaWrapper so no caller can leak it, the FeedContext maxNumCards cap (a real bug: the embedded preview was dividing its own narrow box by a viewport-derived column count), the getContentTypeNotEmpty fix so the gate can't count a card the step never drew, the strict-mode fix in filters/helpers.ts, and removing the focusable-but-pointer-events-none logo link that let Tab + Enter walk out of the funnel. AuthHeader.spec.tsx pinning both directions of onboardingHeadline is the right instinct given simplified has eleven consumers.

Three blocking items, all inline, plus notes. None of them are about the design.

Blocking

1. New third-party dependency edge-aura@^0.6.0 — first published two and a half weeks ago, one maintainer, ~478 downloads/month, statically imported so it ships to the 100% control cohort and into the extension bundle. Needs an owner's sign-off, an exact pin, and a dynamic import gated on hasAura.
2. Terms/Privacy notice disappears from the phone-width signup flow — hideSignupDisclaimer plus the FooterLinks removal leaves no consent line on any screen below tablet. Compliance call, not a visual one.
3. /helloworld now double-logs the reading-reminder impression — useReadingReminder is called above the !isOnboarding early return, alongside main's ReadingReminder which logs the same event. The paid funnel is the one thing this PR promises not to touch.

Non-blocking

Inline: the two different CTA fallback labels (Continue vs Next), the unmentioned global tooltip alignment change in PlusListItem, retiring content types by display-title string, and aria-pressed vs role="checkbox" on CardCheckbox.

Two description issues, since the description is what a reviewer navigates by:

• The "Removed FunnelVerifyEmail" bullet describes intra-branch churn, not a change to main. That file never existed on main — it was added in this branch's first commit and deleted in a later one, so the net diff contains nothing. The two bugs it claims to have fixed (stale-closure auto-submit, Resend cooldown) were bugs in code that never shipped. There's nothing for a reviewer to verify and it shouldn't reach a changelog.
• The PlusListItem note covers the width override but not the alignment change that ships with it.

Reviewability

55 files, +3,222/−406, and it bundles a redesign, a new experiment, a new runtime dependency, cross-cutting edits to shared primitives used well outside onboarding (SearchField, CardCheckbox, FeedContext, FeedPreviewControls, PlusListItem) and ~1,190 lines of stories. The description itself says an earlier revision leaked into /helloworld in twelve places and that only ReadingReminder is provably byte-identical to main — and finding 3 above is a thirteenth leak that survived that pass, found by reading one early return. That pattern is the argument for splitting: the dependency plus the aura/dots experiment arm is a self-contained slice that would take the riskiest part out of this diff, and whatever ships should get a human click-through of /helloworld on the preview rather than a read-through of restored markup.

Verification

• Read the review guide, code-style and privacy rules
• Verified the edge-aura registry metadata and unpacked the published tarball (reduced-motion handling, no network/eval, static engine import)
• Traced the isOnboarding threading: page → FunnelStepper → FunnelProgressContext → useIsOnboardingFunnel, and every consumer of the new props
• Traced the mobile signup path screen by screen for the disclaimer regression
• Checked the mount effects in useReadingReminder against main's ReadingReminder
• Checked shared-primitive blast radius and FunnelVerifyEmail against main's history
• Not verified by me: /helloworld end to end, the aura arm rendering, light theme on the new cards, and any visual comparison against design
• Tests not run locally (no node toolchain in my environment); CI was green/pending at review time

Verdict

Changes requested (posted as a comment — GitHub blocks a formal request-changes on the caller's own PR) on the three blocking items.

Reviewed by AI.

[tsahimatsliah]

Blocking (dependency risk): this static import puts a brand-new third-party package into the shared bundle. From the npm registry today: edge-aura was first published 2026-07-12 (about two and a half weeks ago), latest 0.6.0, one maintainer, ~478 downloads in the last month, 122 kB unpacked / ~64 kB of dist JS. I unpacked the tarball — the code itself looks clean (no network calls, no eval, MIT, zero runtime deps, and it does honour prefers-reduced-motion), so this is about exposure rather than anything malicious.

Three concrete problems:

1. It ships to everyone, for a feature almost nobody sees. edge-aura/react statically imports the engine chunk, and this module is imported at the top of FunnelStepBackground, which renders on every funnel step including /helloworld. The experiment defaults to gradient, so 100% of users download the engine and the aura arm is the only cohort that uses it. next/dynamic (or React.lazy) gated on hasAura keeps it out of the control path entirely.
2. It lands in the extension bundle, which is why this PR needs edge-aura mappings in the extension's tsconfig and jest config. Extension releases go through store review, so a bad 0.6.x from a single-maintainer package is expensive to undo.
3. ^0.6.0 on a pre-1.0 package means any 0.6.x publish is pulled in unreviewed. Repo convention is to pin tightly enough that an unreviewed release can't disrupt builds — for a decorative dependency this new, I'd pin the exact version.

Independent of the above: adding a dependency that needs paths overrides in three tsconfigs plus a jest moduleNameMapper in three packages is a lot of permanent build coupling for a background animation. Worth an explicit "yes we want this dependency" from someone who owns the bundle before it merges — has that happened?

Reviewed by AI.

[tsahimatsliah]

Two of the three are fixed in 1b264b0:

• Pinned to an exact 0.6.0, no caret.
• next/dynamic gated on hasAura, so the control cohort and the extension bundle no longer download the engine. The import type { EdgeAuraOptions } is erased at compile time, so it costs nothing.

The third one is yours, not mine to answer: nobody who owns the bundle has said yes to the dependency. I have written the trade-off into the description under "The new dependency" so it is a decision on the PR rather than a line in package.json. If the answer is no, the aura arm is separable — useOnboardingChrome is the only thing reading the flag, and the control path is the gradient canvas that ships regardless.

[tsahimatsliah]

Status — ready for internal review

Everything from the review round is fixed and those threads are resolved. One thread is deliberately left open: the edge-aura dependency, which needs a yes/no from whoever owns the bundle. It is the only thing blocking.

Since the review, three things changed beyond the review items:

• The brand gradient is half as tall (42rem → 21rem). It was reaching 69% down a 900px screen; it now fades out by 34%.
• The sign-back screen was broken, not just misaligned. FunnelStepTopBars sticky wrapper had no width, so under that shells items-center it shrink-wrapped to 80px and centred itself — the logo sat on top of the "Welcome back!" headline. Fixed at the component, so it holds under any parent. The headline also now takes the funnel scale.
• Account details and verify-email ended on a bare button while every step docks its CTA in the bordered bar. The bar is its own FunnelGlassBar now, shared by all three.

Two things to know while reviewing:

• onboardingHeadline was renamed isOnboardingFunnel on the props threading through AuthOptions, because it now carries the CTA treatment as well as the headline scale. AuthHeader keeps the old name — it only renders a headline.
• The Terms/Privacy line moved onto RegistrationForm, so it shows on the screen that creates the account and nowhere else. Account details previously had none below tablet.

Still worth a human pass: a click through /helloworld on the preview. Thirteen leaks into the paid funnel have been found and fixed across two review rounds, and the last one was invisible to tests — only ReadingReminder is provably byte-identical to main.