Debugging

Beginner

Add Loading/Error States

Eliminate silent failures and frozen screens: add loading, empty, and error states across the whole app.

5 steps16 verify checks30-60 minutesWorks with: emergent · chatgpt · claude · cursor

Start Guided Walkthrough

#loading #errors #empty-states #ux #polish

The Route

0/5 verified

Inventory async surfaces

List every place the app waits or can fail.

3 checks 02

Add loading states

Replace blank waits with skeletons and spinners.

3 checks 03

Add error states with retry

Failures must be visible and recoverable.

3 checks 04

Add empty states

Empty is a state, not a bug - design it.

3 checks 05

States QA sweep

Verify the app under slow, broken, and empty conditions.

4 checks

Every step ends at a Verify Gate. Do not continue until every check passes.

Context Pack

Paste this first. It briefs the AI on requirements, constraints, and the Definition of Done before your first build prompt.

Context Pack

PROJECT CONTEXT:
My app has async operations with no feedback: blank screens while loading and silent failures when things break.

GOAL:
Every async operation gets loading feedback, every list an empty state, every failure a visible recoverable error.

REQUIREMENTS:
- Inventory of all async operations and lists
- Loading indicators (skeletons/spinners) per fetch
- Empty states with helpful copy and actions
- Visible error states with retry
- Disabled controls during pending operations

CONSTRAINTS:
- Console-only errors count as failures
- Do not add fake delays to show off spinners

DEFINITION OF DONE:
- No blank screens during data loading
- No silent failures anywhere
- Every empty list explains itself and offers a next action
- Failed fetches offer retry

COMMON FAILURES TO AVOID:
- White/blank flash before data appears
- Errors caught and swallowed with empty catch blocks
- Lists that render nothing when empty
- Buttons that stay enabled and double-fire during requests

Paste this into your AI builder first. It teaches the AI what you want before you give it the build prompt.

Related routes

More Debugging flows that share ground with this one.

Debugging

Make UI Less Generic

Escape the default-AI look: define a real visual identity and apply it systematically across your app.

01Audit the generic tells

02Define the visual direction

03Apply the foundation

+2 more steps to Done

Best forbuilders who have shipped a basic app before

5 steps60-90 minutesIntermediate

Start Route Details

Debugging

Add Database Persistence

Your app forgets everything on refresh: move state into a real database with working CRUD.

01Inventory unpersisted state

02Design models and endpoints

03Wire writes to the backend

+2 more steps to Done

Best foryour first pass at this - no prior setup assumed

5 steps45-75 minutesBeginner

Start Route Details

Debugging

Fix App That Looks Good But Does Not Work

The systematic recovery flow for beautiful-but-broken AI builds: audit honestly, then fix by functional priority.

01Run a brutal functional audit

02Prioritize the fix order

03Fix the core value action

+3 more steps to Done

Best forbuilders who have shipped a basic app before

6 steps60-120 minutesIntermediate

Start Route Details