End To End App Development

2.1.1 End To End App Development

This skill is the overarching "Operating System" for all software creation. When tasked with building an entire application (web, mobile, or PWA) from scratch, you must execute these 8 sequential phases. Do not write code until Phase 5.

Phase 1: Ideation & Market Validation

Goal: Define exactly what we are building and why.

• The Problem Statement: What specific pain point does this app solve?
• Target Audience: Who is the user? Provide 1-2 user personas.
• Core Differentiator: Why is this better than existing solutions?
• Relevant Skills to Invoke: simple-brainstorm, 14_growth_and_strategy

Phase 2: Product Requirements Document (PRD)

Goal: Lock in the scope to prevent feature creep.

• User Stories: "As a [user], I want to [action] so that [benefit]."
• MoSCoW Prioritization: Strictly define:
  • Must Haves (v1 MVP)
  • Should Haves (v1.5)
  • Could Haves (v2.0)
  • Won't Haves (Out of scope)
• Success Metrics: Define what constitutes a successful launch (e.g., 100 DAUs, <2s load time).

Phase 3: Research Document (RD) & Technical Architecture

Goal: Eliminate unknowns before writing code.

• System Architecture: Is this client-side only? Does it need a realtime database?
• API & Integration Research: List required third-party services (e.g., Stripe, Sendgrid, OpenAI). Read their documentation to confirm feasibility.
• Data Flow Diagram: Document how data moves from the client to the server and back.
• Relevant Skills to Invoke: 07_firebase_baas, 37_supabase_skills, 21_backend_api_bundle

Phase 4: UI/​UX Design System

Goal: Establish premium aesthetics and component hierarchy.

• Design Tokens: Define the primary/​secondary HSL colors, typography (e.g., Google Inter), and spacing grid (8pt system).
• Component Hierarchy: List the reusable components (e.g., <Button>, <Navbar>, <Card>).
• UX Flows: Map out the exact step-by-step screen transitions for the critical path (e.g., Sign Up -> Dashboard -> Output).
• Relevant Skills to Invoke: 04_web_dev_design_systems, 39_web_design_guidelines

Phase 5: Tech Stack Selection & Project Scaffolding

Goal: Prepare the blank canvas.

• Stack Declaration: Explicitly state the frontend (e.g., React/​Vite/​Next.js), styling engine (TailwindCSS v4), and mobile wrapper (Capacitor).
• Initialization: Run the scaffolding commands (e.g., npx -y create-vite).
• Folder Structure: Generate standard folders src/​components, src/​hooks, src/​lib, etc.
• Relevant Skills to Invoke: 05_pwa_offline_first, 09_project_scaffolding, 32_vercel_react_best_practices

Phase 6: Dependency Structure & Data Modeling

Goal: Install tools and define the shape of the data.

• Dependencies: npm install core tools like lucide-react, routing libraries, and state managers (Zustand/​Context).
• Database Schema: Write the exact schema definition (SQL tables or NoSQL document structures). Define indexes and Row Level Security (RLS).
• Type Definitions: Establish TypeScript interfaces or JSDoc types for all major data models.

Phase 7: Iterative Execution & Build

Goal: Build the app systematically.

• Plan-Act-Verify: Never write raw files blindly. Write the core engine first, verify it runs. Write the UI next, verify it renders.
• Component-Driven Development: Build from the inside out. Construct isolated components before assembling complete pages.
• Relevant Skills to Invoke: 31_antigravity_superpowers (for strict verification loops), 20_web_frontend_bundle

Phase 8: QA, Security & Deployment

Goal: Ensure the app is production-grade.

• Security Audit: Check for exposed API keys, hardcoded secrets, and prevent basic XSS/​SQLi vectors.
• Automated Testing: Run E2E paths to ensure the critical flows work.
• Final Commit & Deploy: Format commits using conventional standards and deploy to Vercel/​Netlify.
• Relevant Skills to Invoke: 33_trail_of_bits_security, 35_webapp_testing_playwright, 43_git_commit_formatter