{"id":"f3393c71-4d8d-4dab-b8d9-09b81d7b81e2","shortId":"gKXEX4","kind":"skill","title":"landing-page-generator","tagline":"Generates high-converting Next.js/React landing pages with Tailwind CSS. Uses PAS, AIDA, and BAB frameworks for optimized copy/components (Heroes, Features, Pricing). Focuses on Core Web Vitals/SEO.","description":"# Landing Page Generator\n\nGenerate high-converting landing pages from a product description. Output complete Next.js/React components with multiple section variants, proven copy frameworks, SEO optimization, and performance-first patterns. Not lorem ipsum — actual copy that converts.\n\n**Target:** LCP < 1s · CLS < 0.1 · FID < 100ms  \n**Output:** TSX components + Tailwind styles + SEO meta + copy variants\n\n## When to Use\n- You need to generate a marketing landing page in Next.js or React.\n- The task involves conversion-focused page structure, section variants, Tailwind styling, or SEO-aware copy.\n- You want complete landing-page output from a product description rather than isolated UI fragments.\n\n## Core Capabilities\n\n- 5 hero section variants (centered, split, gradient, video-bg, minimal)\n- Feature sections (grid, alternating, cards with icons)\n- Pricing tables (2–4 tiers with feature lists and toggle)\n- FAQ accordion with schema markup\n- Testimonials (grid, carousel, single-quote)\n- CTA sections (banner, full-page, inline)\n- Footer (simple, mega, minimal)\n- 4 design styles with Tailwind class sets\n\n---\n\n## Generation Workflow\n\nFollow these steps in order for every landing page request:\n\n1. **Gather inputs** — collect product name, tagline, audience, pain point, key benefit, pricing tiers, design style, and copy framework using the trigger format below. Ask only for missing fields.\n2. **Analyze brand voice** (recommended) — if the user has existing brand content (website copy, blog posts, marketing materials), run it through `marketing-skill/content-production/scripts/brand_voice_analyzer.py` to get a voice profile (formality, tone, perspective). Use the profile to inform design style and copy framework selection:\n   - formal + professional → **enterprise** style, **AIDA** framework\n   - casual + friendly → **bold-startup** style, **BAB** framework\n   - professional + authoritative → **dark-saas** style, **PAS** framework\n   - casual + conversational → **clean-minimal** style, **BAB** framework\n3. **Select design style** — map the user's choice (or infer from brand voice analysis) to one of the four Tailwind class sets in the Design Style Reference.\n4. **Apply copy framework** — write all headline and body copy using the chosen framework (PAS / AIDA / BAB) before generating components. Match the voice profile's formality and tone throughout.\n5. **Generate sections in order** — Hero → Features → Pricing → FAQ → Testimonials → CTA → Footer. Skip sections not relevant to the product.\n6. **Validate against SEO checklist** — run through every item in the SEO Checklist before outputting final code. Fix any gaps inline.\n7. **Output final components** — deliver complete, copy-paste-ready TSX files with all Tailwind classes, SEO meta, and structured data included.\n\n---\n\n## Triggering This Skill\n\n```\nProduct: [name]\nTagline: [one sentence value prop]\nTarget audience: [who they are]\nKey pain point: [what problem you solve]\nKey benefit: [primary outcome]\nPricing tiers: [free/pro/enterprise or describe]\nDesign style: dark-saas | clean-minimal | bold-startup | enterprise\nCopy framework: PAS | AIDA | BAB\n```\n\n---\n\n## Design Style Reference\n\n| Style | Background | Accent | Cards | CTA Button |\n|---|---|---|---|---|\n| **Dark SaaS** | `bg-gray-950 text-white` | `violet-500/400` | `bg-gray-900 border border-gray-800` | `bg-violet-600 hover:bg-violet-500` |\n| **Clean Minimal** | `bg-white text-gray-900` | `blue-600` | `bg-gray-50 border border-gray-200 rounded-2xl` | `bg-blue-600 hover:bg-blue-700` |\n| **Bold Startup** | `bg-white text-gray-900` | `orange-500` | `shadow-xl rounded-3xl` | `bg-orange-500 hover:bg-orange-600 text-white` |\n| **Enterprise** | `bg-slate-50 text-slate-900` | `slate-700` | `bg-white border border-slate-200 shadow-sm` | `bg-slate-900 hover:bg-slate-800 text-white` |\n\n> **Bold Startup** headings: add `font-black tracking-tight` to all `<h1>`/`<h2>` elements.\n\n---\n\n## Copy Frameworks\n\n**PAS (Problem → Agitate → Solution)**\n- H1: Painful state they're in\n- Sub: What happens if they don't fix it\n- CTA: What you offer\n- *Example — H1:* \"Your team wastes 3 hours a day on manual reporting\" / *Sub:* \"Every hour spent on spreadsheets is an hour not closing deals. Your competitors are already automated.\" / *CTA:* \"Automate your reports in 10 minutes →\"\n\n**AIDA (Attention → Interest → Desire → Action)**\n- H1: Bold attention-grabbing statement → Sub: Interesting fact or benefit → Features: Desire-building proof points → CTA: Clear action\n\n**BAB (Before → After → Bridge)**\n- H1: \"[Before state] → [After state]\" → Sub: \"Here's how [product] bridges the gap\" → Features: How it works (the bridge)\n\n---\n\n## Representative Component: Hero (Centered Gradient — Dark SaaS)\n\nUse this as the structural template for all hero variants. Swap layout classes, gradient direction, and image placement for split, video-bg, and minimal variants.\n\n```tsx\nexport function HeroCentered() {\n  return (\n    <section className=\"relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gray-950 px-4 text-center\">\n      <div className=\"absolute inset-0 bg-gradient-to-b from-violet-900/20 to-transparent\" />\n      <div className=\"pointer-events-none absolute -top-40 left-1/2 h-[600px] w-[600px] -translate-x-1/2 rounded-full bg-violet-600/20 blur-3xl\" />\n      <div className=\"relative z-10 max-w-4xl\">\n        <div className=\"mb-6 inline-flex items-center gap-2 rounded-full border border-violet-500/30 bg-violet-500/10 px-4 py-1.5 text-sm text-violet-300\">\n          <span className=\"h-1.5 w-1.5 rounded-full bg-violet-400\" />\n          Now in public beta\n        </div>\n        <h1 className=\"mb-6 text-5xl font-bold tracking-tight text-white md:text-7xl\">\n          Ship faster.<br />\n          <span className=\"bg-gradient-to-r from-violet-400 to-pink-400 bg-clip-text text-transparent\">\n            Break less.\n          </span>\n        </h1>\n        <p className=\"mx-auto mb-10 max-w-2xl text-xl text-gray-400\">\n          The deployment platform that catches errors before your users do.\n          Zero config. Instant rollbacks. Real-time monitoring.\n        </p>\n        <div className=\"flex flex-col items-center gap-4 sm:flex-row sm:justify-center\">\n          <Button size=\"lg\" className=\"bg-violet-600 text-white hover:bg-violet-500 px-8\">\n            Start free trial\n          </Button>\n          <Button size=\"lg\" variant=\"outline\" className=\"border-gray-700 text-gray-300\">\n            See how it works →\n          </Button>\n        </div>\n        <p className=\"mt-4 text-sm text-gray-500\">No credit card required · 14-day free trial</p>\n      </div>\n    </section>\n  )\n}\n```\n\n---\n\n## Other Section Patterns\n\n### Feature Section (Alternating)\n\nMap over a `features` array with `{ title, description, image, badge }`. Toggle layout direction with `i % 2 === 1 ? \"lg:flex-row-reverse\" : \"\"`. Use `<Image>` with explicit `width`/`height` and `rounded-2xl shadow-xl`. Wrap in `<section className=\"py-24\">` with `max-w-6xl` container.\n\n### Pricing Table\n\nMap over a `plans` array with `{ name, price, description, features[], cta, highlighted }`. Highlighted plan gets `border-2 border-violet-500 bg-violet-950/50 ring-4 ring-violet-500/20`; others get `border border-gray-800 bg-gray-900`. Render `null` price as \"Custom\". Use `<Check>` icon per feature row. Layout: `grid gap-8 lg:grid-cols-3`.\n\n### FAQ with Schema Markup\n\nInject `FAQPage` JSON-LD via `<script type=\"application/ld+json\" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} />` inside the section. Map FAQs with `{ q, a }` into shadcn `<Accordion>` with `type=\"single\" collapsible`. Container: `max-w-3xl`.\n\n### Testimonials, CTA, Footer\n\n- **Testimonials:** Grid (`grid-cols-1 md:grid-cols-3`) or single-quote hero block with avatar, name, role, and quote text.\n- **CTA Banner:** Full-width section with headline, subhead, and two buttons (primary + ghost). Add trust signals (money-back guarantee, logo strip) immediately below.\n- **Footer:** Logo + nav columns + social links + legal. Use `border-t border-gray-800` separator.\n\n---\n\n## SEO Checklist\n\n- [ ] `<title>` tag: primary keyword + brand (50–60 chars)\n- [ ] Meta description: benefit + CTA (150–160 chars)\n- [ ] OG image: 1200×630px with product name and tagline\n- [ ] H1: one per page, includes primary keyword\n- [ ] Structured data: FAQPage, Product, or Organization schema\n- [ ] Canonical URL set\n- [ ] Image alt text on all `<Image>` components\n- [ ] robots.txt and sitemap.xml configured\n- [ ] Core Web Vitals: LCP < 1s, CLS < 0.1\n- [ ] Mobile viewport meta tag present\n- [ ] Internal linking to pricing and docs\n\n> **Validation step:** Before outputting final code, verify every checklist item above is satisfied. Fix any gaps inline — do not skip items.\n\n---\n\n## Performance Targets\n\n| Metric | Target | Technique |\n|---|---|---|\n| LCP | < 1s | Preload hero image, use `priority` on Next/Image |\n| CLS | < 0.1 | Set explicit width/height on all images |\n| FID/INP | < 100ms | Defer non-critical JS, use `loading=\"lazy\"` |\n| TTFB | < 200ms | Use ISR or static generation for landing pages |\n| Bundle | < 100KB JS | Audit with `@next/bundle-analyzer` |\n\n---\n\n## Common Pitfalls\n\n- Hero image not preloaded — add `priority` prop to first `<Image>`\n- Missing mobile breakpoints — always design mobile-first with `sm:` prefixes\n- CTA copy too vague — \"Get started\" beats \"Learn more\"; \"Start free trial\" beats \"Sign up\"\n- Pricing page missing trust signals — add money-back guarantee and testimonials near CTA\n- No above-the-fold CTA on mobile — ensure button is visible without scrolling on 375px viewport\n\n---\n\n## Related Skills\n\n- **Brand Voice Analyzer** (`marketing-skill/content-production/scripts/brand_voice_analyzer.py`) — Run before generation to establish voice profile and ensure copy consistency\n- **UI Design System** (`product-team/ui-design-system/`) — Generate design tokens from brand color before building the page\n- **Competitive Teardown** (`product-team/competitive-teardown/`) — Competitive positioning informs landing page messaging and differentiation\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["landing","page","generator","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding"],"capabilities":["skill","source-sickn33","skill-landing-page-generator","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/landing-page-generator","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34726 github stars · SKILL.md body (10,430 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-23T12:51:08.397Z","embedding":null,"createdAt":"2026-04-18T21:39:38.980Z","updatedAt":"2026-04-23T12:51:08.397Z","lastSeenAt":"2026-04-23T12:51:08.397Z","tsv":"'-2':880 '-4':890 '-500':498,560 '-600':528 '-700':589 '-8':919 '/400':499 '/content-production/scripts/brand_voice_analyzer.py':262 '/react':11,51 '0.1':78 '1':209,836 '10':685 '100ms':80 '14':810 '1s':76 '2':160,238,835 '200':537,597 '2xl':540,850 '3':312,656,924 '3xl':566 '4':161,190,340 '5':140,369 '50':532,583 '500':517,570,884 '500/20':894 '6':388 '600':512,544,575 '6xl':860 '7':409 '700':549 '800':508,609,901 '900':503,526,558,587,604,905 '950':493 '950/50':888 'accent':484 'accordion':169 'action':691,711 'actual':70 'add':616 'agit':630 'aida':19,286,355,477,687 'alreadi':678 'altern':154,819 'analysi':326 'analyz':239 'appli':341 'array':824,868 'ask':233 'attent':688,695 'attention-grab':694 'audienc':216,442 'authorit':297 'autom':679,681 'awar':120 'bab':21,294,310,356,478,712 'background':483 'badg':829 'banner':181 'benefit':220,454,702 'beta':776 'bg':149,491,501,510,515,521,530,542,547,553,568,573,581,591,602,607,764,886,903 'bg-blue':541,546 'bg-gray':490,500,529,902 'bg-orang':567,572 'bg-slate':580,601,606 'bg-violet':509,514,885 'bg-white':520,552,590 'black':619 'blog':252 'blue':527,543,548 'bodi':348 'bold':291,471,550,613,693 'bold-startup':290,470 'border':504,506,533,535,593,595,879,882,897,899 'border-gray':505,534,898 'border-sl':594 'border-violet':881 'brand':240,248,324 'break':779 'bridg':715,726,734 'build':706 'button':487 'capabl':139 'card':155,485,808 'carousel':175 'casual':288,304 'catch':785 'center':144,738 'checklist':392,400 'choic':320 'chosen':352 'class':195,333,424,754 'clean':307,468,518 'clean-minim':306,467 'clear':710 'close':673 'cls':77 'code':404 'col':923 'collect':212 'competitor':676 'complet':48,124,414 'compon':52,83,359,412,736 'config':792 'contain':861 'content':249 'convers':109,305 'conversion-focus':108 'convert':8,40,73 'copi':58,71,88,121,226,251,279,342,349,416,474,626 'copy-paste-readi':415 'copy/components':25 'core':31,138 'credit':807 'css':16 'cta':179,379,486,647,680,709,874 'custom':910 'dark':299,465,488,740 'dark-saa':298,464 'data':429 'day':659,811 'deal':674 'deliv':413 'deploy':782 'describ':461 'descript':46,132,827,872 'design':191,223,276,314,337,462,479 'desir':690,705 'desire-build':704 'direct':756,832 'element':625 'enterpris':284,473,579 'error':786 'everi':205,395,664 'exampl':651 'exist':247 'explicit':844 'export':769 'fact':700 'faq':168,377,925 'faqpag':930 'faster':778 'featur':27,151,164,375,703,729,817,823,873,914 'fid':79 'field':237 'file':420 'final':403,411 'first':65 'fix':405,645 'flex':839 'flex-row-revers':838 'focus':29,110 'follow':199 'font':618 'font-black':617 'footer':186,380 'formal':268,282,365 'format':231 'four':331 'fragment':137 'framework':22,59,227,280,287,295,303,311,343,353,475,627 'free':800,812 'free/pro/enterprise':459 'friend':289 'full':183 'full-pag':182 'function':770 'gap':407,728,918 'gather':210 'generat':4,5,36,37,96,197,358,370 'get':264,878,896 'grab':696 'gradient':146,739,755 'gray':492,502,507,525,531,536,557,900,904 'grid':153,174,917,922 'grid-col':921 'h1':632,652,692,716 'happen':640 'head':615 'headlin':346 'height':846 'hero':26,141,374,737,750 'herocent':771 'high':7,39 'high-convert':6,38 'highlight':875,876 'hour':657,665,671 'hover':513,545,571,605 'icon':157,912 'imag':758,828 'includ':430 'infer':322 'inform':275 'inject':929 'inlin':185,408 'input':211 'instant':793 'interest':689,699 'involv':107 'ipsum':69 'isol':135 'item':396 'json':932 'json-ld':931 'key':219,446,453 'land':2,12,34,41,99,126,206 'landing-pag':125 'landing-page-gener':1 'layout':753,831,916 'lcp':75 'ld':933 'less':780 'lg':837,920 'list':165 'lorem':68 'manual':661 'map':316,820,864 'market':98,254,260 'marketing-skil':259 'markup':172,928 'match':360 'materi':255 'max':858 'max-w-6xl':857 'mega':188 'meta':87,426 'minim':150,189,308,469,519,766 'minut':686 'miss':236 'monitor':798 'multipl':54 'name':214,435,870 'need':94 'next.js':10,50,102 'next.js/react':9,49 'null':907 'offer':650 'one':328,437 'optim':24,61 'orang':559,569,574 'order':203,373 'other':895 'outcom':456 'output':47,81,128,402,410 'page':3,13,35,42,100,111,127,184,207 'pain':217,447,633 'pas':18,302,354,476,628 'past':417 'pattern':66,816 'per':913 'perform':64 'performance-first':63 'perspect':270 'placement':759 'plan':867,877 'platform':783 'point':218,448,708 'post':253 'price':28,158,221,376,457,862,871,908 'primari':455 'problem':450,629 'product':45,131,213,387,434,725 'profession':283,296 'profil':267,273,363 'proof':707 'prop':440 'proven':57 'public':775 'quot':178 'rather':133 're':636 'react':104 'readi':418 'real':796 'real-tim':795 'recommend':242 'refer':339,481 'relev':384 'render':906 'report':662,683 'repres':735 'request':208 'requir':809 'return':772 'revers':841 'ring':889,892 'ring-violet':891 'rollback':794 'round':539,565,849 'rounded-2xl':538,848 'rounded-3xl':564 'row':840,915 'run':256,393 'saa':300,466,489,741 'schema':171,927 'section':55,113,142,152,180,371,382,815,818 'see':802 'select':281,313 'sentenc':438 'seo':60,86,119,391,399,425 'seo-awar':118 'set':196,334 'shadow':562,599,852 'shadow-sm':598 'shadow-xl':561,851 'ship':777 'simpl':187 'singl':177 'single-quot':176 'skill':261,433 'skill-landing-page-generator' 'skip':381 'slate':582,586,588,596,603,608 'sm':600 'solut':631 'solv':452 'source-sickn33' 'spent':666 'split':145,761 'spreadsheet':668 'start':799 'startup':292,472,551,614 'state':634,718,720 'statement':697 'step':201 'structur':112,428,746 'style':85,116,192,224,277,285,293,301,309,315,338,463,480,482 'sub':638,663,698,721 'swap':752 'tabl':159,863 'taglin':215,436 'tailwind':15,84,115,194,332,423 'target':74,441 'task':106 'team':654 'templat':747 'testimoni':173,378 'text':495,524,556,577,585,611 'text-gray':523,555 'text-slat':584 'text-whit':494,576,610 'throughout':368 'tier':162,222,458 'tight':622 'time':797 'titl':826 'toggl':167,830 'tone':269,367 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'track':621 'tracking-tight':620 'trial':801,813 'trigger':230,431 'tsx':82,419,768 'ui':136 'use':17,92,228,271,350,742,842,911 'user':245,318,789 'valid':389 'valu':439 'variant':56,89,114,143,751,767 'via':934 'video':148,763 'video-bg':147,762 'violet':497,511,516,883,887,893 'vitals/seo':33 'voic':241,266,325,362 'w':859 'want':123 'wast':655 'web':32 'websit':250 'white':496,522,554,578,592,612 'width':845 'work':732,805 'workflow':198 'wrap':854 'write':344 'xl':563,853 'zero':791","prices":[{"id":"88a97704-cec8-4684-b7b0-6bc426f06363","listingId":"f3393c71-4d8d-4dab-b8d9-09b81d7b81e2","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:39:38.980Z"}],"sources":[{"listingId":"f3393c71-4d8d-4dab-b8d9-09b81d7b81e2","source":"github","sourceId":"sickn33/antigravity-awesome-skills/landing-page-generator","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/landing-page-generator","isPrimary":false,"firstSeenAt":"2026-04-18T21:39:38.980Z","lastSeenAt":"2026-04-23T12:51:08.397Z"}],"details":{"listingId":"f3393c71-4d8d-4dab-b8d9-09b81d7b81e2","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"landing-page-generator","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34726,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-23T06:41:03Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"7dd99435f994b2854658dbe34abb3e964d671227","skill_md_path":"skills/landing-page-generator/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/landing-page-generator"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"landing-page-generator","description":"Generates high-converting Next.js/React landing pages with Tailwind CSS. Uses PAS, AIDA, and BAB frameworks for optimized copy/components (Heroes, Features, Pricing). Focuses on Core Web Vitals/SEO."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/landing-page-generator"},"updatedAt":"2026-04-23T12:51:08.397Z"}}