How to Build a Landing Page with ClaudeBoyz

Complete guide to building a production landing page using ClaudeBoyz skills. From project setup to deployment.

Skills You'll Use

SkillPurposeRequired
project-scaffoldInitialize Next.js project with the complete stack
design-systemSet up colors, fonts, and visual identity
landing-heroCreate hero section with headline and CTA
landing-problemBuild pain points section (emotional hook)Optional
landing-solutionPresent your product as the solutionOptional
landing-featuresShowcase product features and benefits
landing-faqAdd FAQ accordion for objection handling
landing-ctaFinal call-to-action before footer
email-resendSet up Resend for email capture
seo-metadataAdd SEO and OpenGraph metadata
responsive-designAudit mobile/tablet responsivenessOptional
deploy-vercelDeploy to Vercel

Step-by-Step Workflow

1

Initialize Project

/claudeboyz:launch

This runs the project-scaffold skill to create a Next.js project with TypeScript, Tailwind, and shadcn/ui.

2

Set Up Design System

Use design-system skill

Establish your visual identity: colors, fonts, spacing. This ensures consistency across all sections.

3

Build Landing Sections

Use landing-* skills in order

Hero → Problem → Solution → Features → FAQ → CTA. Each skill generates a complete section component.

4

Add Email Capture

Use email-resend skill

Set up Resend for collecting emails. Creates API route and form components.

5

Optimize for SEO

Use seo-metadata skill

Add meta tags, OpenGraph images, and structured data for search engines.

6

Deploy

Use deploy-vercel skill

Deploy to Vercel with environment variables configured.

Prerequisites

  • -Claude Code CLI installed and authenticated
  • -ClaudeBoyz skills installed (run ./install.sh)
  • -Node.js 18+ and npm/pnpm
  • -Resend API key for email (free tier available)
  • -Vercel account for deployment (free tier available)

Quick Start

The fastest way to get started is the /claudeboyz:launch command, which orchestrates the skills in the right order.

# In your terminal with Claude Code
/claudeboyz:launch

Ready to build your landing page?

Get ClaudeBoyz and start building today.