skills.rest
Starchild-ai-agent
Starchild-ai-agentOFFICIAL
Explore all skills by this author →
GitHub

browser-preview

Diagnose browser preview panel issues involving iframe rendering and URL handling.

22|12|Updated Mar 13, 2026
Search Tags:#debugging#web development#troubleshooting#frontend#preview#browser
One-click install
npx skills add https://github.com/Starchild-ai-agent/official-skills --skill browser-preview
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-preview
Source: https://github.com/Starchild-ai-agent/official-skills/tree/main/browser-preview
Command: npx skills add https://github.com/Starchild-ai-agent/official-skills --skill browser-preview

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps diagnose and manage issues related to the browser preview panel, ensuring users can effectively see and interact with their web application previews.

Core Features & Use Cases

  • Browser Tab Management: Understand how the browser tab functions and how to reopen it if closed.
  • URL Handling: Guides on correctly using preview URLs and avoiding direct localhost access.
  • Path Resolution: Addresses issues with static assets and API calls by ensuring relative path usage.
  • Troubleshooting: Provides a step-by-step process for diagnosing blank pages, broken previews, and missing services.

Quick Start

When a user reports a problem with the browser preview, follow the step-by-step diagnostic process outlined in the skill's documentation.

Frequently Asked Questions about browser-preview

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

FAQPage Schema
Why is my browser preview showing a blank screen?▼

A blank browser preview screen often results from incorrect URL formats or missing services. You can diagnose it by checking the service registry, verifying workspace configurations, and ensuring the preview URL is correct.

How do I fix broken static assets in my web app preview?▼

To fix broken static assets in your web app preview, ensure you are using relative paths for all asset references. Direct localhost access inside the iframe-based rendering panel should be avoided to prevent path resolution failures.

How do I reopen a closed browser preview tab?▼

You can reopen a closed browser preview tab by scanning your workspace and checking the service registry. This browser tab management process verifies the active service and restores the iframe-based preview panel.

How does the browser preview panel handle API calls?▼

The browser preview panel handles API calls through an iframe-based rendering environment. It requires correct URL formats and relative path usage for static assets and API calls to avoid broken pages and ensure proper communication.

What is the best way to troubleshoot a disappeared preview tab?▼

The best way to troubleshoot a disappeared preview tab is to follow a step-by-step diagnostic process. This involves verifying the service status, scanning the workspace, and checking the registry to restore the iframe rendering.

Related Skills

Explore More Software Engineering Skills→
msaad00msaad00
29

agent-bom-discover

Identify AI agents, MCP servers, and their configurations on the local system.

Community
Intermediate
logo-solutionslogo-solutions

browser-testing-with-devtools

Inspect live DOM, console, network, and performance state in Chromium-based browsers.

Official
Advanced
capaas2capaas2

performance-profiling

Identify web application performance bottlenecks using Lighthouse and Core Web Vitals.

Community
Intermediate
Prohao42Prohao42
120

401-403-bypass-techniques

Bypass 401/403 access controls using path, method, header, and protocol techniques.

Community
Advanced