Build a high-converting landing page with SEO, engagement, and conversion optimization
Builds a high-converting, SEO-optimized landing page with analytics and animations.
/plugin marketplace add vanman2024/ai-dev-marketplace/plugin install nextjs-frontend@ai-dev-marketplace<page-name> [--product|--saas|--newsletter|--webinar]šØ EXECUTION NOTICE FOR CLAUDE
When you invoke this command via SlashCommand, the system returns THESE INSTRUCTIONS below.
YOU are the executor. This is NOT an autonomous subprocess.
CRITICAL: All generated files must follow security rules:
your_api_key_here.env files with .gitignoreArguments: $ARGUMENTS
Goal: Build a complete, high-converting landing page optimized for SEO, user engagement, and conversion. This command orchestrates multiple specialist agents to create a landing page that ranks, engages, and converts.
Core Principles:
Landing Page Types:
Phase 1: Discovery Goal: Understand landing page requirements
Actions:
test -d app && echo "Next.js App Router: Found" || echo "App Router: Not found"
grep -q "shadcn" package.json && echo "shadcn/ui: Installed" || echo "shadcn/ui: Not installed"
/nextjs-frontend:init firstPhase 2: Gather Requirements Goal: Collect landing page specifications
Actions:
Phase 3: Content Strategy Goal: Generate optimized copy using content-optimizer-agent
Actions:
Task(description="Generate landing page copy", subagent_type="nextjs-frontend:content-optimizer-agent", prompt="You are the content optimizer agent. Generate high-converting copy for a landing page.
Page Type: $ARGUMENTS Value Proposition: [from Phase 2] Target Audience: [from Phase 2] Features: [from Phase 2]
Generate:
Hero Section
Social Proof
Features Section
Pricing Section (if applicable)
FAQ Section
Final CTA
Meta Content
Deliverable: Complete copy document ready for implementation")
Phase 4: Build Page Structure Goal: Create landing page with shadcn/ui components
Actions:
mkdir -p app/$PAGE_NAME
Task(description="Build landing page structure", subagent_type="nextjs-frontend:page-generator-agent", prompt="You are the page generator agent. Create a landing page with these sections:
Page: app/$PAGE_NAME/page.tsx Type: $ARGUMENTS
Sections (in order):
Requirements:
Deliverable: Complete landing page file with all sections")
Phase 5: SEO Optimization Goal: Apply SEO best practices using seo-specialist-agent
Actions:
Task(description="Optimize landing page SEO", subagent_type="nextjs-frontend:seo-specialist-agent", prompt="You are the SEO specialist agent. Optimize the landing page for 2025 SEO.
Page: app/$PAGE_NAME/page.tsx
Implement:
Deliverable: SEO-optimized page with all technical requirements")
Phase 6: Conversion Optimization Goal: Apply CRO best practices using conversion-specialist-agent
Actions:
Task(description="Optimize for conversions", subagent_type="nextjs-frontend:conversion-specialist-agent", prompt="You are the conversion specialist agent. Optimize the landing page for maximum conversions.
Page: app/$PAGE_NAME/page.tsx
Implement:
CTA Optimization
Trust Signals
Form Optimization
Urgency Elements (if applicable)
Deliverable: Conversion-optimized landing page components")
Phase 7: Engagement Enhancement Goal: Add micro-interactions using engagement-specialist-agent
Actions:
Task(description="Add engagement features", subagent_type="nextjs-frontend:engagement-specialist-agent", prompt="You are the engagement specialist agent. Add engaging interactions to the landing page.
Page: app/$PAGE_NAME/page.tsx
Implement:
Scroll Animations
Micro-Interactions
Progress Indicators
Social Proof Animations
Deliverable: Engaging landing page with Framer Motion animations")
Phase 8: Analytics Setup Goal: Implement tracking using analytics-specialist-agent
Actions:
Task(description="Setup landing page analytics", subagent_type="nextjs-frontend:analytics-specialist-agent", prompt="You are the analytics specialist agent. Set up comprehensive tracking for the landing page.
Page: app/$PAGE_NAME/page.tsx
Implement:
Deliverable: Analytics-ready landing page with comprehensive tracking")
Phase 9: Final Integration Goal: Integrate all specialist outputs into cohesive page
Actions:
npm run build
Phase 10: Summary Goal: Present completed landing page
Actions:
Landing Page Built Successfully! š
===================================
Page: app/$PAGE_NAME/page.tsx
Type: [--saas|--product|--newsletter|--webinar]
ā
Content: Headlines, copy, CTAs optimized
ā
SEO: Metadata, schema, semantic HTML
ā
Conversion: CTAs, trust signals, forms
ā
Engagement: Animations, micro-interactions
ā
Analytics: GA4, events, A/B ready
Sections Created:
1. Hero with CTA
2. Logo Cloud
3. Features Grid
4. How It Works
5. Testimonials
6. Pricing Table
7. FAQ Accordion
8. Final CTA
Next Steps:
1. Replace placeholder content with real copy
2. Add actual logos and testimonials
3. Connect forms to backend
4. Set up GA4 property
5. Launch and monitor conversions
Preview:
npm run dev
ā Open http://localhost:3000/$PAGE_NAME