skills.rest
twillcocks
twillcocksCOMMUNITY
Explore all skills by this author →
Website𝕏@TobyWillcocksGitHub

portal-preview

Open client portal preview URLs in the default web browser.

Updated Apr 6, 2026
Search Tags:#preview#devtools#nextjs#browser#local-development#portal#showpane
One-click install
npx skills add https://github.com/twillcocks/showpane --skill portal-preview
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: portal-preview
Source: https://github.com/twillcocks/showpane/tree/main/skills/portal-preview
Command: npx skills add https://github.com/twillcocks/showpane --skill portal-preview

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Quickly open and view a client portal in a real browser so developers and operators can verify visual changes, content updates, and login behavior without manually resolving URLs or guessing whether a dev server is running.

Core Features & Use Cases

  • Auto-resolve URL: Prefer a local dev server on port 3000, fall back to NEXT_PUBLIC_APP_URL, and avoid opening a dead URL.
  • Platform-aware browser open: Use the native opener on macOS or Linux and handle WSL and SSH cases by printing the URL instead of attempting to open.
  • Workflow-friendly: Support single-portal auto-selection, multiple-portal batch previews (capped at 5), and clear next steps like using /portal-credentials or /portal-deploy.
  • Safety and telemetry: Emit minimal telemetry and provide clear error messages when prerequisites (dependencies, config) are missing.

Quick Start

Run /portal-preview <slug> to open the specified portal in your default browser and verify the live preview.

Frequently Asked Questions about portal-preview

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

FAQPage Schema
How do I preview a local Next.js portal in my browser during development?▼

To preview a local Next.js portal, the tool automatically detects a dev server on port 3000 and opens the resolved URL using your platform's native browser opener. It falls back to the NEXT_PUBLIC_APP_URL environment variable if no local server is running.

Can I open multiple client portals for batch previewing at once?▼

Yes, you can open multiple client portals for batch previewing, with the operation capped at a maximum of 5 portals. This allows operators to quickly validate visual changes across several portals simultaneously.

Does the portal preview tool work over SSH or WSL environments?▼

The portal preview tool handles SSH and WSL edge cases by printing the resolved URL to the terminal instead of attempting to open a native browser window. This ensures you can still access the preview link in restricted environments.

What happens if my dev server is not running on port 3000?▼

If a dev server is not running on port 3000, the tool avoids opening a dead URL by falling back to the NEXT_PUBLIC_APP_URL environment variable. This ensures you only see active deployed portals or properly configured local URLs.

Why does my portal preview URL fail to resolve automatically?▼

Portal preview URL resolution fails if prerequisites like configuration or dependencies are missing. The tool emits clear error messages detailing exactly what is needed to successfully resolve and open the portal URL.

What should I do after verifying my client portal changes in the browser?▼

After verifying client portal changes, clear next steps include using commands like /portal-credentials to check logins or /portal-deploy to push updates. These workflow-friendly actions help manage the portal lifecycle.

Related Skills

Explore More Software Engineering Skills→
canyouseeuscanyouseeus

paypal-sandbox

Route PayPal transactions to the Sandbox environment for safe testing.

Community
Advanced
weiloon1234weiloon1234

new-portal

Scaffold a new authenticated portal with login actor, routes, and optional SPA frontend.

Community
Advanced
OpenCovenOpenCoven
20

next-devtools

Connect to a running Next.js 16+ dev server to inspect routes, server actions, and logs.

Official
Intermediate
InnerScopeHearingInnerScopeHearing

browser-agent

Automate OAuth consents and portal clicks with Playwright and Chromium.

Official
Advanced