Micro Landing Builder

Create config-driven NextJS landing pages for startups.

Concept

Each landing page is a standalone NextJS app where:

Content is defined in app.json config file UI comes from @agenticindiedev/ui Deploy independently to any domain via Vercel Prerequisites

You need a published landing UI components package. The skill expects:

Package name (default: @agenticindiedev/ui) Components: Hero, Features, Pricing, FAQ, CTA, Testimonials, Stats, EmailCapture, Header, Footer Usage

Show help

python3 ~/.claude/skills/micro-landing-builder/scripts/scaffold.py --help

Create a new landing

python3 ~/.claude/skills/micro-landing-builder/scripts/scaffold.py \ --slug mystartup \ --name "My Startup" \ --domain "mystartup.com" \ --concept "AI-powered analytics"

With custom UI package

python3 ~/.claude/skills/micro-landing-builder/scripts/scaffold.py \ --slug mystartup \ --name "My Startup" \ --ui-package "@myorg/landing-kit"

Allow outside current directory

python3 ~/.claude/skills/micro-landing-builder/scripts/scaffold.py \ --root ~/www/landings \ --slug mystartup \ --allow-outside

Generated Structure mystartup/ ├── app.json # All content/config here ├── package.json # Depends on UI package ├── next.config.ts ├── tailwind.config.ts ├── tsconfig.json ├── vercel.json # Vercel deployment config ├── public/ │ └── (images go here) └── app/ ├── layout.tsx ├── page.tsx # Renders sections from app.json └── globals.css

app.json Config

The landing is entirely driven by app.json. See references/config-schema.md for full schema.

{ "name": "My Startup", "slug": "mystartup", "domain": "mystartup.com", "meta": { "title": "My Startup - Tagline", "description": "SEO description" }, "theme": { "primary": "#6366f1", "accent": "#f59e0b" }, "analytics": { "plausible": "mystartup.com" }, "sections": [ { "type": "hero", "headline": "...", "subheadline": "..." }, { "type": "features", "items": [...] }, { "type": "pricing", "plans": [...] }, { "type": "faq", "items": [...] }, { "type": "cta", "emailCapture": { "enabled": true } } ] }

Section Types hero - Main hero with headline, CTA buttons stats - Key metrics/numbers features - Feature grid with icons pricing - Pricing plans testimonials - Customer quotes faq - Accordion FAQ cta - Call to action with email capture Batch Creation

Create multiple landing pages from a template or CSV/JSON file:

From CSV file

python3 ~/.claude/skills/micro-landing-builder/scripts/batch_create.py \ --root ~/www/landings \ --csv projects.csv \ --allow-outside

From JSON file

python3 ~/.claude/skills/micro-landing-builder/scripts/batch_create.py \ --root ~/www/landings \ --json projects.json \ --allow-outside

Clone from existing template

python3 ~/.claude/skills/micro-landing-builder/scripts/batch_create.py \ --root ~/www/landings \ --template ~/www/landings/template-landing \ --json projects.json \ --allow-outside

CSV Format slug,name,domain,concept project1,Project One,project1.com,AI-powered analytics project2,Project Two,project2.com,Cloud infrastructure

JSON Format [ { "slug": "project1", "name": "Project One", "domain": "project1.com", "concept": "AI-powered analytics" }, { "slug": "project2", "name": "Project Two", "domain": "project2.com", "concept": "Cloud infrastructure" } ]

Deployment Single Project cd mystartup vercel

Batch Deployment with Domains

Deploy multiple projects to Vercel with custom domains:

Deploy with domain mapping

python3 ~/.claude/skills/micro-landing-builder/scripts/deploy_vercel.py \ ~/www/landings/project1 \ ~/www/landings/project2 \ --domains-json domains.json \ --prod \ --yes

Single domain

python3 ~/.claude/skills/micro-landing-builder/scripts/deploy_vercel.py \ ~/www/landings/project1 \ --domain project1.com \ --prod \ --yes

Domain Mapping JSON { "project1": "project1.com", "project2": "project2.com" }

Note: Domains must be configured in your DNS before adding to Vercel. Vercel will provide DNS records to add.

Workflow Single Landing Page Run scaffold to create landing structure Edit app.json with your content Add images to public/ Deploy with vercel or use deploy_vercel.py Multiple Landing Pages Create CSV/JSON file with project definitions Run batch_create.py to generate all landing pages Customize each app.json as needed Run deploy_vercel.py to deploy all with domains Customization

To add custom sections or override components:

Add component to app/components/ Import in app/page.tsx Add to section renderer References references/config-schema.md - Full JSON schema references/sections-reference.md - Section types and props