skills.rest
vTRKA
vTRKACOMMUNITY
Explore all skills by this author →
GitHub

preview-server

Launch a hot-reload local preview server for renderable mockups and return a managed localhost URL.

Updated Apr 27, 2026
Search Tags:#local development#hot reload#preview server#browser feedback#mockup prototype#Playwright screenshot#render proof
One-click install
npx skills add https://github.com/vTRKA/supervibe --skill preview-server
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: preview-server
Source: https://github.com/vTRKA/supervibe/tree/main/skills/preview-server
Command: npx skills add https://github.com/vTRKA/supervibe --skill preview-server

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Preview Server ensures your AI-generated HTML/CSS/JS mockups can be safely reviewed in a real browser session with hot-reload feedback, while collecting the evidence needed before claiming the preview is “ready” for handoff or approval.

Core Features & Use Cases

  • Spawns or reuses a managed localhost preview: Starts the Supervibe preview daemon for a renderable mockup root and returns the managed URL to the user.
  • Verifies preview quality via browser evidence: Confirms HTTP availability and the presence of the feedback overlay entrypoint (e.g., feedback toggle/button) so design feedback is captured reliably.
  • Supports frameworks and multi-variant roots: Proxies an existing dev server with Supervibe injection for feedback, and verifies each variant URL independently when a variant manifest exists.
  • Optionally captures Playwright screenshots: Saves a screenshot next to the mockup files when requested.
  • Adds runtime proof for advanced visuals: Requires additional checks for motion/video/WebGL/canvas/Three.js to avoid using “a live URL” as a substitute for rendering evidence.

Quick Start

Run the preview-server skill after your agent produces HTML/CSS/JS mockup files, then ask the AI to open the managed preview link so you can click around and leave feedback.

Frequently Asked Questions about preview-server

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up a local preview server with hot reload for HTML mockups?▼

To set up a local preview server with hot reload, launch the daemon against your renderable mockup root. It returns a managed localhost URL for browser-based feedback, verifying HTTP availability and injecting the feedback overlay.

What is the best way to capture a Playwright screenshot of a prototype?▼

The best way to capture a Playwright screenshot is to request it when launching the preview server. The tool saves the screenshot next to your mockup files to provide rendering proof for visual claims.

Does a local development preview server work with framework-backed prototypes?▼

Yes, local development preview servers work with framework-backed prototypes. The server proxies your existing dev server, applies feedback injection, and verifies each variant URL independently if a variant manifest exists.

Why does my mockup preview server need proof of render for WebGL content?▼

Your mockup preview server needs proof of render for WebGL content to prevent using a live URL as a substitute for rendering evidence. Advanced visuals like motion, video, canvas, and Three.js require additional runtime checks.

Can I reuse an existing localhost port for browser feedback without overlap?▼

Yes, you can reuse an existing localhost port without overlap. The preview server checks the preview-server listing to ensure no port or process overlap before spawning or reusing the managed daemon.

What to do when hot reload is not working for multi-variant mockup roots?▼

When hot reload is not working for multi-variant mockup roots, verify the variant manifest exists. The server requires this manifest to apply variant-aware routing and confirm the feedback overlay entrypoint across each independent URL.

Related Skills

Explore More Design & Creative Skills→
shaunandrewsshaunandrews
8

design-mockups

Prototype and preview HTML/CSS design mockups with a local server.

Community
Intermediate
vTRKAvTRKA

browser-runtime-verification

Verify browser UI behavior with runtime evidence and emit a browser-runtime-report.

Community
Advanced
cloudofgeorgecloudofgeorge

browse

Drive a headless browser to automate QA testing and capture screenshots.

Community
Intermediate
memoirlabsmemoirlabs
6

bun-dev-server

Set up a Bun development server with hot reload and WebSocket HMR.

Official
Intermediate