0be354a920
Single-commit clean baseline after security scrub of niche-tells, project codenames, internal jargon, and contributor-email leaks. Contents: - 100 Rust crates (_primitives/_rust/) - 37 agent manifests (_manifests/) + generated specs (_generated/) - 67 user-invocable skills (skills/) - 33 hooks (hooks/) - Composition blocks (_blocks/) - Documentation (docs/, README.md) - TS adapter packages (_ts_packages/) - Assembler (_assembler/) - Roles (_roles/) - Templates (_templates/) - Forgejo CI (.forgejo/) Author: Denis Parfionovich <info@greendragon.info> License: see LICENSE.
188 lines
6.1 KiB
Markdown
188 lines
6.1 KiB
Markdown
---
|
|
name: landing-page
|
|
description: 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".
|
|
arguments:
|
|
- name: product
|
|
description: Product/service name and brief description
|
|
required: true
|
|
- name: recipe
|
|
description: "Recipe: apple-product, saas, portfolio, ecommerce, agency, startup (auto-suggest if omitted)"
|
|
required: false
|
|
- name: goal
|
|
description: "Page goal: signups, downloads, waitlist, sales, portfolio showcase"
|
|
required: 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
|