landing-page
Generate a complete, deployable landing page from a brief. Produces a single self-contained HTML file with Tailwind CSS (via CDN), responsive design, dark mode, semantic HTML, and OG meta tags. Sections: hero with CTA, features, social proof, pricing (optional), FAQ, footer. Use when building a marketing page, product launch page, coming soon page, or any standalone landing page. Triggers: 'landing page', 'create a page', 'marketing page', 'launch page', 'coming soon page', 'one-page site'.
Works with
---
name: landing-page
description: Generate a complete, deployable landing page from a brief. Produces a single self-contained HTML file with Tailwind CSS (via CDN), responsive design, dark mode, semantic HTML, and OG meta tags. Sections: hero with CTA, features, social proof, pricing (optional), FAQ, footer. Use when building a marketing page, product launch page, coming soon page, or any standalone landing page. Triggers: 'landing page', 'create a page', 'marketing page', 'launch page', 'coming soon page', 'one-page site'.
license: MIT
---
# 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 | No | "Learn More" / "View Pricing" |
| Brand colours | No | Primary: #1E40AF, accent: #F59E0B |
| Logo URL or text | No | URL to logo image, or just use business name |
| Phone / email | No | For contact section |
| Sections wanted | No | 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
- Copyright year (use JS for auto-update)
### 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:
```html
<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:
1. Tell the user how to preview: `open index.html` (macOS) or `python3 -m http.server` for a local server
2. Suggest deployment options: drag to Cloudflare Pages, Netlify drop, or `wrangler deploy` for Workers
3. List placeholder content that needs replacing (images, testimonials, phone numbers)
## Quality Rules
1. **No placeholder lorem ipsum** — generate realistic placeholder text based on the business type
2. **No broken layouts** — test the responsive grid mentally: 1 col → 2 col → 3 col
3. **No inline styles** — use Tailwind classes exclusively
4. **Real interactions** — smooth scroll to sections, working accordion, working dark mode toggle
5. **Accessible by default** — don't sacrifice accessibility for aesthetics
6. **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.More SEO & Marketing skills
ai-video-generation
skills-101/superpowers
Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse
ai-image-generation
skills-101/superpowers
Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image
ai-avatar-video
skills-101/superpowers
Create AI avatar and talking head videos via inference.sh CLI. Recommended: P-Video-Avatar (fastest, cheapest, built-in TTS). Also: OmniHuman, Fabric, PixVerse. Audio: Inworld TTS-2 (100+ languages, emotion steering for characters), ElevenLabs, Kokoro. Capabilities: audio-driven avatars, text-to-avatar, lipsync videos, talking head generation, virtual presenters, UGC content. Use for: AI presenters, explainer videos, virtual influencers, dubbing, marketing videos, UGC ads, gaming avatars, NPC dialogue. Triggers: ai avatar, talking head, lipsync, avatar video, virtual presenter, ai spokesperson, audio driven video, heygen alternative, synthesia alternative, talking avatar, lip sync, video avatar, ai presenter, digital human, ugc, ugc video, ugc ad, avatar ugc
