Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From frontend
Generates a single-file HTML landing page from a brief using Tailwind CSS CDN. Includes responsive design, dark mode, hero with CTA, features, testimonials, FAQ, footer, and OG meta tags.
npx claudepluginhub jezweb/claude-skills --plugin frontendHow this skill is triggered — by the user, by Claude, or both
Slash command
/frontend:landing-pageThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate a complete, deployable landing page as a single HTML file. No build step, no dependencies — open it in a browser or deploy anywhere.
Generates high-converting Next.js/React landing pages with Tailwind CSS using PAS, AIDA, and BAB copy frameworks. Outputs complete TSX components (Heroes, Features, Pricing, FAQ, Testimonials, CTA, Footer) with SEO meta and Core Web Vitals optimization.
Creates professional landing pages using tactical CSS templates and strategic copywriting. Orchestrates discovery, copy generation via subagent, and CSS loading for B2B services or product pages.
Designs and builds high-converting landing pages for product launches with hero sections, SEO, waitlists, urgency mechanics, and developer-first patterns. Useful for launch, feature, signup, or marketing pages.
Share bugs, ideas, or general feedback.
Generate a complete, deployable landing page as a single HTML file. No build step, no dependencies — open it in a browser or deploy anywhere.
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).
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>
Responsive: Mobile-first with three breakpoints
Default: mobile (< 640px)
sm: 640px+ (tablet)
lg: 1024px+ (desktop)
Dark mode: Three-state toggle (light/dark/system)
.dark class on <html> — no CSS media queryAccessibility:
SEO:
seo-local-business skill)Performance:
loading="lazy")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).
Write the file to the user's specified location, or default to ./index.html.
After generating:
open index.html (macOS) or python3 -m http.server for a local serverwrangler deploy for Workers| 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.