/cs-landing

name: "cs-landing"
description: "/cs:landing <product-or-brief> — Generate a premium single-file HTML landing page with GSAP 3D animations, scroll-triggered reveals, and mouse-parallax depth. Grill-me intake (4 questions) locks down product / audience / brand / tone before any markup. Output: ${OUTPUT_DIR}/<product-kebab>.html or HTML artifact."

/cs:landing — Premium HTML Landing Page Generator

**Command:** `/cs:landing <product-or-brief>`

The `cs-landing` persona generates one polished, self-contained `.html` landing page with GSAP animations, mouse parallax, and 3D CSS effects.

When to Run

• Launch pages where the page IS the experience (visual-premium one-pagers)
• Product showcases with motion design
• Brand sites where conversion rate isn't the primary metric — impression is

When NOT to Run (use `landing-page-generator` instead)

If you need **conversion-optimized lead-gen** with copy frameworks (PAS / AIDA / BAB), Next.js TSX components, multiple section variants for A/B testing — use `product-team/skills/landing-page-generator/` instead. That's a different skill optimizing for different outcomes.

| Need | Skill | |---|---| | Visual premium one-pager | **`/cs:landing`** (this command) | | Conversion-optimized lead-gen | `landing-page-generator` |

Trigger Phrases (auto-invoke without /cs:)

• "create a landing page"
• "build a landing page"
• "make a landing page for X"
• "I need a web page for Y"
• "promotional page"
• "product page"
• "one-pager"
• "web presence"
• "sales page"

**Note:** these trigger phrases may match either this skill OR `landing-page-generator`. If both are installed, Claude picks based on the conversation context (premium-visual hints → this skill; conversion / lead-gen / A/B-test hints → the other).

Forcing Intake (3–4 Questions, One at a Time)

| Q | Asks | Default if forcing-choice | |---|---|---| | Q1 | Product / service: name + 1–2 sentence elevator pitch | refuses vague answers ("app for productivity" gets pushed back once) | | Q2 | Audience register: technical / business / consumer / internal | forcing choice | | Q3 | Brand overrides: primary HEX + accent HEX + optional bg HEX, OR "default" | default = dark navy + teal | | Q4 | Tone: professional / playful / authoritative / minimal | forcing choice (recommended: professional for B2B, playful for consumer, minimal for design-led) |

**Stop condition:** Max 4 questions. No follow-up during generation.

What You Get

A single `.html` file at `${OUTPUT_DIR}/<product-kebab>.html` (default `./landing-pages/`) with:

• **Hero** — 100vh, animated H1 entrance via GSAP timeline, scroll-down indicator, mouse-parallax depth layers
• **Features** — 3-column grid (responsive 2-col at 900px, 1-col at 580px), SVG icons, scroll-triggered card reveals with `rotateX` lift
• **Closing CTA** — large closing headline + ambient radial-gradient glow behind button

All CSS inline. All JS inline. Externals: Google Fonts (Inter) + GSAP via CDN only.

Discipline

• **One intake question per turn.** Never bundle.
• **Refuse vague Q1 once.** Push back; deliver with caveat if user won't sharpen.
• **No FOUC.** Every animated element gets `gsap.set()` initial state.
• **Inline-only.** All CSS + JS in the file. No external `.css` / `.js` references.
• **Responsive.** Breakpoints at 900px + 580px.
• **No hardcoded paths.** `${OUTPUT_DIR}` variable.
• **Single-pass write.** No outline → draft → polish cycle.

Workflow

# 1. Intake (Q1-Q4 one at a time)

# 2. If brand override provided, validate:
python ../skills/landing/scripts/brand_palette_validator.py \
  --primary "#FF6B35" --accent "#2EC4B6" --bg "#011627"

# 3. Generate output filename
python ../skills/landing/scripts/kebab_slug_generator.py \
  --product "<product name from Q1>" --output-dir ./landing-pages

# 4. Write the .html file in one pass (Hero + Features + Closing CTA + GSAP + mouse parallax + ScrollTrigger + CSS floats)

# 5. Validate structure
python ../skills/landing/scripts/html_validator.py \
  --file ./landing-pages/<slug>.html

# 6. Deliver:
#    CLI → file path
#    Web → HTML artifact

Stop Conditions

• All 4 Qs answered + HTML generated + validator PASS → done
• User says "skip intake" → use defaults for any unanswered Q (default brand, professional tone, audience inferred from elevator pitch)
• Validator FAIL → regenerate the failing sections in one targeted pass; do NOT abandon the file

Anti-Patterns Rejected

• Hardcoded absolute paths in output directory
• Single brand palette without override documentation
• Outlining before writing — write in one pass
• External CSS or JS files (must be inline)
• Skipping `gsap.set()` initial states (causes FOUC)
• More than 6 features in default grid (becomes unscannable)
• Brand-specific content references in the skill itself
• Bundling intake questions

Related

• Agent: [`cs-landing`](../agents/cs-landing.md)
• Skill: [`landing`](../skills/landing/SKILL.md)
• Source spec: `megaprompts/04-landing-megaprompt.md` (maintainer-local draft spec — gitignored, not in the public repo)
• Sibling (different optimization): `product-team/skills/landing-page-generator/`
• Adjacent v2 commands: `/cs:capture`, `/cs:pulse`, `/cs:inbox-setup`, `/cs:inbox-triage`

---

**Version:** 1.0.0 **Source:** Path-B direct conversion of `megaprompts/04-landing-megaprompt.md`