Web marketing landing
Skill robzilla1738/roberts-skills/plugins/web-marketing-landing/skills/web-marketing-landing
Provider-agnostic agent skills and plugins for AI coding assistants. By Robert Courson.
npx -y skills add robzilla1738/roberts-skills --skill web-marketing-landingAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 5 stars5 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
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.
SKILL.md
5.7 KB, as published. Nobody here has run it
Web Marketing Landing
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.
Mission
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.
Non-negotiables
- CSS-first motion — entrance stagger, gradient shift, connector orbit, and nav glass use keyframes/utilities. Do not require Framer Motion for the landing.
- Token-driven color — monochrome UI (
--color-bg,--surface-panel*, hairlines) plus one accent gradient (--accent-grad-*or project-prefixed vars). Accent is punctuation, not wallpaper. - Glass discipline —
backdrop-bluron hero eyebrow, CTAs, hero feature cards, and scroll-phase nav only. Body sections use solid panels and hairline borders. - Viewport-aware hero —
min-h-[calc(100svh-<nav-offset>)]on the hero panel; respect mobile safe areas. - Reduced motion — disable rise, gradient shift, and orbit animations under
prefers-reduced-motion: reduce; setscroll-behavior: autoonhtml. - Scroll nav — fixed nav interpolates width/padding/background;
data-glassover dark hero, solid pill after scroll threshold. SupportsolidNavfor pages without a dark hero. - Accessible structure — semantic sections,
aria-hiddenon decorative layers, focus-visible outlines on interactive elements.
Section blueprint (implement in order)
| # | 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.
Spoke routing
| 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 |
Greenfield checklist
- Next.js 16+ App Router, React 19, Tailwind CSS v4 — see stack-and-scaffold.md.
- Add
globals.csstokens + marketing utilities +.public-navrules (unlayered, after@layer utilities). - Implement shell + nav + footer, then hero, then remaining sections top to bottom.
- Wire CTAs to
{{AppUrl}}(external app) — marketing site does not embed auth. - Add JSON-LD on home per seo-metadata.md.
- Verify: hero stagger, nav glass→solid, hub ring, bento breakpoints, reduced-motion, production build.
Do / don't
| 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 |
Reference implementation
If the user has an existing marketing home built with this stack, use it for parity checks only; the skill itself stays brand-agnostic.