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:

* **M**ust Haves (v1 MVP)

* **S**hould Haves (v1.5)

* **C**ould Haves (v2.0)

* **W**on'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