Production Product Builder

An autonomous Codex and Claude workflow for turning a product prompt—or an unfinished repository—into the fullest safe, working, measurable implementation the scope allows.

The skill coordinates product strategy, UX/UI, full-stack engineering, AI features, ethical growth loops, security, accessibility, SEO/AEO, testing, infrastructure, operations, and documentation. It is designed to produce actual repository changes and verification evidence instead of stopping at a plan, mockup, or disconnected code snippets.

The skill cannot guarantee that a product will “go viral.” It can design and instrument value-driven distribution loops, measure where they succeed or fail, and prevent common spam, privacy, fraud, and dark-pattern failure modes.

Table of contents

1. What this skill does
2. How it works
3. System architecture
4. Capabilities
5. Ethical growth system
6. AI product engineering
7. Installation
8. Usage
9. Bundled tools
10. Repository structure
11. Verification
12. Safety and authorization
13. Customization
14. Troubleshooting
15. Known limitations
16. Contributing

What this skill does

Use Production Product Builder when you want an agent to build, upgrade, rescue, or prepare a digital product for release. It supports:

• SaaS applications and dashboards;
• AI assistants, agents, RAG systems, voice products, and model-backed workflows;
• marketplaces, ecommerce, subscriptions, payments, and account portals;
• developer tools, APIs, integrations, internal tools, and automation;
• landing sites, public product websites, SEO/AEO content, and launch experiences;
• mobile-backed APIs and responsive web applications;
• premium motion, Lottie, Rive, WebGL, Three.js, Spline, and GLB/glTF experiences;
• conversion, activation, retention, collaboration, referral, sharing, template, embed, integration, and user-generated-content loops;
• prototype-to-production upgrades, security hardening, performance work, accessibility remediation, and release verification.

It also ships a specialist premium microsite track for content-led sites with no application backend — brand, practitioner and clinic, studio, portfolio, restaurant, venue, product launch, event, and campaign sites. That track swaps the backend half of the contract for a queryable design-and-content knowledge base, a build-brief generator, and a release gate tuned to prerendering, motion, WebGL, structured data, and truthful claims. See references/premium-microsite-playbook.md.

The distinctive frontend track adds reference-led composition, professional color and typography, UI library selection, and purposeful animation for both sites and applications. It draws on public MotionSites/Awwwards references and official Material UI, Motion, GSAP, and component-library documentation. Start with frontend art direction, library selection, motion engineering, or the prompt workbench. Research records are dated and distinguish public documentation from unobserved live motion or gated content.

The skill follows five product priorities:

1. Trust and correctness
2. Core user value
3. Activation and retention
4. Distribution and discoverability
5. Visual polish and delight

This ordering prevents growth mechanics or decorative complexity from weakening the product’s essential journey.

How it works

The agent begins with repository evidence, converts the request into an outcome contract, implements dependency-ordered vertical slices, and repeatedly verifies the result.

For a new build or stack change, it first asks which frontend framework you want and, when a backend is needed, which backend language you prefer. If backend scope is unclear, it asks whether you want one. Already supplied choices are reused; routine edits retain the existing stack. You can say “recommend for me” to delegate selection. Otherwise, it waits before stack-dependent implementation while continuing independent discovery. See the stack preference intake.

flowchart TD
    A[Product prompt or existing repository] --> B[Load repository instructions]
    B --> C[Audit stack, routes, data, auth, tests, CI and working tree]
    C --> D[Define users, value event, journeys and acceptance criteria]
    D --> E[Create dependency-ordered implementation plan]
    E --> F[Architecture, schema, contracts and security boundaries]
    F --> G[Design system, content and interaction states]
    G --> H[Build primary journey end to end]
    H --> I{Specialized scope?}
    I -->|AI or agents| J[Load AI product playbook]
    I -->|Growth or launch| K[Load ethical growth playbook]
    I -->|Tools or services| L[Load tool routing and source catalog]
    I -->|No| M[Build secondary journeys and integrations]
    J --> M
    K --> M
    L --> M
    M --> N[Run focused tests and browser checks]
    N --> O{Causal defect found?}
    O -->|Yes| P[Fix root cause]
    P --> N
    O -->|No| Q[Run project-wide quality gate]
    Q --> R{Required gate passed?}
    R -->|No| S[Fix or document exact blocker]
    S --> Q
    R -->|Yes| T[Update documentation and release evidence]
    T --> U[Concise handoff with commands, results and risks]

Outcome contract

Before large implementation work, the agent defines:

• target users, problem, promise, primary action, and value event;
• activation event, return trigger, and measurable success signals;
• routes, roles, permissions, data,