ai-shifu/markdown-flow-ui/content-render-loading-overlay
Claude Code and agent skill by ai-shifu/markdown-flow-ui
Trust tier 3
- community
Source check pending
Checking that the SKILL.md file is still in the repository.
统一 `markdown-flow-ui` 中 `ContentRender`、`IframeSandbox`、`Slide` 等场景的 loading 遮罩表现时使用本技能。
Install
npx vskill@latest install ai-shifu/markdown-flow-ui/content-render-loading-overlaySKILL.md
ContentRender Loading Overlay 一致性
核心规则
当 sandbox 构建样式、构建脚本、音频 buffering 等都属于“短时等待态”时,优先复用同一个小型居中 loading 卡片,不要为每个子场景各自维护一套遮罩结构与视觉样式。
工作流
- 先定位当前 loading 是不是属于短时过渡态,而不是全页面错误、空态或首屏 skeleton。
- 若多个组件都展示“spinner + 一句文案 + 居中遮罩”,优先抽取共享组件或共享样式常量。
- 保持 loading 文案来源可配置,但卡片尺寸、圆角、模糊、阴影、图标动画等视觉规则应统一。
- 若场景运行在 iframe 或隔离容器中,优先使用对宿主样式依赖更低的实现,避免因为 Tailwind 或主题注入时序导致 loading 闪烁或失效。
- 修改后重点检查
Slide bufferingText、Building styles...、Building scripts cache...等状态是否仍能正确切换与居中显示。 - 若渲染链路已进入明确错误态(例如
element.type === "error"),应立即关闭对应Slide/IframeSandbox/ContentRender的短时 loading 遮罩,不要让 buffering、style loading、script loading 继续盖在错误态之上。 Slide音频默认自动 preload / autoplay 时,若浏览器仅进入loadstart或首帧waiting、但尚未真实开始播放,不要展示“正在加载音频”这一类偏播放中的文案;优先隐藏该遮罩或继续使用更中性的等待态。
约束
- 不要删除已有
console.log或调试输出。 - 不要把短时 loading 误改成整屏错误遮罩或 skeleton。
- 优先做样式与结构复用,避免顺手改动 sandbox 构建时序逻辑。
Security
- Security scanPassed, 90 of 100Pattern checks on the skill's files.
- Model reviewPassed
Quality evaluation
- Task evaluationNot runNo evaluation yet. Run one in Skill Studio.
Source
- SKILL.md in the repositoryCheckingskills/content-render-loading-overlay/SKILL.md
Popularity
- Repository stars
- 9
- Repository forks
- 6
- 7-day trend score
- 0
Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.
Works with
Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.
- Claude Code
- Cursor
- GitHub Copilot
- Windsurf
- Codex
- Gemini CLI
- Cline
- Amp
- Roo Code
- Goose
- Continue
- Kilo Code
- Junie
- Trae
- OpenHands
- Qwen Code
- AI Agent
- Tabnine Chat
- Sourcegraph Cody
- Amazon Q
- Firebase Genkit
- Sweep
- Devin
- Phind
- Mentat
- Claude Desktop
- Aider
- GPT Pilot
- Plandex
- bolt.new
- v0
- Replit Agent
- Anse
- TypingMind
- BetterChatGPT
- LibreChat
- Warp AI
- Pieces
- Fig AI
Embed badge
[](https://verified-skill.com/skills/ai-shifu/markdown-flow-ui/content-render-loading-overlay)