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
| Skill | Purpose | Required |
|---|---|---|
project-scaffold | Initialize Next.js project with the complete stack | |
design-system | Set up colors, fonts, and visual identity | |
landing-hero | Create hero section with headline and CTA | |
landing-problem | Build pain points section (emotional hook) | Optional |
landing-solution | Present your product as the solution | Optional |
landing-features | Showcase product features and benefits | |
landing-faq | Add FAQ accordion for objection handling | |
landing-cta | Final call-to-action before footer | |
email-resend | Set up Resend for email capture | |
seo-metadata | Add SEO and OpenGraph metadata | |
responsive-design | Audit mobile/tablet responsiveness | Optional |
deploy-vercel | Deploy to Vercel |
Step-by-Step Workflow
Initialize Project
/claudeboyz:launchThis runs the project-scaffold skill to create a Next.js project with TypeScript, Tailwind, and shadcn/ui.
Set Up Design System
Use design-system skillEstablish your visual identity: colors, fonts, spacing. This ensures consistency across all sections.
Build Landing Sections
Use landing-* skills in orderHero → Problem → Solution → Features → FAQ → CTA. Each skill generates a complete section component.
Add Email Capture
Use email-resend skillSet up Resend for collecting emails. Creates API route and form components.
Optimize for SEO
Use seo-metadata skillAdd meta tags, OpenGraph images, and structured data for search engines.
Deploy
Use deploy-vercel skillDeploy 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.
Ready to build your landing page?
Get ClaudeBoyz and start building today.