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…
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:
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
Only tell the user "preview is ready" when health_check.ok is true
related skills
semantically similar in the cross-vendor index
don't have the plugin yet? install it then click "run inline in claude" again.
+explicit health_check validation loop prevents showing broken previews to users, with named failure modes (directory_listing, script_escape_error, blank_page, connection_failed)
+mandatory checklist format makes execution steps discoverable and repeatable
weaknesses
~no input specification: what file formats, project structures, or frameworks does preview-dev accept? no clear contract
~vague trigger scope: 'frontend & fullstack development' is generic; lacks specific phrases like 'react component', 'static html page', or 'express server'
~procedure lacks detail on initial setup: how does the skill scaffold a project, install deps, or handle package.json? the checklist only covers post-preview recovery
~no output contract: what does the user receive beyond 'preview is ready'? no mention of url, port binding, or asset availability
