@web-my-money/create-surface

Package @web-my-money/create-surface (folder create-wmm-surface). Scaffolds an on-brand WMM Next.js surface — theme + brand logo + tokens + a working sample page.

npm create @web-my-money/surface                   # landing preset, into ./
npm create @web-my-money/surface my-app            # into ./my-app
npm create @web-my-money/surface -- --preset app   # dashboard preset
npm create @web-my-money/surface -- --force        # overwrite existing files

Presets

| Preset | Adds | Built from | |--------|------|-----------| | landing (default) | app/page.tsx + app/content.ts — hero, feature grid, testimonials, footer | @web-my-money/blocks/site | | app | app/page.tsx + app/data.ts — sidebar, dashboard header, metric cards, data table | @web-my-money/blocks/app |

Both presets also write the shared wiring: app/globals.css, app/layout.tsx, components/theme.tsx (theme boot + provider + toggle + brand logo header).

Each sample page is data-as-props — edit content.ts / data.ts, not the components. The landing page ships with the 3D HeroCanvas commented in (install the three peers to enable).

Existing files are skipped unless --force (safe to run inside a live app). Then follow the printed steps: npm install @web-my-money/{tokens,brand,blocks,preset-wmm} (public npm, no .npmrc/token needed), rename appName.

It does not run a Next.js generator — for a brand-new project, run create-next-app first, then this.

Spinning up a NEW CLIENT's marketing site: --client <slug>

This is the fast path for a brand-new client's landing/marketing site (med spa, e-commerce, local service, etc.) — the same working landing preset, but with the WMM branding swapped for an obvious, marked client-brand seam instead of a WMM logo left in by accident.

npm create @web-my-money/surface acme-medspa -- --preset landing --client acme-medspa

--client <slug> only applies to --preset landing (marketing sites). For a client app-shell/dashboard (internal tool, portal) instead, use ../../templates/preset-client-template/ — see its README for why that's the right tool for that case.

What you get

• Everything the default landing preset gives you (hero, feature grid, testimonials, footer — all data-as-props from app/content.ts), plus:
• app/client-theme.css — a brand-override CSS file (imported by app/globals.css right after the base @web-my-money/tokens/theme import) with placeholder loud-magenta (#ff00aa) --primary / --accent / --ring values marked TODO, so it's obvious they're not final.
• components/logo.tsx — a placeholder ClientLogo (client initial on a solid brand-color chip), used by app/layout.tsx in place of WmmLogo. Same pattern as ClientLogo in templates/preset-client-template/ClientAppShell.tsx.
• app/layout.tsx — no WmmLogo, no wmmMetadata/WMM favicon; plain Next.js metadata with a TODO title/description placeholder derived from the slug, and a TODO themeColor (it used to default to WMM's navy).
• app/content.ts — neutral TODO: placeholder copy for this client. The WMM variant of this file ships WMM's own hero copy ("Web My Money builds the full funnel …") and a © <year> Web My Money footer; a client project must never start from that.
• package.json — depends on @web-my-money/tokens + @web-my-money/blocks only. No @web-my-money/brand, no @web-my-money/preset-wmm — those are the WMM identity packages and installing them in a client repo is forbidden (INSTALL_GUIDE.md §4.1).
• Not components/app-chrome.tsx — that file imports and renders <WmmLogo/>, so client mode skips it entirely; app/layout.tsx inlines its own chrome around <ClientLogo/>.

Enforced, not documented. npm run check:client-scaffold (part of npm run verify) actually runs this CLI in --client mode into a temp dir and fails on any WMM identity marker — brand/preset-wmm deps, Wmm* components, "Web My Money", webmymoney, or a WMM brand hex. It also scans the WMM scaffold in the same run and fails if that one comes back clean, so the scanner cannot silently stop working and report a false pass. Every bullet above was a real leak in this CLI until 2026-08-12.

This mirrors packages/tokens/scripts/gen-client-theme.mjs's brand-spec shape (primary, primaryFg, accent, ring) but writes directly into the new project's own app/ — simpler than generating a selectable [data-theme="<slug>"] variant inside the monorepo, since a scaffolded client site only ever needs its own one brand, not a menu of brands to switch between.

What you still need to fill in

• [ ] app/client-theme.css — replace the #ff00aa placeholders with the client's real hex values
• [ ] components/logo.tsx — swap the placeholder chip for the client's real logo (SVG/img)
• [ ] app/layout.tsx — replace the metadata title/description placeholders
• [ ] app/content.ts — replace the sample hero/feature/testimonial/footer copy with the client's own

The bundled template/ is synced from the canonical ../../templates/app-kit/ via npm run sync:template (runs automatically on publish). Full standard: ../../docs/INTEGRATION.md.