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: review findings are addressed. One item needs a human decision before merge — the edge-aura dependency. Preview: https://claude-onboarding-button-alignme.preview.app.daily.dev

---

What ships to everyone

The funnel has no background treatment of its own — every step renders on the flat page surface. The redesign is the chrome around the content:

• Shared top bar. 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.

Per screen

• 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.

The experiment

onboarding_chrome, default control:

Arm	Renders
control	flat surface, no progress dots
aura	animated edge-aura frame + dots under the CTA

Read through useOnboardingChrome so the two pieces can't disagree. Everything under "What ships to everyone" is baseline and is not gated by this flag.

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.
• ProfileForm moved out of stepsFullWidth into an onboarding-only list.
• CTA copy restored: Get it for {browser} (not Add to {browser}).

The new dependency

⚠️ The one open question on this 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 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 frame, 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 control ships 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, and FunnelStepTopBar.spec.tsx pins that.
• 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.

Tests

Five specs, each pinning something that broke or could silently break:

Spec	Pins
FunnelReadingReminder.spec.tsx	the hook is never called outside the funnel, exactly once inside — the doubled impression event
FunnelStepTopBar.spec.tsx	the strip's own width, and that the logo is decoration with no link to tab into
RegistrationForm.spec.tsx	the consent line shows in the funnel and nowhere else
AuthHeader.spec.tsx	both directions of the funnel headline scale
OnboardingSignupHero.spec.tsx	the shell renders no footer chrome and no disclaimer of its own

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 31, 2026 12:23pm
storybook	Building	Preview	Jul 31, 2026 12:23pm

[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.

[tsahimatsliah]

Summary

Thorough, well-documented redesign, and the shared-code gating is mostly careful (useIsOnboardingFunnel inside FunnelStepCtaWrapper is the right call). CI is green and the new specs pin the important regressions.

However, the PR's core invariant — "the paid /helloworld funnel is unchanged" — does not hold for three steps. Those are the blockers below; everything else is non-blocking.

Blocking

1. FunnelProfileForm renders a dead duplicate CTA on /helloworld.
The step is now always wrapped in FunnelStepCtaWrapper with cta={{ label: 'Sign up' }}, but form/type="submit" and any onClick are spread only when isOnboarding. On the paid funnel hasGlass is false, so the wrapper still renders its sticky primary button — with no handler, no form, and the label "Sign up" — while RegistrationFieldsForm also renders its own submit button (formId is undefined there). Result on /helloworld: two "Sign up" buttons, the docked one inert. Suggested direction: render the wrapper only when isOnboarding, mirroring what FunnelReadingReminder does with its early return.

2. FunnelBrowserExtension changes the paid funnel's step.
The rewrite is unconditional: the CTA moves from inline in the content column into the wrapper's sticky footer, the headline moves from LargeTitle to OnboardingHeadline (typo-title1), the skip line drops to Callout/Tertiary, and the video cap goes 48rem → 40rem. On top of that, skip is now passed unconditionally, and BrowserExtension is in stepsWithOnlySkipHeader — so on /helloworld the stepper Header skip is still rendered and the wrapper's own Skip button appears below the CTA. That is a second skip control plus an extra FunnelTargetId.StepCta-tagged element on a step that previously had one. Please gate the new layout and the skip prop on isOnboarding.

3. FunnelEditTags changes the paid funnel's layout and CTA behavior.
funnelStepRail and py-6 pt-3 are applied unconditionally, replacing tablet:max-w-md ... p-6 pt-10 for /helloworld (28rem → 32rem, different vertical rhythm, laptop:justify-center dropped from containerClassName). Separately, the CTA changes from hidden (opacity-0 + pointer-events-none + aria-hidden) to visibly disabled below the tag minimum — a deliberate and good change for onboarding, but it also ships to the paid funnel. Both should be behind isOnboarding, or called out explicitly as intended paid-funnel changes.

Non-blocking

4. hideSignupDisclaimer looks like a no-op on the onboarding path. packages/webapp/pages/onboarding.tsx:245 sets it, and FunnelHeroLanding/FunnelOrganicSignup pass it too — but OnboardingRegistrationForm only renders disclaimer in the !isOnboardingTrigger branch, and these call sites all use AuthTriggers.Onboarding. Worth confirming there is a real path where it does something; otherwise it is a new prop threaded through three components for nothing.

5. RETIRED_CONTENT_TITLES keys on API display copy. Documented in the file, and consistent with getAdvancedContentTypes/contentTypeIcon — but this one silently un-retires cards on a backend rename rather than just losing an icon, and the same rename would also change what the "pick at least one" gate counts. Given the API returns a stable id, is a title-keyed retire list the right long-term shape, or should this be driven by a backend flag? At minimum a test asserting the two titles still exist in the fixture would catch drift.

6. edge-aura tsconfig paths. Three tsconfigs now hard-code ../shared/node_modules/edge-aura/dist/react.d.ts. That path depends on pnpm's layout and on the package's internal dist filename, and nothing fails loudly if either moves — a local ambient .d.ts for the edge-aura/react subpath would be more stable. Agreeing with the PR's own flag: a 2-week-old, single-maintainer, pre-1.0 dependency entering the extension build (delayed store-review rollback) for a decorative frame needs an explicit owner yes. Since the aura is /onboarding-only, consider keeping it out of the extension bundle entirely rather than relying on next/dynamic never being reached there.

7. Comment volume. Many of these blocks are multi-paragraph design rationale (FunnelStepBackground's aura options, FunnelGlassBar, common.ts, FunnelStepTopBar). This repo's convention is to keep that reasoning in the PR description/commit message rather than in the source, and the PR description already covers most of it. Trimming would also shrink an already-large diff.

8. FunnelProgressContext and useIsOnboardingFunnel live in FunnelStepDots.tsx. Fourteen or so modules now import funnel-wide context from a file named after a decorative component. A FunnelProgressContext.tsx (or shared/context.ts) would read better.

Verification

• Read apps-pr-review-guide.md, code-style-rules.md, repo conventions
• Full diff traced across shared consumers (CardCheckbox, FeedPreviewControls, FeedLayoutProvider, PlusListItem, auth components)
• Both funnels traced per changed step (isOnboarding gating audited step by step)
• Experiment default (onboarding_chrome → control) and conditional evaluation checked
• CI inspected — all checks green
• Not manually verified on preview; /helloworld regressions above are read from the diff and should be confirmed on the preview build

Verdict

Comment — three paid-funnel regressions should be fixed or explicitly accepted before merge.

Reviewed by AI.

[tsahimatsliah]

Question (non-blocking): does this do anything? OnboardingRegistrationForm renders disclaimer only in the !isOnboardingTrigger branch, and every call site that sets hideSignupDisclaimer (here, FunnelHeroLanding, FunnelOrganicSignup) uses AuthTriggers.Onboarding. If there is no reachable path where the strip would otherwise render, this prop is threaded through three components for no effect and could be dropped.

Reviewed by AI.

[tsahimatsliah]

Good question, and it is closer than it looks. Two of the three call sites hard-code AuthTriggers.Onboarding, so there the prop is indeed inert. This one is loginState?.trigger || AuthTriggers.Onboarding — loginState is set by whoever called showLogin, so a non-Onboarding trigger is reachable in principle and the inline strip would render.

I have kept it and written that reasoning into the comment rather than dropping it, since the failure mode of being wrong is a terms strip appearing mid-form on the wall. If you would rather trade that for three fewer props, say so and I will remove it.

[tsahimatsliah]

Non-blocking: this hard-codes both pnpm's directory layout and edge-aura's internal dist/react.d.ts filename, in three tsconfigs. A patch release that renames the bundled types file, or a hoisting change, breaks typecheck with no other signal. A local ambient declaration for the edge-aura/react subpath in shared would be self-contained and would not need duplicating into extension/storybook.

Separately, on the dependency question the PR raises: since the aura is /onboarding-only, is there a reason to keep it resolvable from the extension build at all rather than excluding it there outright? Extension rollback goes through store review, which is the expensive direction.

Reviewed by AI.

[tsahimatsliah]

Both fair. On the ambient declaration: it would remove the pnpm-layout coupling, but the honest version still has to point at edge-aura/dist/react to re-export the real types, so it trades one hard-coded path for another unless we hand-write the prop types and lose them drifting from the package. The clean fix is moduleResolution: bundler/node16 so TS follows the exports map, which is a repo-wide change well outside this PR.

On excluding it from the extension build: agreed that is the expensive direction to roll back. It is only resolvable there because the extension compiles shared, which contains FunnelStepBackground — the next/dynamic gate keeps it out of the runtime bundle, but typecheck and jest still need to resolve the specifier.

I have deliberately not churned three tsconfigs while the dependency itself is undecided — if the answer on edge-aura is no, all of this wiring goes with it. If it is yes, I will do the resolution work as a follow-up rather than bury it here.