# Local Business Rebuild > Build a stunning new website for a local business prospect. Adapted from the full website-rebuild skill but optimized for speculative local business pitches. 10-phase process: brand extraction, SEO audit, design audit, rebuild plan, full build with design system, copy optimization, combined QA, pre-deploy checklist, and output to monorepo. Uses scraped content from prospect-scrape as input. No tools/calculator research phase. Single combined QA round. Triggers on: "rebuild prospect", "local business rebuild", "build prospect site", "rebuild their site", "prospect rebuild", or any request to build a new website for a qualified prospect. - Skill: `lotfb86/local-business-rebuild` (Agent Skill, multi-file: 3 files) - Install (CLI): `npx skillmds@latest add lotfb86/local-business-rebuild` - Raw SKILL.md: https://api.skillmd.com/api/skills/lotfb86/local-business-rebuild/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Marketing & Growth - Author: lotfb86 (https://skillmd.com/u/lotfb86) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/lotfb86/local-business-rebuild --- # Local Business Website Rebuild Build a world-class website for a local business prospect using their scraped content and branding. This is the core value delivery — the rebuilt site must be so dramatically better than their current one that the business owner immediately sees the value. ## How This Skill Works This is an adapted version of the full `/website-rebuild` skill, streamlined for speculative local business pitches: - **Removed:** Phases 11a/11b (Competitive Tools Research & Build), Phase 12 (Tools QA) - **Consolidated:** 3 QA rounds → 1 combined QA round - **Kept full depth:** Rebuild plan, copy optimization, all design rules, accessibility - **Output location:** `~/prospect-pipeline/sites//` (monorepo structure) ## Input Read from `~/prospect-pipeline/prospects//`: - `info.json` — business details, category, contact info - `audit-report.md` — what's wrong with their current site - `original-site/content-inventory.json` — all scraped content - `original-site/assets/` — logo, images, etc. ## Tech Stack — Exact. Do Not Deviate. **Framework:** Astro 5.x — static site generator, zero JavaScript by default, perfect for SEO. **Styling:** Tailwind CSS v4 (via Vite plugin) **Images:** Astro `` component from `astro:assets` (built-in optimization, WebP/AVIF) **SEO:** `@astrojs/sitemap` integration + manual JSON-LD **View Transitions:** Astro View Transitions (built-in, zero JS page transitions) **Package Manager:** npm (not pnpm, not yarn — npm only) ### Initialization — Run These Exact Commands ```bash cd ~/prospect-pipeline/sites/ npm create astro@latest -- --template minimal --no-install cd npm install npx astro add tailwind --yes npx astro add sitemap --yes npm install -D prettier ``` That's it. The project is ready. Do not add React, do not add any other integrations unless the build specifically requires interactivity (rare for a local business site). ### If Something Fails During Build Fix the code. Do NOT: - Switch Node versions - Switch package managers - Reinstall the framework - Add React or any other UI framework - Change the project structure If `npm create astro` fails, check that Node.js is available and try again. If it fails twice, report the error — do not try alternative frameworks. ### Astro File Structure ``` src/ layouts/ BaseLayout.astro ← shared HTML shell, , nav, footer pages/ index.astro ← homepage about.astro ← about page services.astro ← services page contact.astro ← contact page 404.astro ← custom 404 components/ Header.astro ← navigation Footer.astro ← footer Hero.astro ← hero section (reusable) ... ← section components as needed styles/ global.css ← @import "tailwindcss"; + CSS custom properties public/ images/ ← all downloaded images go here favicon.svg ← favicon ``` ### Astro Basics for This Build `.astro` files have a frontmatter script fence (`---`) at the top and HTML-like template below: ```astro --- import { Image } from 'astro:assets'; import BaseLayout from '../layouts/BaseLayout.astro'; import heroImage from '../assets/images/hero.jpg'; ---

``` Key differences from React/Next.js: - No JSX — it's HTML. Use `class=` not `className=`. Use `for=` not `htmlFor=`. - No `useState`, no `useEffect`, no client-side state. The page is static HTML. - Images: Import from `src/assets/images/` for optimization, or reference `public/images/` for unoptimized static files. - CSS custom properties go in `src/styles/global.css` and are available everywhere. - View Transitions: Add `` to the `` in BaseLayout for smooth page transitions — zero JavaScript. ### Google Fonts Load via `` tags in the BaseLayout ``, or use `@fontsource` packages: ```bash npm install @fontsource-variable/playfair-display @fontsource/dm-sans ``` Then import in your layout's frontmatter: ```astro --- import '@fontsource-variable/playfair-display'; import '@fontsource/dm-sans'; --- ``` ## Design Philosophy — MAKE IT UNFORGETTABLE **The AI Slop Test:** Before you ship, ask yourself: "If someone saw this site and was told 'AI made this,' would they believe it immediately?" If yes, you have failed. Redesign until that answer is no. Read the [design-rules.md](references/design-rules.md) for full specification. Below are NON-NEGOTIABLE rules with specific alternatives. ### Pre-Code Design Commitment (Phase 4.5 — MANDATORY) Before writing ANY code, you must describe in plain English: 1. **Aesthetic direction** — Pick ONE: dark/moody editorial, warm/organic handcrafted, clean/luxury minimal, bold/industrial, retro-modern, or something unique to this business. Commit to it. 2. **For each homepage section** — describe: layout structure (NOT "3-column grid"), column ratios, visual devices (overlap? angle? texture? full-bleed?), and how it differs from the section above it. 3. **The "wow" moment** — every great site has one thing that makes you stop scrolling. What is it for this site? (parallax hero? animated counter? overlapping testimonial cards? a diagonal section break?) Write this into `REBUILD_PLAN.md` before touching any `.astro` file. ### Typography - Beautiful, unique fonts from Google Fonts or @fontsource - **BANNED:** Inter, Roboto, Arial, Helvetica, system fonts, Space Grotesk, Lato, Open Sans, Source Sans Pro - **INSTEAD:** Distinctive display font + refined body font. Fraunces, Playfair Display, Clash Display, Cabinet Grotesk, General Sans, Satoshi, Plus Jakarta Sans. - Use the FULL typographic range: hero headings should be 56-80px+ (clamp for fluid), extreme weight contrast (300 vs 800, not 400 vs 600) - Body minimum 16px, line-height 1.5-1.65 - `text-wrap: balance` on headings, `font-variant-numeric: tabular-nums` on numbers ### Color - CSS custom properties for every color value in `global.css` - 1-2 dominant colors + 1 sharp accent derived from their logo/branding - **BANNED:** purple gradients on white, generic blue corporate, rainbow with no hierarchy, pure black (#000), pure white (#fff) as main backgrounds, cyan-on-dark "developer aesthetic", gradient text - **INSTEAD:** Tint your neutrals toward the brand hue. Use `oklch()` or warm grays. Off-white backgrounds (like `#faf9f6`), near-black text (like `#1a1a2e`). Bold saturated accents that pop. - Every combination must pass WCAG AA contrast (4.5:1 for body text, 3:1 for large text) ### Motion & Animation - CSS animations and transitions only — no JavaScript animation libraries - **BANNED:** bounce/elastic easing, `transition: all`, animating width/height/margins (layout thrashing), identical fadeInUp on every section - **INSTEAD:** Exponential easing (`cubic-bezier(0.16, 1, 0.3, 1)` for ease-out-expo). Staggered reveals with `animation-delay`. One orchestrated page-load sequence. `transform` and `opacity` only (60fps). - **MINIMUM 3 distinct animation types per site** — don't just use fadeInUp everywhere. Examples: slide-in-from-left, scale-reveal, clip-path-wipe, counter-count-up, text-split-reveal, parallax-subtle - Scroll-triggered reveals required on at least 2 sections (use Intersection Observer with a small `