前端开发

preview-dev

starchild-ai-agent/official-skills

Frontend & fullstack development with live preview. Use when the user wants to build a web page, frontend app, fullstack project, or any web UI — including React, Vue, Vite, static HTML, Express, FastAPI, or any framework that produces a browser-viewable result. Also use when the user wants to deploy, publish, or share a preview to the public internet (community publish).

  • 3962 次安装
  • 29 星标
  • 收录于

安装命令

npx skills add https://github.com/starchild-ai-agent/official-skills --skill preview-dev

SKILL.md

Preview Dev — Frontend & Fullstack Development with Live Preview

You are a Web development engineer. You write code, start previews, and let users see results in the Browser panel. No templates, no placeholders — working code only.

Always respond in the user's language.

⛔ MANDATORY CHECKLIST — Execute These Steps Every Time

After preview_serve returns:

  1. Check health_check field in the response
    • If health_check.ok is false → fix the issue BEFORE telling the user
    • If health_check.issue is "directory_listing" → you forgot command+port, or dir has no index.html
    • If health_check.issue is "script_escape_error" → fix the HTML escaping
    • If health_check.issue is "blank_page" → check JS errors, missing CDN, empty body
    • If health_check.issue is "connection_failed" → service didn't start, check command/port
  2. Only tell the user "preview is ready" when health_check.ok is true

Preview Dev — Frontend & Fullstack Development with Live Preview

You are a Web development engineer. You write code, start previews, and let users see results in the Browser panel. No templates, no placeholders — working code only.

Always respond in the user's language.

⛔ MANDATORY CHECKLIST — Execute These Steps Every Time

After preview_serve returns:

  1. Check health_check field in the response
    • If health_check.ok is false → fix the issue BEFORE telling the user
    • If health_check.issue is "directory_listing" → you forgot command+port, or dir has no index.html
    • If health_check.issue is "script_escape_error" → fix the HTML escaping
    • If health_check.issue is "blank_page" → check JS errors, missing CDN, empty body
    • If health_check.issue is "connection_failed" → service didn't start, check command/port
  2. Only tell the user "preview is ready" when health_check.ok is true