KeiSeiKit-1.0/skills/landing-page/SKILL.md

name	description	arguments
landing-page	Use when creating a landing page — orchestrates design, copy, assets, animations, SEO. Supports recipe system for specific page types (apple-product, saas, portfolio, ecommerce). Triggers on "landing page", "create page", "website".	name description required product Product/service name and brief description true name description required recipe Recipe: apple-product, saas, portfolio, ecommerce, agency, startup (auto-suggest if omitted) false name description required goal Page goal: signups, downloads, waitlist, sales, portfolio showcase false

Landing Page Orchestrator

Creates premium landing pages by composing specialized skills.

Step 1: Design Direction

Invoke /frontend-design with product context:

• Suggest archetype based on recipe (see matrix below)
• Define differentiator, anti-references, tokens
• Output: design direction + CSS custom properties

Step 2: Research & Copy

• Understand product: features, audience, value proposition
• WebSearch 3-5 competitors for positioning
• Write copy: headline (<10 words, benefit-driven), subheadline, CTAs, feature descriptions
• Tone matches archetype from Step 1

Step 3: Page Structure

Adapt structure to recipe (see below). Core sections:

1. Hero — headline, subheadline, CTA, visual
2. Problem — pain point (empathy)
3. Solution — how product solves it (3 features max)
4. Social proof — testimonials, metrics, logos
5. How it works — 3-step process
6. Pricing (if applicable)
7. FAQ (3-5 questions)
8. Final CTA — repeat conversion action

Step 4: Implementation

• Framework: Astro 6 (default for marketing) or project's stack
• Invoke skills per recipe (see matrix)
• Mobile-first responsive design
• Performance: lazy load below-fold, optimize all assets

Step 5: Quality Pipeline

Sequential audit chain:

1. /web-assets audit — image formats, sizes, fonts
2. /a11y-audit scan — WCAG 2.2 AA compliance
3. /seo-audit — meta, headings, schema, OG tags
4. /responsive-audit — 6 breakpoints
5. /perf-audit — Lighthouse >90

Step 6: Deploy

/web-deploy deploy — Cloudflare Pages (default)

---

Recipe System

apple-product — Premium Product Reveal

Archetype: Minimal or Swiss Skills invoked: ai-animation, scroll-animation, video-gen, 3d-scene, web-assets, motion-design

Structure:

1. Hero: product floating in space, minimal text
2. Video scrub section: product rotation/reveal on scroll (frame sequence or 3D)
3. Feature deep-dives: pin + scrub with parallax text
4. Specs grid: bento layout with micro-animations
5. CTA: clean, single action

Key techniques:

• Frame sequence (120-180 WebP frames) or Three.js model with ScrollControls
• GSAP ScrollTrigger pin + scrub
• Lenis smooth scroll
• Staggered text reveals with blur-in animation
• Dark background, dramatic lighting

saas — SaaS Product Landing

Archetype: Minimal or Editorial Skills invoked: motion-design, ui-component, web-assets, form-builder

Structure:

1. Hero: headline + product screenshot/video + CTA
2. Logo bar: client/integration logos
3. Features: bento grid (3-6 cards) with hover micro-interactions
4. Demo: embedded video or interactive preview
5. Testimonials: carousel or grid with photos
6. Pricing: 2-3 tier comparison table
7. FAQ: accordion
8. CTA: signup form (Turnstile + Zod)

Key techniques:

• Bento grid layout with staggered entrance
• View Transitions for page navigation
• Dark/light mode toggle
• Micro-interactions on every card (hover scale, shadow elevation)
• Auto-animate for list/grid transitions

portfolio — Creative Portfolio

Archetype: Editorial or Maximalist Skills invoked: scroll-animation, web-effects, motion-design, 3d-scene

Structure:

1. Hero: kinetic typography (name/title animates on load)
2. Project showcase: horizontal scroll or masonry grid
3. Project detail: image distortion on hover (WebGL)
4. About: asymmetric editorial layout
5. Contact: minimal form

Key techniques:

• Custom cursor that reacts to content
• Image distortion on hover (curtains.js displacement)
• GSAP horizontal scroll for project gallery
• SVG line drawing for decorative elements
• Kinetic typography with SplitText

ecommerce — Product E-Commerce

Archetype: Minimal or Organic Skills invoked: ui-component, web-assets, form-builder, motion-design

Structure:

1. Hero: product lifestyle image + CTA
2. Product grid: filterable with auto-animate transitions
3. Product detail: gallery + variant selector + add-to-cart
4. Reviews: social proof grid
5. Related products: horizontal scroll
6. Trust: shipping, returns, secure payment badges

Key techniques:

• Image zoom on hover
• Variant selector with instant preview update
• Add-to-cart animation (fly to cart icon)
• Skeleton loading states
• Optimistic UI updates

agency — Creative Agency

Archetype: Brutalist or Swiss Skills invoked: scroll-animation, web-effects, 3d-scene, motion-design

Structure:

1. Hero: bold statement + reel/showreel video
2. Services: icon grid with hover reveals
3. Case studies: full-bleed image + overlay text
4. Team: grid with playful hover effects
5. Process: timeline with scroll-linked progress
6. Contact: multi-step form

Key techniques:

• Full-screen video hero (AV1 + H.264 fallback)
• Noise/grain texture overlay
• Scroll-driven timeline with pin sections
• Magnetic cursor on interactive elements
• Page transitions with View Transitions API

startup — Early-Stage Startup

Archetype: Minimal or Retro-Futuristic Skills invoked: motion-design, form-builder, web-assets

Structure:

1. Hero: problem statement + waitlist CTA
2. Pain points: 3 illustrated scenarios
3. Solution: how it works (3 steps)
4. Early metrics/traction (if available)
5. Founder story (optional)
6. Waitlist form with social proof counter

Key techniques:

• Simple fade-in animations (AutoAnimate)
• Email capture with Turnstile
• Social proof: "Join 1,234 others" counter
• Minimal JavaScript, maximum speed
• Ship fast: Astro + Tailwind + Cloudflare Pages