saccoai-product-builder

This skill plans and builds products by analyzing existing systems and scaffolding new ones. It handles dashboards, CRMs, ERPs, AI products, and internal tools.

The user provides: existing app URL (or description), product type, and optionally analysis depth and tech stack preferences.

Execution Model

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

• dispatching-parallel-agents for Phase 1 (extraction) and Phase 4 (building independent features)
• subagent-driven-development for complex multi-feature builds

Phase 1: Analyze Existing System

First, check if extraction output already exists:

if .saccoai/analysis/content-inventory.md exists → use it (skip re-crawling public pages)
if .saccoai/design-system/tokens.css exists → use it (skip design token extraction)
if .saccoai/product-analysis/system-overview.md exists → use it (skip product analysis)

Choose Analysis Depth

Ask the user which depth level to use:

Surface (default for simple projects):

• Screenshot each screen
• Note navigation structure and features
• Identify tech stack

Deep (for complex rebuilds):

• Everything in Surface, plus interactive exploration
• Map user journeys, forms, data relationships
• Document permissions and roles

Full (for complete reverse-engineering):

• Everything in Deep, plus technical analysis
• Infer database schema, API patterns, business logic
• Detect integrations

See references/analysis-playbook.md for the detailed playbook at each depth level.

Extraction

If the target is a public website, invoke saccoai-website-analysis and/or saccoai-design-system in parallel via superpowers dispatching-parallel-agents.

If the target is an authenticated application, use agent-browser in headful mode to interact with the UI. Ask the user for credentials if needed.

All analysis output goes to .saccoai/product-analysis/.

Phase 2: Plan

Based on the analysis, plan the new product. Use brainstorming skill principles:

• Propose 2-3 approaches with tradeoffs
• Get user confirmation before proceeding

Tech Stack Selection

Start from defaults based on product type:

Product Type	Default Stack
AI product (chatbot, copilot)	Next.js 16 + AI SDK + AI Gateway + AI Elements + shadcn/ui
Dashboard / CRM / ERP	Next.js 16 + Tailwind v4 + shadcn/ui + Drizzle ORM + PostgreSQL
Internal tool	Next.js 16 + Tailwind v4 + shadcn/ui
General	Next.js 16 + Tailwind v4 + shadcn/ui

Customize based on requirements:

• Auth: Better Auth (default), Clerk, Auth0
• Database: PostgreSQL via Drizzle ORM (default), or per user preference
• Payments: Stripe if needed
• Email: Nodemailer or Resend

Define Scope

1. List all features/pages/user roles
2. Create page/route inventory
3. Define data model (entities, relationships, fields)
4. Create component inventory (which shadcn/ui components, custom components)
5. Prioritize: MVP features vs nice-to-have

Phase 3: Scaffold

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

1. Create Next.js 16 project with TypeScript strict + Tailwind v4
2. Initialize shadcn/ui with appropriate theme:
   • If .saccoai/design-system/tokens.css exists, use extracted tokens
   • Otherwise, generate a theme matching the product type
3. Dark mode by default for dashboards, AI products, internal tools
4. Set up route groups appropriate to product type:
   • Dashboard app: (auth)/, (dashboard)/
   • Marketing + app: (marketing)/, (auth)/, (app)/
5. Set up auth if needed
6. Set up database schema if needed (Drizzle ORM)
7. Install base shadcn/ui components

Phase 4: Build

Implement features following _shared/references/build-standards.md.

Use superpowers subagent-driven-development for parallel work on independent features.

For AI Products

• AI SDK with AI Gateway (OIDC auth via vercel env pull)
• AI Elements for all AI-generated text rendering (npx ai-elements@latest)
• useChat + streamText for chat interfaces
• Agent class for multi-step reasoning
• Always <MessageResponse> for AI markdown, never raw text
• See the ai-sdk skill for current API patterns

For Dashboards / CRMs / ERPs

• shadcn/ui Table + DataTable pattern for data grids
• Sheet for mobile navigation
• Dialog for create/edit forms
• AlertDialog for destructive confirmations
• Tabs + Card + Form for settings pages
• Badge for status indicators
• Skeleton for loading states

Build Order

1. Auth flow (if needed)
2. Root layout (sidebar/nav, header)
3. Dashboard/home page
4. CRUD pages (list -> detail -> create/edit)
5. Settings
6. Edge cases (empty states, error states, loading states)

Phase 5: QA

Follow _shared/references/qa-checklist.md:

• Lighthouse, accessibility, mobile, performance
• All output to .saccoai/qa/
• Fix and re-audit until passing

Phase 6: Deploy

1. vercel link
2. Set up environment variables (vercel env add for secrets)
3. vercel env pull .env.local
4. Run database migrations if applicable
5. vercel deploy for preview
6. Verify preview
7. vercel --prod for production