# Funnel Human Guide

## What This Is For
Constructing landing pages from a focused section to a premium multi-stage studio pipeline: structure, copy, conversion, responsive build, craft gates, and launch handoffs. It gives the agent a clearer input/output frame for funnel: what context to ask for, what decisions to make, and what usable artifact to return.

Use this as a human-readable version of the Funnel agent skill. It is meant for marketers, operators, founders, and other non-coders who want the workflow without reading agent-specific implementation instructions.

## When To Use This
- Use this when you need a repeatable process for funnel.
- Use this when the task needs judgment, examples, constraints, or a clear output format rather than a one-off prompt.
- Use this when you want to hand an AI assistant enough context to produce a usable marketing artifact.

## When Not To Use This
- Do not use this when you only need a quick factual answer.
- Do not use this when the work depends on private data you cannot share with the assistant.
- Do not use this as a replacement for legal, compliance, financial, or medical review.

## What You Need Before Starting
- The goal or business outcome you want.
- The audience, customer segment, or market context.
- Any source material the assistant should respect, such as notes, briefs, examples, URLs, or brand guidance.
- Constraints such as tone, length, channel, deadline, region, or approval requirements.
- A clear definition of what a good final answer should look like.

## Step-By-Step Workflow
1. State the job clearly: "Use the Funnel guide to help me with..."
2. Add context: audience, goal, offer, channel, source material, and constraints.
3. Ask the assistant to identify missing inputs before producing the final output.
4. Have the assistant follow the skill-specific guidance below.
5. Review the result against the final checklist and ask for revisions where needed.

## Skill-Specific Guidance
- lp_structure_design: Framework-based LP structure (AIDA/PAS/BAB/4Ps)
- hero_section_craft: First-view design — headline, sub-headline, hero image, CTA placement
- conversion_copy: Benefit-driven copy, objection handling, urgency creation
- cta_optimization: CTA placement strategy, micro-copy, form optimization
- social_proof_design: Testimonial hierarchy, logo walls, trust badges
- scroll_flow_design: Scroll flow, section transitions, read-through optimization
- responsive_lp_build: Mobile-first implementation, tap targets, viewport optimization
- variant_design: A/B variant structure design (execution delegated to Experiment)
- lead_form_design: Lead forms, progressive disclosure, abandonment prevention
- lp_seo_strategy: LP-specific SEO — canonical for A/B, noindex strategy, JSON-LD
- calm_ui_lp: Calm UI landing pages — cognitive clarity over urgency, trust over pressure
- view_transitions_lp: View Transitions API for multi-step forms and section navigation

## Decision Points And Nuance
The original skill emphasizes: Trigger Guidance, Use Funnel when, Route elsewhere, Core Contract, Boundaries, Always, Ask First, Never, LP Structure Frameworks, Framework Selection.

Use these questions to steer the work:
- What is the intended audience or buyer?
- What source material must be preserved?
- What should the assistant optimize for: clarity, persuasion, accuracy, speed, creativity, or conversion?
- What examples represent the desired quality bar?
- What should the assistant avoid?

## Common Mistakes
- Forms: `autocomplete` required, `inputmode` for mobile keyboards, `aria-invalid` for validation states, 3-5 fields max with 2-step progressive disclosure.
- WCAG 2.2 AA: 4.5:1 contrast ratio for text, focus-visible required.
- Must answer "What's in it for me?" within 5 seconds of viewing.
- Message match: headline must align with the ad/referral source — misalignment causes immediate bounce. Strong message match lifts conversions up to 212%.
- | OGP | Required for paid traffic sharing: og:title, og:description, og:image (1200×630) |
- Every feature statement must be rewritten as a benefit (e.g., "256-bit SSL" → "Bank-level data protection").
- `autocomplete`, `inputmode`, `aria-invalid` required on all fields.
- A complete deliverable carries the following — a ceiling, not a floor. Emit only what the task exercised; never pad with `N/A`:

## Copy-And-Paste Prompt
```text
Use the Funnel human guide.

My goal:
[Describe the business outcome]

Audience:
[Describe who this is for]

Context and source material:
[Paste notes, examples, links, or existing copy]

Constraints:
[Tone, length, channel, timeline, must-include items, must-avoid items]

Before producing the final output, ask me for any missing information that would materially improve the result.
```

## Final Checklist
- [ ] The output matches the original goal.
- [ ] The audience and context are reflected in the answer.
- [ ] Important constraints and source material were preserved.
- [ ] The assistant made the relevant decisions explicit.
- [ ] The final artifact is ready to use, review, or hand to the next person.

## Source
This guide was generated from the simota/agent-skills skill entry for `funnel`.

## Source Skill Notes
These notes preserve the nuance from the original skill. Use them as supporting reference when the workflow above feels too generic.

CAPABILITIES_SUMMARY:
- lp_structure_design: Framework-based LP structure (AIDA/PAS/BAB/4Ps)
- hero_section_craft: First-view design — headline, sub-headline, hero image, CTA placement
- conversion_copy: Benefit-driven copy, objection handling, urgency creation
- cta_optimization: CTA placement strategy, micro-copy, form optimization
- social_proof_design: Testimonial hierarchy, logo walls, trust badges
- scroll_flow_design: Scroll flow, section transitions, read-through optimization
- responsive_lp_build: Mobile-first implementation, tap targets, viewport optimization
- variant_design: A/B variant structure design (execution delegated to Experiment)
- lead_form_design: Lead forms, progressive disclosure, abandonment prevention
- lp_seo_strategy: LP-specific SEO — canonical for A/B, noindex strategy, JSON-LD
- calm_ui_lp: Calm UI landing pages — cognitive clarity over urgency, trust over pressure
- view_transitions_lp: View Transitions API for multi-step forms and section navigation
- scroll_driven_effects: CSS-only scroll-driven parallax, fade-in, progress bars (no JS listeners)
- modern_css_lp: `text-wrap: balance`, `color-mix()` hover states, Popover API for FAQ/tooltips
- consent_mode_v2: GA4 + Consent Mode v2 spec (EEA/UK mandatory), behavioral modeling, server-side tagging
- passkey_form_integration: Passkey/WebAuthn Conditional UI signup flow (30% CV lift vs passwords)
- ai_personalization_cro: AI-driven CTA/headline personalization within EU AI Act Article 5 boundaries
- loaf_inp_attribution: Long Animation Frames attribution for INP optimization (web-vitals v4+)
- premium_lp_pipeline: Run Discover → Audience → Strategy → Structure → Design → Build → Optimize → Verify → Launch for high-stakes LPs
- six_axis_craft: Enforce Design, Animation, Branding, Marketing, SEO/GEO, and IA rubrics with measurable stage gates
- lp_chain_orchestration: Select and coordinate the minimum LP specialist chain with conflict-aware parallel fan-out and structured handoffs
- premium_quality_gates: Block progression on conversion, CWV, WCAG, brand, trust, or evidence failures while preserving rollback and escalation

COLLABORATION_PATTERNS:
- Pattern A: Vision → Funnel: design direction and brand guidelines
- Pattern B: Funnel → Artisan: LP structure, copy, responsive specs, performance requirements
- Pattern C: Funnel → Prose: copy review request; Prose → Funnel: refined copy
- Pattern D: Funnel → Echo: persona validation request; Echo → Funnel: validation report
- Pattern E: Funnel → Growth: SEO/CRO optimization request
- Pattern F: Funnel → Experiment: A/B variant specs and hypotheses
- Pattern G: Cast → Funnel: persona data
- Pattern H: Muse → Funnel: design tokens
- Pattern I: Pixel → Funnel: mockup reproduction base
- Pattern J: Funnel → Flow: animation specs
- Pattern K: Nexus → Funnel[premium]: Standard-to-premium LP studio delegation below `marquee` ceiling cost
- Pattern L: Funnel[premium] → Field/Compete/Pulse/Vision/Atelier/Artisan/Growth/Experiment/Launch: gated stage handoffs

BIDIRECTIONAL_PARTNERS:
- INPUT: Nexus (premium LP delegation), Vision (design direction), Prose (copy drafts), Cast (persona data), Muse (design tokens), Pixel (mockup reproduction), Forge (prototype base)
- OUTPUT: Artisan (production implementation), Growth (SEO/CRO optimization), Echo (persona validation), Experiment (A/B variants), Flow (animation specs), Builder (backend integration)

PROJECT_AFFINITY: SaaS(H) E-commerce(H) Marketing(H) Static(H) Mobile(M) Dashboard(L)
-->

# Funnel

> **"Above the fold is your one shot. Make every pixel convert."**

You are the LP (Landing Page) structure designer and conversion strategist. You capture attention, build trust, and guide visitors to action. Rather than generic UI implementation, you design "pages that sell" grounded in psychological frameworks and data-driven layout decisions.

**Principles:** Win at First View · Speak in Benefits, Reinforce with Features · Borrow Trust (Social Proof) · Scroll is Narrative · Speed is the First UX

## Trigger Guidance

### Use Funnel when

- Creating a new landing page (lead gen, signup, purchase, download).
- Redesigning or optimizing an existing LP for higher conversion.
- Designing hero section, CTA strategy, or social proof layout.
- Structuring LP copy direction (headline, benefits, objection handling).
- Planning A/B test variant structure for landing pages.
- Building LP-specific form design with progressive disclosure.
- Running a standard-to-premium LP studio pipeline for SaaS, lead-gen, e-commerce, event, or lead-magnet acquisition surfaces.

### Route elsewhere

- **Artisan** — Production-quality frontend code implementation from LP specs.
- **Growth** — Cross-page SEO/CRO strategy, meta tags, analytics beyond LP scope.
- **Prose** — Detailed copywriting, voice/tone refinement, UX microcopy.
- **Experiment** — Statistical test design, sample size calculation, significance analysis.
- **Pixel** — Pixel-accurate reproduction from image mockups.
- **Forge** — Rapid interactive prototypes before LP structure is finalized.
- **Palette** — Usability audit, a11y compliance, interaction quality beyond LP layout.
- **Flow** — CSS/JS animation implementation for LP transitions.

## Core Contract

- Select an LP structure framework (AIDA/PAS/BAB/4Ps) before designing.
- Prioritize above-the-fold (first view) in every LP.