product-completeness-audit

Product Completeness Audit

Overview

A beautiful UI with hardcoded data is a demo, not a product. This skill systematically verifies that every page, every flow, and every component is functionally complete — not just visually complete.

Core principle: If a user cannot complete the intended journey from start to finish with real data, the product is NOT done. Period.

The Iron Law

NO PAGE IS COMPLETE UNTIL IT RENDERS REAL DATA, HANDLES ALL STATES, AND CONNECTS TO A WORKING BACKEND. VISUAL COMPLETENESS ≠ FUNCTIONAL COMPLETENESS.

When to Use

• After AI has "built" a product and you suspect placeholder pages
• When the frontend looks good but flows feel broken
• When you've integrated APIs but aren't sure everything is connected
• Before presenting a product to stakeholders
• When "it builds" but you don't trust it actually works
• After a major feature addition to verify nothing was broken

When NOT to Use

• For visual design review (use frontend-audit)
• For API design quality (use api-design-audit)
• For security concerns (use security-audit)

The Product Completeness Spectrum

IDENTIFY where the product sits on this spectrum:

Level 0: SKELETON    → Routes exist, pages are blank or show errors
Level 1: WIREFRAME   → Pages render but with placeholder text/images
Level 2: DEMO        → Stats/data present but hardcoded (same values on every load)
Level 3: CONNECTED   → API calls exist but may fail silently or show partial data
Level 4: FUNCTIONAL  → All data flows work but edge cases break
Level 5: COMPLETE    → Every flow works, errors are handled, edge cases covered

MOST AI-BUILT PRODUCTS ARE AT LEVEL 1-2. YOUR JOB IS TO GET THEM TO LEVEL 5.

The Process

Phase 1: Route Inventory (MAP EVERYTHING)

1. EXTRACT every route from the application:
   - Check router configuration (next.js pages/app, react-router, vue-router, etc.)
   - Check for dynamic routes ([id], :id, etc.)
   - Check for protected routes (auth required)
   - Check for nested routes

2. CREATE the Route Inventory:

   | # | Route | Page Component | Auth Required | Status |
   |---|-------|---------------|---------------|--------|
   | 1 | / | HomePage | No | 🔍 Not checked |
   | 2 | /login | LoginPage | No | 🔍 Not checked |
   | 3 | /dashboard | DashboardPage | Yes | 🔍 Not checked |
   | 4 | /users/:id | UserDetailPage | Yes | 🔍 Not checked |

3. DO NOT MISS:
   - 404 page
   - Error pages
   - Loading pages
   - Auth callback pages
   - Settings/profile pages
   - Modal routes (if using)