Francisco×Lovable
Lovable Skill for Non-Coders

Blank Screen Debugger

Use /blank-screen-debugger when you are blank, white, or empty preview screens. It helps Lovable diagnose empty or white screens caused by routing, runtime, auth, dependency, or component issues. The goal is to restore visible rendering safely.

In plain English

This skill helps Lovable follow a safe process for fix blank previews so non-coders can keep building without guessing the next technical step.

The problem

Diagnose empty or white screens caused by routing, runtime, auth, dependency, or component issues.

When to use it

  1. The preview loads blank
  2. A route no longer displays
  3. Auth redirects seem stuck
  4. A recent component change broke the UI

What this skill checks

  • Check routing and layout wrappers
  • Check runtime errors and imports
  • Check auth guard loops
  • Restore visibility before polish

What to avoid

  • Unrelated redesigns
  • Broad rewrites
  • Database changes without a reason
  • Hidden security risks
  • Changing working behaviour without explaining the impact

Skill instructions

Copy this into your Lovable workspace as a saved skill.

SKILL.md
# /blank-screen-debugger

Use this skill when blank, white, or empty preview screens in a Lovable project.

Before editing:
1. Explain the current problem in plain English.
2. Identify the affected feature, route, component, table, function, or integration.
3. Review recent changes where relevant.
4. Produce a short fix or implementation plan before making changes.

What to check:
- Check routing and layout wrappers.
- Check runtime errors and imports.
- Check auth guard loops.
- Restore visibility before polish.

Rules:
- Do not redesign unrelated parts of the app.
- Do not rewrite unrelated components.
- Do not change database schema unless clearly required.
- Do not expose private data or secrets.
- Prefer the smallest safe change.

Implementation:
1. Apply the smallest safe change first.
2. Keep each change narrow and testable.
3. Preserve existing working behaviour.
4. Add or recommend test scenarios.

Final output:
- Problem summary.
- Root cause or best diagnosis.
- Changes applied or recommended.
- Files, routes, tables, functions, or integrations affected.
- Risk level.
- Test checklist.
- Next recommended step.

Example prompt

Prompt
Use /blank-screen-debugger to review this issue. Do not make changes yet. First explain the diagnosis, risks, and safest next step.

Expected output

Plain-English diagnosis
Risk level
Files, routes, tables, or integrations affected
Safe fix plan
Test checklist
Next recommended step

Related skills

FAQ

Cite this skill: Opazo, F. (2026). Blank Screen Debugger. Frank Opazo Lovable Skills Library. https://www.frankopazo.com/lovable-skills/blank-screen-debugger