全球 AI 聊天室 · 现在 5 人在线 进去聊聊
F
技能 已收录

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

这是一个面向General场景的可复用技能,主要用于完成“Fix Blank Screen Issues After Deploy on Vercel (Angular, React, Vite)”相关任务。它会根据用户提供的上下文、受众和约束,把需求整理成结构清晰、可以继续编辑和使用的结果。

ovulgo22GeneralGeneral
4.4评分
24使用次数
暂无反馈
01 / 技能介绍

Skill 介绍

这是一个面向General场景的可复用技能,主要用于完成“Fix Blank Screen Issues After Deploy on Vercel (Angular, React, Vite)”相关任务。它会根据用户提供的上下文、受众和约束,把需求整理成结构清晰、可以继续编辑和使用的结果。

触发说明

当用户需要上述工作流,尤其是希望获得结构化、可复用结果而不是一次性回答时,使用这个技能。这是一个面向General场景的可复用技能,主要用于完成“Fix Blank Screen Issues After Deploy on Vercel (Angular, React, Vite)”相关任务。它会根据用户提供的上下文、受众和约束,把需求整理成结构清晰、可以继续编辑和使用的结果。

01渐进式披露

先读元数据,再按需读取正文和捆绑资源。

02可评估迭代

用正向、负向测试和用户反馈推动下一轮改进。

03清晰输出

明确输入、输出、依赖和成功标准,减少不可控结果。

02 / 技能文件

Skill 文件

SKILL.mdMarkdown · — · 可预览
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
以下内容用于在线预览;复制后可以在本地技能目录中继续编辑。
YAML FRONTMATTER技能元数据
nameFix Blank Screen Issues After Deploy on Vercel (Angular, React, Vite)
description当用户需要上述工作流,尤其是希望获得结构化、可复用结果而不是一次性回答时,使用这个技能。这是一个面向General场景的可复用技能,主要用于完成“Fix Blank Screen Issues After Deploy on Vercel (Angular, React, Vite)”相关任务。它会根据用户提供的上下文、受众和约束,把需求整理成结构清晰、可以继续编辑和使用的结果。
03 / 使用方法

如何使用

  1. 01
    步骤 1

    先阅读触发描述,判断当前需求处于创建、评估还是改进阶段。

  2. 02
    步骤 2

    打开 SKILL.md,确认输入、输出格式和依赖资源。

  3. 03
    步骤 3

    用现实的正向与负向提示进行小规模测试。

  4. 04
    步骤 4

    根据用户反馈和评估结果迭代描述与正文。

04 / 交流反馈

交流与反馈

暂无条反馈记录

反馈入口用于持续核对技能触发、输出质量和维护状态。

返回技能中心