# Landing page guide Human Guide

## What This Is For
This skill enables creation of professional, high-converting landing pages following the 11 essential elements framework from DESIGNNAS. 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 guide 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 guide.
- 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 guide 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
- Creation of landing pages, marketing pages, or product pages
- Next.js or React-based promotional websites
- Pages that need to convert visitors into customers
- Professional marketing pages with SEO optimization
- Landing pages following industry best practices
- **URL with Keywords** - SEO-optimized, descriptive URL structure
- **Company Logo** - Brand identity placed prominently (top-left)
- **SEO-Optimized Title and Subtitle** - Clear value proposition with keywords
- **Primary CTA** - Main call-to-action button in hero section
- **Social Proof** - Reviews, ratings, user statistics
- **Images or Videos** - Visual demonstration of product/service
- **Core Benefits/Features** - 3-6 key advantages with icons

## Decision Points And Nuance
The original skill emphasizes: Overview, When to Use This Skill, The 11 Essential Elements Framework, Technology Stack Requirements, Required Technologies, ShadCN UI Components to Install, Why ShadCN UI?, Project Structure, Implementation Workflow, Step 1: Setup Metadata (SEO).

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
- Every effective landing page must include these 11 essential elements. These are based on DESIGNNAS's proven framework for high-converting landing pages:
- **Critical:** All 11 elements must be included in every landing page. No exceptions.
- Important visual element
- Must be clear and compelling, answering "What benefits does this page offer me?"
- **Principle:** Primary CTA is the most important call-to-action, usually placed right below the title.
- Must contain clear and strong message

## Copy-And-Paste Prompt
```text
Use the Landing page guide 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 bear2u/my-skills skill entry for `landing-page-guide`.

## 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 Guide

## Overview

This skill enables creation of professional, high-converting landing pages following the 11 essential elements framework from DESIGNNAS. It provides complete implementation patterns for Next.js 14+ and React with ShadCN UI integration, ensuring every landing page includes proper SEO optimization, accessibility standards, and conversion-focused design.

## When to Use This Skill

Use this skill when users request:
- Creation of landing pages, marketing pages, or product pages
- Next.js or React-based promotional websites
- Pages that need to convert visitors into customers
- Professional marketing pages with SEO optimization
- Landing pages following industry best practices

## The 11 Essential Elements Framework

Every effective landing page must include these 11 essential elements. These are based on DESIGNNAS's proven framework for high-converting landing pages:

1. **URL with Keywords** - SEO-optimized, descriptive URL structure
2. **Company Logo** - Brand identity placed prominently (top-left)
3. **SEO-Optimized Title and Subtitle** - Clear value proposition with keywords
4. **Primary CTA** - Main call-to-action button in hero section
5. **Social Proof** - Reviews, ratings, user statistics
6. **Images or Videos** - Visual demonstration of product/service
7. **Core Benefits/Features** - 3-6 key advantages with icons
8. **Customer Testimonials** - 4-6 authentic reviews with photos
9. **FAQ Section** - 5-10 common questions with accordion UI
10. **Final CTA** - Bottom call-to-action for second chance conversion
11. **Contact Information/Legal Pages** - Footer with complete information

**Critical:** All 11 elements must be included in every landing page. No exceptions.

For detailed explanations of each element, refer to `references/11-essential-elements.md`.

## Technology Stack Requirements

When creating landing pages, always use:

### Required Technologies
- **Next.js 14+** with App Router
- **TypeScript** for type safety
- **Tailwind CSS** for styling
- **ShadCN UI** for all UI components

### ShadCN UI Components to Install

Before creating any landing page, ensure these components are installed:

```bash
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add accordion
npx shadcn-ui@latest add badge
npx shadcn-ui@latest add avatar
npx shadcn-ui@latest add separator
npx shadcn-ui@latest add input
```

### Why ShadCN UI?
- **Accessibility**: WCAG-compliant components
- **Customizable**: Fully customizable with Tailwind CSS
- **Type-safe**: Written in TypeScript
- **Performance**: Copy only what you need, minimal bundle size
- **Consistency**: Built-in design system

## Project Structure

Create landing pages with this structure:

```
landing-page/
├── app/
│   ├── layout.tsx          # Root layout with metadata
│   ├── page.tsx            # Main landing page
│   └── globals.css         # Global styles
├── components/
│   ├── Header.tsx          # Logo & Navigation (Element 2)
│   ├── Hero.tsx            # Title, CTA, Social Proof (Elements 3-5)
│   ├── MediaSection.tsx    # Images/Videos (Element 6)