Landing Page Generator
Generates high-converting landing pages as complete Next.js/React (TSX) components with Tailwind CSS.
Before & after
Same prompt, same agent — the only difference is the skill.
I can definitely create a landing page for your SaaS app. That's a common project and there are lots of good approaches. Before I start designing, I need to understand your product better. What does your SaaS app do? Who are your main users or customers? What problem does it solve? Do you have any existing branding — colors, logo, fonts? Are there specific features or use cases you want to highlight? Also, what's your conversion goal — sign-ups, free trial starts, demo requests? Do you want testimonials or social proof? And are there any competitor landing pages you like that I could draw inspiration from? Having clear answers to these questions will help me design something more effective. What's your timeline, and do you have a preferred tech stack in mind?
LANDING PAGE - NEXT.JS + TAILWIND + TYPESCRIPT HERO SECTION Headline: 'Sync your team's workflow in 60 seconds' Subheading: 'No setup fees. No credit card. Works with Slack, Asana, Linear.' CTA button: 'Start free trial' (points to /signup) Hero image: animated dashboard mockup (Lottie animation) PROBLEM SECTION (PAS framework) Problem: 'Teams waste 8 hours weekly context-switching between tools.' Agitation: Show stat — '73% of managers say tool fragmentation kills productivity.' Solution: Diagram showing unified workspace. FEATURES GRID (3 columns) 1. Real-time sync | Keeps tasks in sync across all your tools 2. Smart automations | Reduces manual data entry by 90% 3. Team insights | See productivity trends by project and person PRICING TABLE Starter: 39/mo (up to 5 team members) Pro: 99/mo (unlimited members) Enterprise: custom pricing FAQ SECTION Accordion with 6 questions (expandable). Covers integrations, data security, onboarding time, support channels. TESTIMONIALS 3 review cards with name, role, company, quote, 5-star rating. CTA FOOTER Copy: 'Ready to reclaim 8 hours this week?' Button: 'Start free trial' TECH DETAILS Core Web Vitals: LCP 0.6s, CLS 0.05, FID 0.1s. Structured data (schema.org/SoftwareApplication). Meta tags for social preview. Mobile responsive (tested on iPhone SE, iPad, desktop).
About this skill
name: landing-page-generator description: Use when Generates high-converting landing pages as complete Next.js/React (TSX) components with Tailwind CSS.
Landing Page Generator
Generates high-converting landing pages as complete Next.js/React (TSX) components with Tailwind CSS. Creates hero sections, feature grids, pricing tables, FAQ accordions, testimonial blocks, and CTA sections using proven copy frameworks (PAS, AIDA, BAB). Outputs SEO meta tags, structured data, and performance-optimised code targeting Core Web Vitals (LCP < 1s, CLS < 0.1). Use when the user asks to create a landing page, marketing page, homepage, single-page site, lead capture page, campaign page, promo page, or conversion-optimised web page — or when they want to A/B test landing page variants or replace a static page with one designed to convert.
What you get
- Public GitHub repo (alirezarezvani/claude-skills)
- the landing-page-generator skill folder with SKILL.md. Part of a 337-skill / 30-agent / 70-command install.
Customize your output
- Fork the repo and adapt the skill's instructions and references to your workflow.
Example output
Activates automatically when your request matches Landing Page Generator; chains with the other skills, agents, and commands in the collection.
Best for
Creators, builders, and teams using Claude Code.
SKILL.md preview
---
name: landing-page-generator
description: Use this skill when the user wants to create a landing page, marketing page, homepage, lead-capture page, or conversion-optimized single-page site.
version: 1.0.0
category: Business & Ops / Product
author: AgentVolt
license: proprietary
tags:
- business-ops
- product
---
# Landing Page Generator
Generates high-converting landing pages as complete Next.js/React TSX components with Tailwind CSS, built around proven copy frameworks and performance targets.
## When to use
… (sign up to view the full skill)More business & ops skills
View all Business & Ops skills →Product Manager Toolkit
Comprehensive toolkit for product managers including RICE prioritization, customer interview analysis, PRD templates, discovery frameworks, and go-to-market strategies.
Product Skills
Coordinates a set of product-management sub-skills — prioritization, discovery, UX research, competitive teardown, analytics, roadmapping.
Experiment Designer
Use when planning product experiments, writing testable hypotheses, estimating sample size, prioritizing tests, or interpreting A/B outcomes with practical statistical rigor.
UX Researcher & Designer
UX research and design toolkit for Senior UX Designer/Researcher including data-driven persona generation, journey mapping, usability testing frameworks, and research synthesis.