Design and scaffold a premium SaaS marketing home page: aurora hero, glass nav, connector hub, bento product grid, comparison bands, FAQ, CSS-driven motion (no Framer required). Use for /web-marketing-landing or when recreating a long-form product landing in Next.js + Tailwind v4.
How this skill is triggered — by the user, by Claude, or both
Slash command
/web-marketing-landing:web-marketing-landingThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Hub skill for a **long-form product landing page**: editorial typography, monochrome surfaces with a single cyan–navy accent gradient, glass on hero/chrome only, CSS-first motion, and eleven ordered sections inside a marketing shell.
Hub skill for a long-form product landing page: editorial typography, monochrome surfaces with a single cyan–navy accent gradient, glass on hero/chrome only, CSS-first motion, and eleven ordered sections inside a marketing shell.
Read this file first, then open only the spoke files needed for the task.
Build a landing that feels premium and product-specific, not a generic SaaS template. The page should read as one continuous story: hero promise → plain explanation → integrations → product depth → outputs → flow → differentiation → trust → personas → FAQ → final CTA.
Use placeholders in specs and copy decks: {{Brand}}, {{Accent}}, {{AppUrl}}, {{Connectors[]}}. Do not hard-code a customer name in skill prose.
--color-bg, --surface-panel*, hairlines) plus one accent gradient (--accent-grad-* or project-prefixed vars). Accent is punctuation, not wallpaper.backdrop-blur on hero eyebrow, CTAs, hero feature cards, and scroll-phase nav only. Body sections use solid panels and hairline borders.min-h-[calc(100svh-<nav-offset>)] on the hero panel; respect mobile safe areas.prefers-reduced-motion: reduce; set scroll-behavior: auto on html.data-glass over dark hero, solid pill after scroll threshold. Support solidNav for pages without a dark hero.aria-hidden on decorative layers, focus-visible outlines on interactive elements.| # | Section ID | Component pattern | Spoke |
|---|---|---|---|
| 1 | (hero) | Full-viewport aurora hero + 3 feature cards | hero-aurora.md |
| 2 | #what-is-{{slug}} | 55/45 intro grid + 3 fact pills | layout-sections.md |
| 3 | #connectors | Centered copy + connector hub | connector-hub.md |
| 4 | #product | Headline + bento features grid | section-components.md |
| 5 | (deliverables) | 4-column icon cards | section-components.md |
| 6 | #flow | Split header + flow preview + marketing-wash | section-components.md |
| 7 | (comparison) | “Typical vs {{Brand}}” gradient panel rows | section-components.md |
| 8 | #secure | Split header + security matrix | section-components.md |
| 9 | (use-cases) | 4-column persona cards | layout-sections.md |
| 10 | (faq) | 2-column FAQ cards | section-components.md |
| 11 | (footer CTA) | Large wordmark CTA band | shell-and-nav.md |
Wrap all sections in MarketingShell → main → sections. See shell-and-nav.md.
| Task | Read |
|---|---|
| Tokens, type, buttons, cards | foundations.md |
| Section grids, spacing, max-widths | layout-sections.md |
| Hero backdrop, cards, orbit | hero-aurora.md |
| Shell, nav scroll, footer | shell-and-nav.md |
| Connector grid | connector-hub.md |
| CSS animations, washes, glass | motion-and-effects.md |
| Bento, comparison, FAQ, previews | section-components.md |
| New repo, deps, file tree | stack-and-scaffold.md |
| JSON-LD, metadata | seo-metadata.md |
globals.css tokens + marketing utilities + .public-nav rules (unlayered, after @layer utilities).{{AppUrl}} (external app) — marketing site does not embed auth.| Do | Don't |
|---|---|
| One gradient accent word per major headline | Gradient-fill every heading |
| Hairline borders + soft shadows on cards | Heavy neumorphism everywhere |
text-balance / text-pretty on headlines and body | Fixed pixel widths that break mobile |
Stagger animationDelay 0–320ms on hero children | Identical delay on all elements |
| Keep connector hub to 14 tiles + center mark | Crowd the hub with 20+ icons |
If the user has an existing marketing home built with this stack, use it for parity checks only; the skill itself stays brand-agnostic.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub robzilla1738/roberts-skills --plugin web-marketing-landing