1. IDENTIFY → What's wrong? (Expected vs Actual)
2. DIAGNOSE → Why did it happen? (Root cause)
3. FIX → Write clear prompt to resolve
4. TEST → Verify it works
5. LEARN → Remember for next timeForm validation is not preventing empty submissions.
Required fields:
- [FIELD_1]: cannot be empty
- [FIELD_2]: must be valid email
- [FIELD_3]: minimum 2 characters
Fix validation:
1. Check each required field on submit
2. If any invalid: show errors, prevent submit
3. Display error below each field in red
4. Error messages:
- "[Field] is required"
- "[Field] must be valid email"
5. Clear error when user fixes input
6. Disable submit button until all fields valid
Test: Try submitting empty form, should see errorsValidation rules:
- [FIELD]: [RULE]
- Show errors below fields
- Prevent submit if invalid
- Disable button until validData not persisting in local storage.
Fix needed:
1. When saving:
- Use key: "[YOUR_KEY]"
- Format: JSON.stringify(dataArray)
- Verify save: localStorage.getItem('key')
- Log: "Saved: " + data
2. When loading:
- Use same key: "[YOUR_KEY]"
- Parse: JSON.parse(storedData)
- Handle null: use []
- Log: "Loaded: " + data
3. Ensure:
- Save happens BEFORE any navigation
- Load happens AFTER page loads
- Keys match exactly
Test: Add item, refresh, item should remainData not persisting in Supabase.
Debug:
1. Check connection is successful
2. Verify table name is correct
3. Log save operation:
- "Saving to Supabase: " + data
- "Response: " + JSON.stringify(result)
4. Check Supabase dashboard for new row
Fix:
1. Verify credentials (URL and key)
2. Check RLS policies allow insert
3. Ensure column names match exactly
4. Handle errors and display to user
Test: Add item, check Supabase dashboardList is empty but data exists in [STORAGE].
Debug and fix:
1. Verify data exists:
- Check [storage] directly
- Log: "Data in storage: " + JSON.stringify(data)
2. Check fetch operation:
- Log: "Fetching data..."
- Log result: "Fetched X items"
- Verify fetch completes
3. Check display logic:
- Log before rendering: "Rendering X items"
- Verify items array is passed to display
- Check template/mapping is correct
4. Verify data structure:
- Log first item: data[0]
- Check field names match
- Ensure data is array, not object
5. Add proper loading states:
- Show "Loading..." while fetching
- Show "No items yet" if truly empty
- Show error if fetch fails
Show me all console logs.1. Verify credentials:
- URL format: https://xxxxx.supabase.co
- Key format: starts with eyJ
- No extra spaces
2. Check Supabase dashboard:
- Is project active?
- Is table created?
- Do RLS policies exist?
3. Test in browser:
- Open Network tab
- Try connection
- Check request/responseSupabase connection is failing.
Error: [PASTE ERROR MESSAGE]
Fix needed:
1. Verify credentials:
- URL: [YOUR_URL]
- Key: [FIRST_10_CHARS]...
- Both are correct format
2. Test connection:
- Try simple query: fetch 1 record
- Log full error if fails
- Check browser console for CORS
3. Verify RLS policies:
- Check policies allow public access
- Or implement authentication
4. Show clear error to user:
- "Cannot connect to database"
- "Check internet connection"
- Provide retry button
Log all connection attempts.ESCALATE TO: - IT team (if corporate network) - Check Supabase status page - Review Supabase docs - Ask in workshop forum
Layout issues on [SCREEN]:
Problems:
- [SPECIFIC_ISSUE_1]
- [SPECIFIC_ISSUE_2]
Fix layout:
1. Ensure responsive design:
- Use flexible widths (%, not px)
- Test on mobile (375px width)
- Test on tablet (768px)
- Test on desktop (1024px+)
2. Fix spacing:
- Add padding inside containers: 16px
- Add margins between elements: 12px
- Ensure nothing touches edges
3. Fix specific issues:
- [ISSUE_1]: [SOLUTION]
- [ISSUE_2]: [SOLUTION]
4. Ensure touch targets:
- Buttons minimum 44x44px
- Tappable areas large enough
- Proper spacing between tap targets
Test on actual mobile device if possible.Loading indicator never disappears.
Fix needed:
1. Ensure loading state managed properly:
- Set loading = true at START
- Set loading = false at END
- Set loading = false on ERROR too!
2. Use try-finally pattern:
try {
setLoading(true)
// fetch data
await fetchData()
// display data
} catch (error) {
console.log("Error:", error)
showError(error)
} finally {
// ALWAYS runs, even if error
setLoading(false)
}
3. Add timeout safety:
- If loading > 30 seconds, hide spinner
- Show "Taking longer than expected"
- Provide cancel/retry option
4. Log loading state changes:
- "Loading started"
- "Loading completed"
- "Loading state: " + isLoading
Test: Trigger action, verify spinner disappearsDelete function not removing items.
Expected:
- Click delete → confirm → item removed
Current:
- Click delete → confirm → item stays
Fix needed:
1. Verify delete operation:
- Log: "Deleting item with ID: " + id
- For local storage: remove from array, save back
- For Supabase: .delete().eq('id', id)
- Log result
2. Update display immediately:
- Remove item from displayed list
- Don't wait for reload
- Update count
3. Handle errors:
- If delete fails, show error
- Keep item in list if error
- Log error details
4. Verify storage after delete:
- Check item actually removed
- Refresh list from storage
Test: Delete item, check storage/databaseField validation not working for [FIELD].
Rule: [VALIDATION_RULE]
Example invalid: [EXAMPLE]
Should show: [ERROR_MESSAGE]
Fix validation:
1. Implement check:
- For email: use email regex or built-in validation
- For required: check field not empty
- For length: check string.length
- For format: use regex pattern
2. Show error clearly:
- Display below field
- Red color
- Clear message
- Specific to error type
3. Clear error when fixed:
- When user starts typing
- Or when field becomes valid
4. Prevent submit if invalid:
- Check all validations
- Disable submit button
- Show which fields are invalid
Test with invalid data, should see errorI'm stuck with [FEATURE]. Let's start fresh.
Goal: [WHAT_I_WANT]
Current situation:
- [WHAT_EXISTS_NOW]
What works:
- [WORKING_FEATURES]
What doesn't work:
- [SPECIFIC_PROBLEMS]
Please provide step-by-step plan to:
1. Fix current issues
2. Achieve my goal
3. Test it worksLet's simplify [FEATURE] to most basic version:
Just need:
- [CORE_REQUIREMENT_1]
- [CORE_REQUIREMENT_2]
Remove all extra features for now.
Once basic version works, we'll add features back one by one.Before asking for help, check:
Basic Checks: - [ ] Browser console open (F12) - [ ] Any error messages in red? - [ ] What’s the exact error text?
Data Checks: - [ ] Does data exist in storage? - [ ] Is data in correct format? - [ ] Are field names spelled correctly?
Connection Checks: - [ ] Internet connection working? - [ ] Supabase project active? - [ ] Credentials correct?
Code Checks: - [ ] Did recent change break it? - [ ] Worked before, what changed? - [ ] Can I undo last change?
Prompt Checks: - [ ] Was I specific enough? - [ ] Did I include error handling? - [ ] Did I test edge cases?
Debug this issue:
Feature: [WHAT_FEATURE]
Problem: [WHAT'S_WRONG]
Expected: [WHAT_SHOULD_HAPPEN]
Actual: [WHAT_HAPPENS]
Add extensive logging:
1. Log when function starts
2. Log all input parameters
3. Log each step of process
4. Log final result
5. Log any errors with full details
Show all logs in console.
Tell me what you find.Debug [STORAGE] connection:
Add connection test:
1. Try to connect
2. Log connection status
3. Try simple operation (fetch 1 record)
4. Log operation result
5. Log full error if fails
Show:
- Connection URL (mask sensitive parts)
- First 10 chars of key
- Test result
- Any error details
Tell me results of each step.Meaning: Trying to access property of null/undefined Fix: Check if data exists before accessing
Change: data.name
To: data?.name OR (data && data.name)Meaning: Can’t reach the server Fix: Check internet, verify URL, check CORS
Meaning: Endpoint or resource doesn’t exist Fix: Check URL spelling, verify table name
Meaning: Trying to insert duplicate unique value Fix: Check for existing record first, use update instead
1. Error Handling
Handle errors:
- Catch all errors
- Show user-friendly message
- Log technical details
- Provide retry option2. Loading States
Show loading indicators:
- While fetching data
- While saving
- While processing
- Disable interactions during3. User Feedback
Provide feedback:
- Success messages
- Error messages
- Confirmation dialogs
- Progress indicators4. Validation
Validate inputs:
- Check required fields
- Validate formats
- Show errors clearly
- Prevent bad data5. Logging
Add console logs:
- Function starts
- Key operations
- Errors
- ResultsDocument It:
Problem: [WHAT_WAS_WRONG]
Cause: [WHY_IT_HAPPENED]
Solution: [HOW_I_FIXED_IT]
Lesson: [WHAT_I_LEARNED]Update Your Prompt Library: Save prompts that worked well for future use
Share with Community: Help others avoid same issue
Try First (3 attempts): - Rewrite prompt more clearly - Simplify to basic version - Check troubleshooting guide
Escalate If: - Same error after 3 tries - Completely stuck - Critical issue blocking progress - Security concern
What to Include: - Exact error message - What you tried - Screenshots - Steps to reproduce
🎯 Most issues are communication issues 🔧 Better prompts = fewer problems 📝 Always log for debugging 🔄 Iteration is normal 💪 You can fix this!
Keep this handy for quick reference!
Version 1.0 | eMOBIQ AI Workshop Materials © Orangekloud Technology Inc.