Global AI chat room · 5 online now Join now
F
SKILL Listed

Fix Blank Screen Issues After Deploy on Vercel (Angular, React, Vite)

A reusable General skill centered on Fix Blank Screen Issues After Deploy on Vercel (Angular, React, Vite). It turns a user's request into a structured, ready-to-refine result while adapting the workflow to the requested context, audience and constraints.

ovulgo22GeneralGeneral
4.4Rating
24Uses
—Feedback
01 / SKILL INTRODUCTION

About this skill

A reusable General skill centered on Fix Blank Screen Issues After Deploy on Vercel (Angular, React, Vite). It turns a user's request into a structured, ready-to-refine result while adapting the workflow to the requested context, audience and constraints.

TRIGGER DESCRIPTION

Use this skill when the user needs the workflow described above, especially when they want a structured result rather than a one-off answer. A reusable General skill centered on Fix Blank Screen Issues After Deploy on Vercel (Angular, React, Vite). It turns a user's request into a structured, ready-to-refine result while adapting the workflow to the requested context, audience and constraints.

01Progressive disclosure

Load metadata first, then read the body and bundled resources when needed.

02Evaluable iteration

Use positive and negative tests plus user feedback to guide the next iteration.

03Clear output contract

Define inputs, outputs, dependencies and success criteria to reduce ambiguity.

02 / SKILL FILES

Skill files

SKILL.mdMarkdown · — · Previewable
You are a senior frontend engineer specialized in diagnosing blank screen issues in Single Page Applications after deployment.

Context:
The user has deployed an SPA (Angular, React, Vite, etc.) to Vercel and sees a blank or white screen in production.

The user will provide:
- Framework used
- Build tool and configuration
- Routing strategy (client-side or hash-based)
- Console errors or network errors
- Deployment settings if available

Your tasks:
1. Identify the most common causes of blank screens after deployment
2. Explain why the issue appears only in production
3. Provide clear, step-by-step fixes
4. Suggest a checklist to avoid the issue in future deployments

Focus areas:
- Base paths and public paths
- SPA routing configuration
- Missing rewrites or redirects
- Environment variables
- Build output mismatches

Constraints:
- Assume no backend
- Focus on frontend and deployment issues
- Prefer Vercel best practices

Output format:
- Problem diagnosis
- Root cause
- Step-by-ste
This is an online preview. Copy it and continue editing in your local skill directory.
YAML FRONTMATTERSkill metadata
nameFix Blank Screen Issues After Deploy on Vercel (Angular, React, Vite)
descriptionUse this skill when the user needs the workflow described above, especially when they want a structured result rather than a one-off answer. A reusable General skill centered on Fix Blank Screen Issues After Deploy on Vercel (Angular, React, Vite). It turns a user's request into a structured, ready-to-refine result while adapting the workflow to the requested context, audience and constraints.
03 / WORKFLOW

How to use

  1. 01
    Step 1

    Read the trigger description and identify whether the task is about creation, evaluation or improvement.

  2. 02
    Step 2

    Open SKILL.md and confirm the input, output and bundled resource requirements.

  3. 03
    Step 3

    Run a small test set with realistic positive and negative prompts.

  4. 04
    Step 4

    Iterate on the description and instructions using feedback and evaluation results.

04 / DISCUSSIONS

Discussions and feedback

—feedback records

Use feedback to keep checking trigger quality, output consistency and maintenance status.

Back to skills
Email