landing – skill Marketing & SEO cho agent AI

Landing — Premium HTML Landing Page Generator

> Distinct from product-team/skills/landing-page-generator/. That skill outputs Next.js TSX components optimized for conversion / lead-gen. THIS skill outputs a single self-contained .html file optimized for premium visual experience with GSAP animations. Pick by use case.

Generate a polished, self-contained .html landing page from a text prompt or brief. The output is ONE HTML file: all CSS inline in <style>, all JS inline in <script>, only external dependencies being Google Fonts + GSAP via CDN. The page is visually distinctive, animated, and production-quality.

Invocation Triggers

• "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"
• "landing for X"

Delivery Mode

In Claude Code CLI, write the file to disk at the specified path. In Claude.ai web, create an HTML artifact with the same content.

Phase 0: Grill-Me Intake (4 forcing questions, one at a time)

Dependency-ordered. Each question carries explicit "why I'm asking". Stop condition: max 4.

Q1 (root) — Product / Service

> What's the product or service? Give me the name + a 1–2 sentence elevator pitch — what does it do, and who's it for?

>

> *Why I'm asking:* The headline, subtext, and feature copy all derive from this. "App for productivity" produces generic boilerplate; "Async standup tool for remote engineering teams who hate Zoom" produces a landing page that converts.

Refuse mush. If user gives just a name with no pitch, push back once: "What does it do? Who's it for?" If still no pitch after push-back, deliver with explicit "generic positioning" caveat.

Q2 (depends on Q1) — Audience Register

> Who's the audience? Pick one:

>

> 1. Technical buyers (engineers, ops, security)

> 2. Business buyers (PMs, execs, ops leaders)

> 3. Consumers (general public, hobbyists)

> 4. Internal (employees, partners — not for public sale)

>

> *Why I'm asking:* Audience dictates copy register, jargon level, social-proof choices, and CTA framing. Technical buyers want specifics; consumers want benefits; internal pages can skip persuasion.

Forcing choice.

Q3 (always) — Brand Overrides

> Brand colors / fonts to override the default (dark navy + teal + Inter)? Provide as: primary HEX, accent HEX, optional bg HEX. Or say "default" if you want the polished default.

>

> *Why I'm asking:* The default is intentionally beautiful, but matching your brand makes the page feel native to your existing site. Even just a primary color override goes a long way.

Accept "default" or partial overrides (e.g., just primary). If only primary provided, derive accent algorithmically (lighten / darken).

Q4 (depends on Q1) — Tone

> Tone — pick one:

>

> 1. Professional — confident, restrained, B2B-friendly

> 2. Playful — warm, light, occasional humor

> 3. Authoritative — expert, data-forward, trust-building

> 4. Minimal — terse, design-led, low copy density

>

> *Why I'm asking:* Tone affects every sentence — headlines, microcopy, button text, closing copy. Picking upfront prevents tonal whiplash across sections.

Forcing choice. Recommended default: professional if Q2 = technical/business; playful if Q2 = consumer; minimal if the product is design-led.

Stop condition: After Q4, commit and generate. No follow-up questions during generation.

Content Extraction (with Fallback Strategy)

From Q1's elevator pitch, derive:

• Hero headline — punchy version of "what it does" (8–12 words)
• Hero subtext — version of "who it's for + payoff" (1–2 sentences)
• 3–6 feature bullets — distilled from pitch + audience (Q2) + tone (Q4)
• CTA text — action-oriented, matches tone
• Closing copy — short, emotive, matches tone

Fallback when input is sparse: invent compelling content from product-name semantics + audience register. Flag inferred content with a comment in the HTML source (<!-- inferred: ... -->). Don't stall waiting for more input.

Brand System Specification

Default Color Palette (Dark Navy + Teal)

:root {
  --navy:       #0A1628;
  --navy-mid:   #0D1F38;
  --teal:       #00D4AA;
  --teal-glow:  rgba(0, 212, 170, 0.12);
  --amber:      #F5A623;
  --off-white:  #F7F7F2;
  --text-muted: rgba(247, 247, 242, 0.68);
  --card-bg:    rgba(0, 212, 170, 0.06);
  --card-border:rgba(0, 212, 170, 0.15);
}

Override Pattern

When Q3 provides custom brand values, the skill substitutes them into the :root block:

Brand override:
- primary: #FF6B35    →  --navy / hero bg
- accent:  #2EC4B6    →  --teal / CTA / highlights
- bg:      #011627    →  --navy-mid / section bg
- text:    #FDFFFC    →  --off-white

If only primary provided, derive accent algorithmically (lighten 15% for accent; darken 8% for navy-mid; convert to rgba at 0.12 alpha for glow). Use scripts/brand_palette_validator.py for the deterministic derivation.

See [references/brand_system_design.md](references/brand_system_design.md) for color theory + WCAG + algorithmic palette derivation canon.

Typography

• Font family: Inter (via Google Fonts)
• Weight scale: 400 (body), 500 (eyebrow), 600 (links), 700 (subtitle), 800 (H1 + H2)
• Size scale:
• Hero H1: 68–82px
• Section H2: 52–62px
• Card titles: 22px
• Body: 17–19px
• Eyebrow: 13px (uppercase, letter-spaced)
• CTA button: 18px (500 weight)

Components (Must Specify CSS)

• .btn-primary — CTA button with hover state (lift + brightness)
• .feature-card — card with hover lift (translateY(-6px) + border-brighten)
• .eyebrow — letter-spaced (0.2em) uppercase category label

Section 1: Hero

• min-height: 100vh, flex-centered content
• Optional eyebrow label above H1
• H1 (68–82px, 800 weight)
• Subtitle (17–19px, 1–2 sentences)
• CTA button (.btn-primary)
• Scroll-down indicator (animated chevron, CSS bounce)
• Depth layers (mouse parallax):
• .hero-shapes-back — large blurred circles, absolute-positioned, low opacity
• .hero-shapes-mid — smaller shapes, sharper edges, higher opacity
• Content layer (H1 + subtitle) — moves subtly in same direction as mouse

Section 2: Features

• 3 columns default (repeat(3, 1fr) grid)
• Responsive:
• 2 columns at 900px breakpoint
• 1 column at 580px breakpoint
• Each card:
• SVG icon (28px, stroke=var(--teal), no fill)
• Title (22px, 700 weight)
• Description (15–16px, --text-muted)
• Hover state:
• transform: translateY(-6px)
• border-color: var(--teal) (brighten from --card-border)
• transition: 0.3s ease

Section 3: Closing CTA

• Full-width, background: var(--navy-mid)
• padding: 120px 24px, text-align: center
• Large closing headline (52–62px, 800 weight)
• Short subtext (--text-muted, 1–2 sentences)
• CTA button with ambient radial-gradient glow behind it:

  background: radial-gradient(circle, var(--teal-glow) 0%, transparent 70%);
  

Animation Patterns

See [references/gsap_animation_patterns.md](references/gsap_animation_patterns.md) for the canon. Five patterns required:

1. Hero Entrance (GSAP timeline)

// MUST use gsap.set() FIRST to prevent FOUC
gsap.set([".eyebrow", ".hero h1", ".hero .subtitle", ".btn-primary", ".scroll-down"], {
  opacity: 0,
  y: 30
});

const tl = gsap.timeline({ defaults: { ease: "power3.out" } });
tl.to(".eyebrow", { opacity: 1, y: 0, duration: 0.6 })
  .to(".hero h1", { opacity: 1, y: 0, duration: 0.8 }, "-=0.3")
  .to(".hero .subtitle", { opacity: 1, y: 0, duration: 0.6 }, "-=0.5")
  .to(".btn-primary", { opacity: 1, y: 0, duration: 0.5 }, "-=0.3")
  .to(".scroll-down", { opacity: 1, y: 0, duration: 0.4 }, "-=0.2");

2. Mouse Parallax

const hero = document.querySelector(".hero");
hero.addEventListener("mousemove", (e) => {
  const x = (e.clientX / window.innerWidth - 0.5) * 2;
  const y = (e.clientY / window.innerHeight - 0.5) * 2;
  gsap.to(".hero-shapes-back", { x: x * 45, y: y * 22, duration: 0.8 });
  gsap.to(".hero-shapes-mid",  { x: x * 22, y: y * 11, duration: 0.8 });
  gsap.to(".hero .container",  { x: x * 8,  y: y * 5,  duration: 0.8 });
});

3. Scroll-Triggered Feature Cards

gsap.set(".feature-card", { opacity: 0, y: 55, rotateX: 18 });

ScrollTrigger.batch(".feature-card", {
  start: "top 80%",
  onEnter: batch => gsap.to(batch, {
    opacity: 1, y: 0, rotateX: 0,
    duration: 0.8,
    stagger: 0.11,
    ease: "power2.out"
  })
});

4. Floating Decorative Shapes (CSS keyframes — NOT GSAP)

CSS handles ambient continuous motion (smoother, cheaper than GSAP for indefinite animations):

@keyframes floatA {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(20px, -30px) rotate(8deg); }
}
@keyframes floatB { /* different duration + rotation */ }
@keyframes floatC { /* dif

… (nội dung đầy đủ có trong gói tải về)