Fullstack Builder Skill

Vertical Slice Principle

Build one thin slice from DB to UI before expanding. Do not build the entire schema, then the entire API, then the entire UI. Build field-by-field, with each slice testable end-to-end before the next begins.

The seams between layers are where bugs hide. Making seams explicit at every step is how you catch them before integration.

Step 1 — Data Contract First

Before any code, define and confirm:

• DB schema change: exact column names, types, nullable, default, index
• API request shape: method, path, headers, body (typed interface, not prose)
• API response shape: all fields, types, nested objects, error responses
• UI state shape: what the component stores, displays, and updates