saccoai-website-rebuild

This skill takes a URL and produces a fully deployed website on Vercel. It orchestrates the complete rebuild as a 7-phase pipeline, invoking saccoai-website-analysis and saccoai-design-system for extraction, then scaffolding, building, optimizing for SEO, running QA, and deploying.

The user provides: the URL of the existing site, and optionally a design direction and deployment target.

Execution Model

Single-agent hybrid. Sequential by default. Uses superpowers for parallelism where it helps:

• dispatching-parallel-agents for Phase 1 (extraction) and Phase 4 (building independent pages)
• subagent-driven-development if the plan has many independent tasks

No custom agent-team topology. The superpowers infrastructure handles coordination.

Phase 1: Extract (parallel)

Check if extraction output already exists before running:

if .saccoai/analysis/content-inventory.md exists → skip website-analysis
if .saccoai/design-system/tokens.css exists → skip design-system extraction

If extraction is needed, invoke both skills in parallel via superpowers dispatching-parallel-agents:

Task A: Website Analysis

• Invoke saccoai-website-analysis against the target URL
• Produces: .saccoai/analysis/ (site structure, content, images, typed data)

Task B: Design System Extraction

• Invoke saccoai-design-system against the target URL
• Produces: .saccoai/design-system/ (tokens, CSS, Tailwind config, screenshots)

Wait for both to complete before proceeding.

Phase 2: Plan

Read the extraction output and plan the rebuild:

1. Read .saccoai/analysis/site-structure.md — understand the page hierarchy
2. Read .saccoai/analysis/content-inventory.md — understand content per page
3. Read .saccoai/design-system/design-tokens.md — understand the visual language
4. Determine the site structure: pages, routes, components needed
5. Create a component inventory: which shadcn/ui components, which custom components
6. Map extracted content to pages
7. Identify SEO requirements: which URLs need redirects, which structured data types
8. Choose the aesthetic direction based on the extracted design tokens and the decision tree in _shared/references/build-standards.md
9. Present the plan to the user for approval before proceeding

Phase 3: Scaffold

Set up the Next.js project following the architecture in _shared/references/build-standards.md:

1. Create Next.js 16 project with TypeScript strict + Tailwind v4
2. Initialize shadcn/ui
3. Copy .saccoai/design-system/tokens.css @theme block into src/app/globals.css
4. Set up Geist Sans + Geist Mono via next/font
5. Enable dark mode (CSS variables + dark: variants)
6. Create route group structure: (marketing)/ for public pages
7. Copy .saccoai/analysis/data/*.ts into src/data/
8. Copy .saccoai/analysis/images/ into public/images/
9. Set up shared layout components (header, footer, navigation) using .saccoai/analysis/data/navigation.ts

Phase 4: Build

Implement pages using extracted content and design tokens.

Follow the design standards in _shared/references/build-standards.md:

• Mobile-first responsive (390px first)
• WCAG AA accessibility
• Performance budget (<50KB per component, <200KB total)
• Dark mode from the start

Page implementation order:

1. Root layout (header, footer, navigation)
2. Homepage
3. Content pages (about, services, etc.)
4. Complex pages (blog listing, case studies grid)
5. Detail pages (blog posts, case study detail)

For sites with many pages, use superpowers dispatching-parallel-agents to implement independent pages in parallel.

For each page:

1. Build mobile-first at 390px
2. Add responsive breakpoints going up
3. Use extracted content from src/data/
4. Use extracted images from public/images/
5. Add animations matching the chosen aesthetic tier
6. Test at 390px, 768px, 1280px

Phase 5: SEO

Follow the SEO checklist in _shared/references/seo-checklist.md:

1. Generate redirect map from .saccoai/analysis/site-structure.md (old URLs to new URLs)
2. Add redirects to next.config.ts (301 permanent, no chains, no loops)
3. Preserve metadata per page: title, description, canonical, OG tags, Twitter cards
4. Add structured data (JSON-LD): Organization, BreadcrumbList, Article, LocalBusiness as appropriate
5. Generate app/sitemap.ts with all new pages
6. Generate app/robots.ts

Phase 6: QA

Follow the QA checklist in _shared/references/qa-checklist.md:

1. Lighthouse audit on every page (target: perf >= 90, a11y >= 95, BP >= 90, SEO >= 95)
2. axe-core accessibility scan on every page
3. Keyboard navigation test
4. Mobile responsiveness at 390x844
5. Cross-browser screenshots (Chromium + Firefox at 390px and 1280px)
6. Core Web Vitals check (LCP < 2.5s, CLS < 0.1, INP < 200ms)

All QA output goes to .saccoai/qa/.

If issues are found:

1. Fix the issues
2. Re-run the failing audits
3. Repeat until all checks pass

Phase 7: Deploy

1. vercel link (or use existing project)
2. vercel env pull for any needed env vars
3. vercel deploy for preview deployment
4. Verify the preview URL (visual check + SEO validation from Phase 5 Step 6)
5. If everything looks good, vercel --prod for production

Output Summary

After the pipeline completes, summarize:

## Rebuild Complete

**Original site**: {url}
**New site**: {vercel-url}
**Pages**: {count}
**Lighthouse**: Perf {score} / A11y {score} / BP {score} / SEO {score}
**Redirects**: {count} configured, all validated
**Structured data**: {types} implemented
**Design direction**: {direction}