jezweb/claude-skills1.1k installs

landing-page

Q: How do I install this agent skill?

Run npx skills add https://github.com/jezweb/claude-skills --skill landing-page.

Q: Is this agent skill safe to install?

Review the displayed partner audits, complete source, permissions, dependencies, and exact revision before installing.

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'.

How do I install this agent skill?

npx skills add https://github.com/jezweb/claude-skills --skill landing-page

view source ↗

Is this agent skill safe to install?

Gen Agent Trust Hubpass
The landing-page skill is a tool for generating static HTML landing pages based on user input. It uses standard file operations and references the well-known Tailwind CSS CDN for styling. No malicious patterns or security risks were identified.
Socketpass
No alerts
Snykpass
Risk: LOW · No issues
Runlayerpass
1 file scanned · No issues
ZeroLeakspass
Score: 93/100 · 2 sections analyzed

What does this agent skill do?

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:

<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.

How can the creator link this skill?

Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.

<a href="https://skillzs.dev/skills/jezweb/claude-skills/landing-page">View landing-page on skillZs</a>