landing-page
installsforks
How to install landing-page?
jezweb/claude-skills/landing-page
$npx -y skills add jezweb/claude-skills --skill landing-pageGenerate 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
SKILL.md
| 1 | # Landing Page Generator |
| 2 | |
| 3 | Generate a complete, deployable landing page as a single HTML file. No build step, no dependencies — open it in a browser or deploy anywhere. |
| 4 | |
| 5 | ## Workflow |
| 6 | |
| 7 | ### 1. Gather the Brief |
| 8 | |
| 9 | Ask the user for: |
| 10 | |
| 11 | | Field | Required | Example | |
| 12 | |-------|----------|---------| |
| 13 | | Business/product name | Yes | "Acme Plumbing" | |
| 14 | | Value proposition | Yes | "24/7 emergency plumbing across Newcastle" | |
| 15 | | Target audience | Yes | "Homeowners in the Hunter Valley" | |
| 16 | | Primary CTA | Yes | "Call Now" / "Get a Quote" / "Sign Up" | |
| 17 | | Secondary CTA | No | "Learn More" / "View Pricing" | |
| 18 | | Brand colours | No | Primary: #1E40AF, accent: #F59E0B | |
| 19 | | Logo URL or text | No | URL to logo image, or just use business name | |
| 20 | | Phone / email | No | For contact section | |
| 21 | | Sections wanted | No | Default: hero, features, testimonials, FAQ, footer | |
| 22 | |
| 23 | If no brand colours provided, suggest using the `color-palette` skill to generate them, or use a sensible default (slate/blue). |
| 24 | |
| 25 | ### 2. Generate the HTML |
| 26 | |
| 27 | Produce a **single HTML file** with: |
| 28 | |
| 29 | ``` |
| 30 | <!DOCTYPE html> |
| 31 | <html lang="en" class="scroll-smooth"> |
| 32 | <head> |
| 33 | <!-- Meta, OG tags, favicon --> |
| 34 | <script src="https://cdn.tailwindcss.com"></script> |
| 35 | <script>tailwind config with custom colours</script> |
| 36 | </head> |
| 37 | <body> |
| 38 | <!-- Nav --> |
| 39 | <!-- Hero --> |
| 40 | <!-- Features --> |
| 41 | <!-- Social Proof --> |
| 42 | <!-- Pricing (optional) --> |
| 43 | <!-- FAQ --> |
| 44 | <!-- Footer --> |
| 45 | <!-- Dark mode toggle script --> |
| 46 | </body> |
| 47 | </html> |
| 48 | ``` |
| 49 | |
| 50 | ### 3. Section Patterns |
| 51 | |
| 52 | #### Navigation |
| 53 | - Sticky top nav with logo/name + anchor links to sections |
| 54 | - Mobile hamburger menu (CSS-only or minimal JS) |
| 55 | - CTA button in nav (right-aligned) |
| 56 | |
| 57 | #### Hero |
| 58 | - Full-width, above the fold |
| 59 | - Headline (h1) — the value proposition, not the business name |
| 60 | - Subheadline — supporting detail, 1-2 sentences |
| 61 | - Primary CTA button (large, contrasting colour) |
| 62 | - Optional: hero image placeholder or gradient background |
| 63 | - Pattern: text-left on desktop (60/40 split with image), centred on mobile |
| 64 | |
| 65 | #### Features / Services |
| 66 | - 3-6 items in a responsive grid (1 col mobile, 2-3 cols desktop) |
| 67 | - Each: icon placeholder + heading + short description |
| 68 | - Use semantic headings (h2 for section, h3 for items) |
| 69 | |
| 70 | #### Social Proof / Testimonials |
| 71 | - 2-3 testimonial cards with quote, name, role/company |
| 72 | - Star rating if applicable |
| 73 | - Alternative: logo bar of client/partner logos |
| 74 | |
| 75 | #### Pricing (optional) |
| 76 | - 2-3 tier cards (basic/pro/enterprise pattern) |
| 77 | - Highlighted "recommended" tier |
| 78 | - Feature comparison list per tier |
| 79 | - CTA button per tier |
| 80 | |
| 81 | #### FAQ |
| 82 | - Accordion pattern (details/summary — no JS needed) |
| 83 | - 4-6 common questions |
| 84 | - Schema.org FAQPage markup for SEO |
| 85 | |
| 86 | #### Footer |
| 87 | - Business name, contact info, social links |
| 88 | - Legal links (privacy, terms) as placeholders |
| 89 | - Copyright year (use JS for auto-update) |
| 90 | |
| 91 | ### 4. Technical Requirements |
| 92 | |
| 93 | **Responsive**: Mobile-first with three breakpoints |
| 94 | ``` |
| 95 | Default: mobile (< 640px) |
| 96 | sm: 640px+ (tablet) |
| 97 | lg: 1024px+ (desktop) |
| 98 | ``` |
| 99 | |
| 100 | **Dark mode**: Three-state toggle (light/dark/system) |
| 101 | - CSS custom properties for colours |
| 102 | - `.dark` class on `<html>` — no CSS media query |
| 103 | - Small JS snippet for toggle + localStorage persistence |
| 104 | |
| 105 | **Accessibility**: |
| 106 | - Proper heading hierarchy (h1 → h2 → h3, no skips) |
| 107 | - Alt text placeholders on all images |
| 108 | - Focus-visible styles on interactive elements |
| 109 | - Sufficient colour contrast (4.5:1 minimum) |
| 110 | - Skip-to-content link |
| 111 | |
| 112 | **SEO**: |
| 113 | - Semantic HTML5 elements (header, main, section, footer) |
| 114 | - OG meta tags (title, description, image, url) |
| 115 | - Twitter card meta tags |
| 116 | - Canonical URL |
| 117 | - JSON-LD for LocalBusiness if it's a local business (reference `seo-local-business` skill) |
| 118 | |
| 119 | **Performance**: |
| 120 | - No JS required for core content rendering |
| 121 | - Lazy-load images (`loading="lazy"`) |
| 122 | - System font stack (no external font requests) |
| 123 | - Single file — no external CSS/JS beyond Tailwind CDN |
| 124 | |
| 125 | ### 5. Colour Application |
| 126 | |
| 127 | If user provides brand colours, configure Tailwind inline: |
| 128 | |
| 129 | ```html |
| 130 | <script> |
| 131 | tailwind.config = { |
| 132 | darkMode: 'class', |
| 133 | theme: { |
| 134 | extend: { |
| 135 | colors: { |
| 136 | primary: { DEFAULT: '#1E40AF', light: '#3B82F6', dark: '#1E3A8A' }, |
| 137 | accent: { DEFAULT: '#F59E0B', light: '#FBBF24', dark: '#D97706' }, |
| 138 | } |
| 139 | } |
| 140 | } |
| 141 | } |
| 142 | </script> |
| 143 | ``` |
| 144 | |
| 145 | If no colours provided, use Tailwind's built-in palette (slate for neutrals, blue for primary). |
| 146 | |
| 147 | ### 6. Output |
| 148 | |
| 149 | Write the file to the user's specified location, or default to `./index.h |
People who liked this also viewed
6 picksType
- seo-auditWhen the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tagSkillsJul 2026
- copywritingWhen the user wants to write, rewrite, or improve marketing copy for any page — including homepage, landing pages, pricing pages, feature pages, about pages, or product pages. Also use when the user sSkillsJul 2026
- marketing-psychologyWhen the user wants to apply psychological principles, mental models, or behavioral science to marketing. Also use when the user mentions 'psychology,' 'mental models,' 'cognitive bias,' 'persuasion,'SkillsJul 2026
- content-strategyWhen the user wants to plan a content strategy, decide what content to create, or figure out what topics to cover. Also use when the user mentions "content strategy," "what should I write about," "conSkillsJul 2026
- programmatic-seoWhen the user wants to create SEO-driven pages at scale using templates and data. Also use when the user mentions "programmatic SEO," "template pages," "pages at scale," "directory pages," "location pSkillsJul 2026
- marketing-ideasWhen the user needs marketing ideas, inspiration, or strategies for their SaaS or software product. Also use when the user asks for 'marketing ideas,' 'growth ideas,' 'how to market,' 'marketing stratSkillsJul 2026
