# Web Marketing Landing

> >

- **Type:** Skill
- **Install:** `agentstack add skill-robzilla1738-roberts-skills-web-marketing-landing`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [robzilla1738](https://agentstack.voostack.com/s/robzilla1738)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [robzilla1738](https://github.com/robzilla1738)
- **Source:** https://github.com/robzilla1738/roberts-skills/tree/main/plugins/web-marketing-landing/skills/web-marketing-landing
- **Website:** https://robertcourson.com

## Install

```sh
agentstack add skill-robzilla1738-roberts-skills-web-marketing-landing
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

1. **CSS-first motion** — entrance stagger, gradient shift, connector orbit, and nav glass use keyframes/utilities. Do not require Framer Motion for the landing.
2. **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.
3. **Glass discipline** — `backdrop-blur` on hero eyebrow, CTAs, hero feature cards, and scroll-phase nav only. Body sections use solid panels and hairline borders.
4. **Viewport-aware hero** — `min-h-[calc(100svh-)]` on the hero panel; respect mobile safe areas.
5. **Reduced motion** — disable rise, gradient shift, and orbit animations under `prefers-reduced-motion: reduce`; set `scroll-behavior: auto` on `html`.
6. **Scroll nav** — fixed nav interpolates width/padding/background; `data-glass` over dark hero, solid pill after scroll threshold. Support `solidNav` for pages without a dark hero.
7. **Accessible structure** — semantic sections, `aria-hidden` on 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](hero-aurora.md) |
| 2 | `#what-is-{{slug}}` | 55/45 intro grid + 3 fact pills | [layout-sections.md](layout-sections.md) |
| 3 | `#connectors` | Centered copy + connector hub | [connector-hub.md](connector-hub.md) |
| 4 | `#product` | Headline + bento features grid | [section-components.md](section-components.md) |
| 5 | (deliverables) | 4-column icon cards | [section-components.md](section-components.md) |
| 6 | `#flow` | Split header + flow preview + `marketing-wash` | [section-components.md](section-components.md) |
| 7 | (comparison) | “Typical vs {{Brand}}” gradient panel rows | [section-components.md](section-components.md) |
| 8 | `#secure` | Split header + security matrix | [section-components.md](section-components.md) |
| 9 | (use-cases) | 4-column persona cards | [layout-sections.md](layout-sections.md) |
| 10 | (faq) | 2-column FAQ cards | [section-components.md](section-components.md) |
| 11 | (footer CTA) | Large wordmark CTA band | [shell-and-nav.md](shell-and-nav.md) |

Wrap all sections in **MarketingShell** → `main` → sections. See [shell-and-nav.md](shell-and-nav.md).

## Spoke routing

| Task | Read |
|------|------|
| Tokens, type, buttons, cards | [foundations.md](foundations.md) |
| Section grids, spacing, max-widths | [layout-sections.md](layout-sections.md) |
| Hero backdrop, cards, orbit | [hero-aurora.md](hero-aurora.md) |
| Shell, nav scroll, footer | [shell-and-nav.md](shell-and-nav.md) |
| Connector grid | [connector-hub.md](connector-hub.md) |
| CSS animations, washes, glass | [motion-and-effects.md](motion-and-effects.md) |
| Bento, comparison, FAQ, previews | [section-components.md](section-components.md) |
| New repo, deps, file tree | [stack-and-scaffold.md](stack-and-scaffold.md) |
| JSON-LD, metadata | [seo-metadata.md](seo-metadata.md) |

## Greenfield checklist

1. Next.js 16+ App Router, React 19, Tailwind CSS v4 — see [stack-and-scaffold.md](stack-and-scaffold.md).
2. Add `globals.css` tokens + marketing utilities + `.public-nav` rules (unlayered, after `@layer utilities`).
3. Implement shell + nav + footer, then hero, then remaining sections top to bottom.
4. Wire CTAs to `{{AppUrl}}` (external app) — marketing site does not embed auth.
5. Add JSON-LD on home per [seo-metadata.md](seo-metadata.md).
6. 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.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [robzilla1738](https://github.com/robzilla1738)
- **Source:** [robzilla1738/roberts-skills](https://github.com/robzilla1738/roberts-skills)
- **License:** MIT
- **Homepage:** https://robertcourson.com

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-robzilla1738-roberts-skills-web-marketing-landing
- Seller: https://agentstack.voostack.com/s/robzilla1738
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.