SKILL.md

Landing Page Generator

Generate a complete, deployable landing page as a single HTML file. No build step, no dependencies — open it in a browser or deploy anywhere.

Workflow

1. Gather the Brief

Ask the user for:

Field

Required

Example

Business/product name

Yes

"Acme Plumbing"

Value proposition

Yes

"24/7 emergency plumbing across Newcastle"

Target audience

Yes

"Homeowners in the Hunter Valley"

Primary CTA

Yes

"Call Now" / "Get a Quote" / "Sign Up"

Secondary CTA

"Learn More" / "View Pricing"

Brand colours

Primary: #1E40AF, accent: #F59E0B

Logo URL or text

URL to logo image, or just use business name

Phone / email

For contact section

Sections wanted

Default: hero, features, testimonials, FAQ, footer

If no brand colours provided, suggest using the color-palette skill to generate them, or use a sensible default (slate/blue).

2. Generate the HTML

Produce a single HTML file with:

<!DOCTYPE html>

<html lang="en" class="scroll-smooth">

<head>

  <!-- Meta, OG tags, favicon -->

  <script src="https://cdn.tailwindcss.com"></script>

  <script>tailwind config with custom colours</script>

</head>

<body>

  <!-- Nav -->

  <!-- Hero -->

  <!-- Features -->

  <!-- Social Proof -->

  <!-- Pricing (optional) -->

  <!-- FAQ -->

  <!-- Footer -->

  <!-- Dark mode toggle script -->

</body>

</html>

3. Section Patterns

#### Navigation

Sticky top nav with logo/name + anchor links to sections

Mobile hamburger menu (CSS-only or minimal JS)

CTA button in nav (right-aligned)

#### Hero

Full-width, above the fold

Headline (h1) — the value proposition, not the business name

Subheadline — supporting detail, 1-2 sentences

Primary CTA button (large, contrasting colour)

Optional: hero image placeholder or gradient background

Pattern: text-left on desktop (60/40 split with image), centred on mobile

#### Features / Services

3-6 items in a responsive grid (1 col mobile, 2-3 cols desktop)

Each: icon placeholder + heading + short description

Use semantic headings (h2 for section, h3 for items)

#### Social Proof / Testimonials

2-3 testimonial cards with quote, name, role/company

Star rating if applicable

Alternative: logo bar of client/partner logos

#### Pricing (optional)

2-3 tier cards (basic/pro/enterprise pattern)

Highlighted "recommended" tier

Feature comparison list per tier

CTA button per tier

#### FAQ

Accordion pattern (details/summary — no JS needed)

4-6 common questions

Schema.org FAQPage markup for SEO

#### Footer

Business name, contact info, social links

Legal links (privacy, terms) as placeholders

4. Technical Requirements

Responsive: Mobile-first with three breakpoints

Default: mobile (< 640px)

sm: 640px+ (tablet)

lg: 1024px+ (desktop)

Dark mode: Three-state toggle (light/dark/system)

CSS custom properties for colours

.dark class on <html> — no CSS media query

Small JS snippet for toggle + localStorage persistence

Accessibility:

Proper heading hierarchy (h1 → h2 → h3, no skips)

Alt text placeholders on all images

Focus-visible styles on interactive elements

Sufficient colour contrast (4.5:1 minimum)

Skip-to-content link

SEO:

Semantic HTML5 elements (header, main, section, footer)

OG meta tags (title, description, image, url)

Twitter card meta tags

Canonical URL

JSON-LD for LocalBusiness if it's a local business (reference seo-local-business skill)

Performance:

No JS required for core content rendering

Lazy-load images (loading="lazy")

System font stack (no external font requests)

Single file — no external CSS/JS beyond Tailwind CDN

5. Colour Application

If user provides brand colours, configure Tailwind inline:

<script>

tailwind.config = {

  darkMode: 'class',

  theme: {

    extend: {

      colors: {

        primary: { DEFAULT: '#1E40AF', light: '#3B82F6', dark: '#1E3A8A' },

        accent: { DEFAULT: '#F59E0B', light: '#FBBF24', dark: '#D97706' },

      }

    }

  }

}

</script>

If no colours provided, use Tailwind's built-in palette (slate for neutrals, blue for primary).

6. Output

Write the file to the user's specified location, or default to ./index.html.

After generating:

Tell the user how to preview: open index.html (macOS) or python3 -m http.server for a local server

Suggest deployment options: drag to Cloudflare Pages, Netlify drop, or wrangler deploy for Workers

List placeholder content that needs replacing (images, testimonials, phone numbers)

Quality Rules

No placeholder lorem ipsum — generate realistic placeholder text based on the business type

No broken layouts — test the responsive grid mentally: 1 col → 2 col → 3 col

No inline styles — use Tailwind classes exclusively

Real interactions — smooth scroll to sections, working accordion, working dark mode toggle

Accessible by default — don't sacrifice accessibility for aesthetics

Australian conventions — if the business is Australian, use +61 phone format, Australian spelling, ABN placeholder

Variations

Request

Approach

"Coming soon page"

Hero only + email signup form + countdown timer

"Product launch"

Hero + features + pricing + CTA-heavy

"Portfolio"

Hero + project grid + about + contact

"Event page"

Hero + schedule + speakers + venue + register CTA

"App download"

Hero + features + screenshots + app store badges

Adapt the section selection to match the page purpose. Not every page needs pricing or FAQ.

landing-page

SKILL.md

Landing Page Generator

Workflow

1. Gather the Brief

2. Generate the HTML

3. Section Patterns

4. Technical Requirements

5. Colour Application

6. Output

Quality Rules

Variations

Stop writing automation&scrapers

landing-page

SKILL.md

Landing Page Generator

Workflow

1. Gather the Brief

2. Generate the HTML

3. Section Patterns

4. Technical Requirements

5. Colour Application

6. Output

Quality Rules

Variations

Let your agent run on any real-world website

Related skills

Stop writing automation&scrapers