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

bash

# 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.

json

{
  "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:

bash

# 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

csv

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

JSON Format

json

[
  {
    "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

bash

cd mystartup
vercel

Batch Deployment with Domains

Deploy multiple projects to Vercel with custom domains:

bash

# 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

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

micro-landing-builder

NPX Install

Tags

SKILL.md Content

Micro Landing Builder

Concept

Prerequisites

Usage

Generated Structure

app.json Config

Section Types

Batch Creation

CSV Format

JSON Format

Deployment

Single Project

Batch Deployment with Domains

Domain Mapping JSON

Workflow

Single Landing Page

Multiple Landing Pages

Customization

References