landing-page

Generate React landing pages with shadcn/ui, Tailwind CSS, and Framer Motion.

267|63|Updated Feb 15, 2026
One-click install
npx skills add https://github.com/modu-ai/cowork-plugins --skill landing-page-modu-ai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: landing-page
Source: https://github.com/modu-ai/cowork-plugins/tree/main/moai-content/skills/landing-page
Command: npx skills add https://github.com/modu-ai/cowork-plugins --skill landing-page-modu-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the creation of optimized landing pages by providing a structured design process and code generation that aligns with user goals, ensuring high conversion rates.

Core Features & Use Cases

  • Full landing page design: From hero to CTA, covers essential sections for marketing, product launches, or event registration.
  • Automated code generation: Produces ready-to-deploy React/Next.js code with shadcn/ui components, Tailwind CSS, and Framer Motion effects.
  • User guidance and templates: Offers prompts for theme interviews, copywriting, and visual style to tailor landing pages to specific campaigns.
  • Use Case: Create a complete SaaS product launch page, including headline, features, testimonials, and a call-to-action, with minimal manual input.

Quick Start

Request a professional, responsive SaaS landing page with a hero section, feature highlights, and CTA, optimized for mobile and desktop.

Frequently Asked Questions about landing-page

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a responsive React landing page with Tailwind CSS and shadcn/ui?

To generate a responsive React landing page, you provide your campaign goals, target audience, and theme. The system then produces ready-to-deploy React components styled with Tailwind CSS and shadcn/ui, ensuring a mobile and desktop responsive layout.

Can I use Framer Motion for animations in a shadcn/ui landing page?

Yes, Framer Motion is integrated directly into the generated landing page code. The system automatically includes Framer Motion effects alongside shadcn/ui components and Tailwind CSS to create visually appealing, animated user interfaces.

What sections do I need for a high-conversion SaaS landing page?

A high-conversion SaaS landing page requires a hero section, feature highlights, testimonials, and a call-to-action. The system guides you through designing these essential sections to maximize conversion rates for product launches or marketing campaigns.

Does this tool provide copywriting prompts for landing page design?

Yes, the tool provides specific prompts for theme interviews, copywriting, and visual style. This guidance helps tailor your landing page's messaging and aesthetics to match your specific marketing campaigns and target audience effectively.

How do I optimize a landing page call-to-action for better conversion rates?

Optimizing a landing page call-to-action involves structuring the design process around your specific campaign goals. The system ensures effective CTA elements are placed logically from the hero section downwards to maximize user conversion.

Are there limitations when using shadcn/ui for landing page code generation?

The primary limitation is that code generation is restricted to the React and Next.js ecosystem using shadcn/ui, Tailwind CSS, and Framer Motion. Projects requiring different frontend frameworks or vanilla HTML cannot use this automated generation approach.