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.
To rapidly generate high-converting, performance-optimized landing pages with professional design and copy, saving developers significant time and effort.
功能
- Generates complete Next.js/React TSX components.
- Integrates Tailwind CSS for styling.
- Supports multiple landing page sections (hero, features, pricing, etc.).
- Utilizes proven copy frameworks (PAS, AIDA, BAB).
- Outputs SEO meta tags and performance-optimized code.
使用场景
- Creating marketing pages for new product launches.
- Designing lead capture pages for campaigns.
- Developing A/B test variants of existing landing pages.
- Replacing static web pages with dynamic, conversion-focused content.
非目标
- Generating full-scale web applications.
- Handling backend logic or database integration.
- Deploying the generated landing pages.
- Providing content beyond the defined copy frameworks.
Practical Utility
- info:Edge casesThe SKILL.md outlines common pitfalls but does not explicitly list failure modes with symptoms and recovery steps for the generation process itself.
安装
请先添加 Marketplace
/plugin marketplace add alirezarezvani/claude-skills/plugin install product-team@claude-code-skills质量评分
已验证类似扩展
Setup Tailwind Typescript
100Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.
Sentry React Router Framework Sdk
100Full Sentry SDK setup for React Router Framework mode. Use when asked to "add Sentry to React Router Framework", "install @sentry/react-router", or configure error monitoring, tracing, profiling, session replay, logs, or user feedback for a React Router v7 framework app.
Vue Router Best Practices
100Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.
Brand Landingpage
99Brand-first landing page designer — interviews the user to discover brand identity (adjectives, colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML output. Preferred over frontend-design for standalone landing/marketing pages where the user hasn't established visual direction yet. TRIGGER when: user asks to "create/design/build a landing page", "make a homepage for my project/product/service", "build a marketing page", or wants to promote an app/side project. Especially when they haven't defined brand colors, fonts, or visual style — the guided brand interview is the core value. DO NOT TRIGGER when: user has a specific design mockup to implement, wants a dashboard or app UI, needs component-level frontend work (buttons, forms, navbars), is building a multi-page application, or is restyling an existing page with known design tokens. Use frontend-design for those cases.
Env Manager
99Environment variable validation, security scanning, and management for Next.js, Vite, React, and Node.js applications
Shadcn/ui Component Library
99shadcn/ui component library for React with Tailwind CSS - copy-paste accessible components with full code ownership