Help us improve
Share bugs, ideas, or general feedback.
From saas-marketing-validation
Build the SaaS landing page in `sites/<slug>/` once the brand is approved. Auto-activate when `approval.json.approved === true` and the user asks for a landing page, website, marketing site, or runs `/build-landing`. Generates a Next.js + Tailwind + Framer Motion app, wires Higgsfield-generated hero motion + feature micro-animations, writes SaaS copy from `brand.json` + `saas-context.json`, and ALWAYS places a `<Waitlist />` section at the bottom.
npx claudepluginhub potenlab/vibes-marketing-validation --plugin saas-marketing-validationHow this skill is triggered — by the user, by Claude, or both
Slash command
/saas-marketing-validation:saas-landing-builderThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You are Step 4 — the final step. You ship a runnable Next.js landing page that converts visitors into waitlist signups.
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Implements vector databases with Pinecone, Weaviate, Qdrant, Milvus, pgvector for semantic search, RAG, recommendations, and similarity systems. Optimizes embeddings, indexing, and hybrid search.
Share bugs, ideas, or general feedback.
You are Step 4 — the final step. You ship a runnable Next.js landing page that converts visitors into waitlist signups.
Before doing anything else, verify:
brands/<slug>/approval.json.approved === true — if not, defer to saas-brand-approval.brand.json, saas-context.json, brand-guidelines.md all exist.mcp__higgsfield__* tools are reachable — if not, stop and report.The exact file tree is specified in templates/landing/STRUCTURE.md. Generate every file fresh — there is no source code to copy. STRUCTURE.md is a spec, not a template.
Generate the file tree fresh under sites/<slug>/ following templates/landing/STRUCTURE.md:
tailwind.config.ts, fonts → app/layout.tsx, copy → copy-writer).package.json.name = <slug>-landing. Dependencies per STRUCTURE.md.There are no source files to copy. Every file is authored by you, per-brand.
Call mcp__higgsfield__generate_video for each:
<video autoplay muted loop playsinline> background.approval.primaryLogo). Used in the nav on first scroll.Save MP4s under sites/<slug>/public/motion/. See animation-rules.md for prompt patterns and constraints.
For every text string on the page, draw from brand.json + saas-context.json. Use copy-rules.md.
Delegate to agents/copy-writer.md for full-page copy in one pass — it keeps voice consistent.
Follow section-recipes.md for the exact section order and what each must contain:
#waitlistDelegate adapter choice + wiring to saas-waitlist-backend. Default: local JSON file (no external deps). If SUPABASE_URL + SUPABASE_ANON_KEY exist in env, use Supabase.
After scaffolding:
bun install (or npm install)bun run build — must compile cleanlycd sites/<slug> && bun dev to run"Landing page ready at
sites/<slug>/. Runcd sites/<slug> && bun devand open http://localhost:3000. Waitlist posts to: {backend}. Higgsfield motion assets live underpublic/motion/."
<Waitlist /> is the second-to-last child of <main>, with <Footer /> after it. Removing it is a defect.prefers-reduced-motion honored. Every animated component checks useReducedMotion() from Framer Motion and serves still alternatives.brand.json + saas-context.json. Sections with no source data say "TBD — content slot" explicitly, not filler.brand-guidelines.md. Map the palette into tailwind.config.ts theme.extend.colors.brand-guidelines.md. Load via next/font in app/layout.tsx.agents/landing-builder.md.agents/copy-writer.md.templates/landing/STRUCTURE.md — the file-tree spec (no code, just structure)