Claude Skill

Marketing Site Scaffolder

Scaffolds a multi-page marketing site (Home, About, Pricing, Blog, Contact) with consistent layout.

Download skill (.zip)Or download whole pack

What it does

Produces a multi-page marketing site scaffold: shared Nav, Footer, Layout component, and page templates for Home, About, Pricing, Blog index + post, Contact, and a 404. Defaults to Astro (best for marketing) or Next.js App Router. Responsive, accessible, fast (no client JS where unneeded).

When to use

✓Starting a new company or product marketing site from scratch
✓Migrating off a CMS (Webflow, Squarespace) to a code-owned site
✓Existing site is page-by-page inconsistent and you want to consolidate

When not to use

✗Single landing page — use the landing-page-builder
✗You need a CMS-driven site for non-technical editors — use Webflow / Sanity / Contentful
✗It's really an app, not a marketing site — different stack (Next.js full app, not Astro)

Install

Download the .zip, then unzip into your Claude skills folder.

mkdir -p ~/.claude/skills
unzip ~/Downloads/marketing-site-scaffolder.zip -d ~/.claude/skills/

# Restart Claude Code session.
# Skill is now available — Claude will use it when relevant.

SKILL.md

---
name: marketing-site-scaffolder
description: Use when scaffolding a multi-page marketing site (Home, About, Pricing, Blog, Contact). Triggers on "build a marketing site", "scaffold website", "multi-page site", "company website".
---

# Marketing Site Scaffolder

Scaffold a fast, consistent, content-friendly multi-page marketing site. Most marketing sites get worse over time because each page is built bespoke. Solve that with a real shared layout.

## Required inputs

1. **Brand** — name, tagline, primary color (hex), logo
2. **Pages needed** — minimum: Home, About, Pricing, Contact. Common adds: Product/Features, Blog, Customers, Careers, Docs.
3. **Tech preference** — Astro (recommended for marketing — ships zero JS by default), Next.js App Router (if you'll build app + marketing in one repo), or vanilla HTML.
4. **CMS** — none (markdown files), Sanity, Contentful, Notion, or local MDX
5. **SEO basics** — title pattern, meta description per page, OG image strategy

## Output format

**Default: Astro project**

```
src/
  layouts/
    BaseLayout.astro     // <html>, <head>, nav, footer
    BlogLayout.astro     // BaseLayout + article shell
  components/
    Nav.astro
    Footer.astro
    Button.astro
    Card.astro
    SEO.astro
  pages/
    index.astro
    about.astro
    pricing.astro
    contact.astro
    blog/
      index.astro
      [...slug].astro
    404.astro
  content/
    blog/
      *.mdx
public/
  favicon.svg
  og-default.png
```

For Next.js App Router: same structure with `app/` folder, `layout.tsx` shared, `page.tsx` per route.

## Per-page structure

### Home
Hero → trust band (logos / metric) → 3 features → product deep-dive (one or two) → testimonial → final CTA. Aggressive — this is the most-trafficked page.

### About
Mission (1 paragraph) → team (photos optional) → values or principles → press/funding (if relevant) → "we're hiring" link.

### Pricing
3-tier card layout, feature comparison table below, FAQ at bottom. Use the `pricing-page-builder` skill for the meat.

### Blog index
Reverse-chrono list of posts. Each card: title, date, excerpt (max 2 lines), 1-2 tags, author. Pagination at 10-15 posts.

### Blog post
Use the `blog-template-builder` skill.

### Contact
Email link, optional form, business address (if relevant), response time expectation. Don't build a contact form unless someone will respond within 24h.

### 404
Brand-consistent. "Page not found" + link home + 3 popular pages. Don't be cute at the expense of useful.

## Shared elements

### Nav
- Logo (left) → 3-5 links (center or right) → primary CTA (right). Sticky with `backdrop-blur` on scroll.
- Mobile: hamburger to disclosure, full viewport, links + CTA + footer links

### Footer
- 3-4 columns: Product / Company / Resources / Legal
- Newsletter signup (if you have one — don't fake it)
- Copyright line + social icons + legal links

### Layout shell
- `<html lang="en">`, `<meta name="viewport">`, theme-color, OG defaults
- Skip-to-content link (`<a href="#main" class="sr-only focus:not-sr-only">Skip to content</a>`)
- `<main id="main">` wrapping page content

## SEO

- `<title>` pattern: `{Page} – {Brand}` (e.g., "Pricing – Linear")
- Meta description per page (no auto-truncation; write 150-160 chars)
- Canonical URL on every page
- OG image: 1200x630, generated per page if you have a template (use the `og-image-generator` skill)
- `sitemap.xml` (Astro and Next plugins generate this)
- `robots.txt` allowing all by default

## Performance

- No client JS unless interactive (Astro default is zero JS; Next.js use `'use server'` / RSC)
- Images: `<Image>` component with explicit width/height, AVIF/WebP, lazy loading below the fold
- Fonts: subset, preload critical font, `font-display: swap`
- Aim for LCP < 2.5s on 4G

## Accessibility

- Skip-to-content link
- Semantic structure: `<header>`, `<nav>`, `<main>`, `<footer>`, `<article>` for blog posts
- Heading hierarchy: one `<h1>` per page (the page title, not the brand name)
- Alt text on every image (or `alt=""` if decorative)
- Color contrast at WCAG AA minimum
- Test with keyboard only and a screen reader before launch

## Anti-patterns

- **Carousels on the home page**: nobody clicks past slide 1. Pick the best message and commit.
- **Auto-playing video hero with sound**: hostile.
- **Inconsistent nav between pages**: a sign of bespoke page building. Use a single Layout component.
- **Per-page CSS that overrides shared styles**: tokens and shared components.
- **404 page that breaks the brand**: it's part of the site. Treat it like one.
- **Footer with 40 links**: prune. Hierarchy first.

## Output

Return the file structure + key shared files (BaseLayout, Nav, Footer, SEO component) + one full page (index.astro). Stub the rest with TODOs. Top comment per file says what it does.

Example prompts

Once installed, try these prompts in Claude:

Scaffold a marketing site for a B2B SaaS. Pages: Home, Product, Pricing, About, Blog, Contact. Astro + Tailwind. MDX for blog.
Build a Next.js App Router scaffold with Home, Features, Pricing, Docs, Blog, About. Shared layout, dark mode toggle.