# Landing page (Vercel) Human Guide

## What This Is For
Scaffolds a production-ready static landing page with working email capture form, analytics, and responsive design. It gives the agent a clearer input/output frame for conversion optimization: what context to ask for, what decisions to make, and what usable artifact to return.

Use this as a human-readable version of the Landing page (Vercel) 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 landing page (Vercel).
- 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 Landing page (Vercel) 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
- Product name, tagline, audience, offer, and CTA
- Form provider and analytics preference
- Local landing page files and Vercel config
- Does not deploy production unless explicitly requested
- May deploy to Vercel only after explicit deploy request
- Before using external form/analytics identifiers
- Before running Vercel deploy commands
- Before overwriting an existing landing page directory
- `project-init-orchestrator` / `npx @shipshitdev/v0` for full Shipshit.dev product repos
- `frontend-design` for custom visual design
- `deployment-composer` or `deploy` for deployment
- **Structure:** Semantic HTML5 + Modern CSS + Vanilla JS

## Decision Points And Nuance
The original skill emphasizes: Contract, What Makes This Different, Workflow, Phase 1: PRD Brief Intake, Phase 2: Content Generation, Phase 3: Form Integration, Phase 4: Quality Verification, Usage, Key Patterns, Form Integration Guide.

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
- Starting without a clear audience or goal.
- Asking for a final artifact before sharing examples or constraints.
- Accepting a generic first draft without checking it against the intended use.

## Copy-And-Paste Prompt
```text
Use the Landing page (Vercel) 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 shipshitdev/skills skill entry for `landing-page-vercel`.

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

# Landing Page (Vercel)

Create a static landing page with:

## Contract

Inputs:

- Product name, tagline, audience, offer, and CTA
- Destination directory
- Form provider and analytics preference

Outputs:

- Static landing page files
- Form/analytics setup notes
- Deployment instructions

Creates/Modifies:

- Local landing page files and Vercel config
- Does not deploy production unless explicitly requested

External Side Effects:

- None during scaffolding
- May deploy to Vercel only after explicit deploy request

Confirmation Required:

- Before using external form/analytics identifiers
- Before running Vercel deploy commands
- Before overwriting an existing landing page directory

Delegates To:

- `project-init-orchestrator` / `npx @shipshitdev/v0` for full Shipshit.dev product repos
- `frontend-design` for custom visual design
- `deployment-composer` or `deploy` for deployment

- **Structure:** Semantic HTML5 + Modern CSS + Vanilla JS
- **Form:** Working email capture (Formspree or custom endpoint)
- **Analytics:** Plausible/Fathom ready
- **Design:** Responsive, accessible, performant
- **Deploy:** One-click Vercel deployment

## What Makes This Different

This skill generates **working landing pages**, not empty templates:

- Real email capture form that actually submits
- Analytics integration ready to activate
- Responsive design tested on mobile
- Accessibility basics (WCAG 2.1 AA)
- Content from your PRD brief

---

## Workflow

### Phase 1: PRD Brief Intake

Ask the user for product details, then extract and confirm: product name, tagline, hero headline/subheadline/CTA, 3-5 features with descriptions, CTA type (Waitlist/Sign Up/Demo Request/Contact), and social proof preference (Testimonials/Logos/Stats/None). See `references/full-guide.md` (§ PRD Brief Intake Template) for the confirmation message format.

### Phase 2: Content Generation

Generate complete landing page content across these sections:

1. **Hero** - Headline, subheadline, CTA button, optional hero image
2. **Features** - 3-5 feature cards with icons
3. **How It Works** - 3-step process (optional)
4. **Social Proof** - Testimonials or logos (optional)
5. **FAQ** - 4-6 common questions (optional)
6. **CTA** - Final call to action with form
7. **Footer** - Links, copyright, social icons

### Phase 3: Form Integration

Choose an email capture option: