micro-landing-builder

Original：🇺🇸 English
Translated
3 scriptsChecked / no sensitive code detected

Scaffold, clone, and deploy config-driven NextJS landing pages that use a shared UI components package. Use this skill when creating single or multiple startup landing pages with email capture, analytics, and modern design. Supports batch creation from templates or CSV/JSON files, and automatic Vercel deployment with custom domains. Each landing is a standalone NextJS app driven by an app.json config file.

1installs
Sourceshipshitdev/library
Added on

NPX Install

npx skill4agent add shipshitdev/library micro-landing-builder

Tags

Translated version includes tags in frontmatter
nextjs-landing-pagesvercel-deploymentbatch-creationconfig-driven-developmentui-components

SKILL.md Content

View Translation Comparison →

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

  1. Run scaffold to create landing structure
  2. Edit 
    app.json
    with your content
  3. Add images to 
    public/
  4. Deploy with 
    vercel
    or use 
    deploy_vercel.py

Multiple Landing Pages

  1. Create CSV/JSON file with project definitions
  2. Run 
    batch_create.py
    to generate all landing pages
  3. Customize each 
    app.json
    as needed
  4. Run 
    deploy_vercel.py
    to deploy all with domains

Customization

To add custom sections or override components:
  1. Add component to 
    app/components/
  2. Import in 
    app/page.tsx
  3. Add to section renderer

References

  • references/config-schema.md
    - Full JSON schema
  • references/sections-reference.md
    - Section types and props