Website Showcase

Convert a working website into presentation assets. Reuse the versioned standard showcase and card-preview template; each run supplies only project data and screenshots. Anonymous PostHog analytics are enabled by default from config/analytics.json; use --no-analytics when the user asks to disable tracking for a run.

Browser Tool Detection

Before resolving the source, inspect the tools that are actually callable in the current session and select one browser backend for navigation, session access, and visual checks:

1. Use Chrome MCP tools matching mcp__claude-in-chrome__* when the target requires an authenticated browser session or other state already present in the user's Chrome profile.
2. Otherwise use Playwright MCP tools matching mcp__plugin_playwright_playwright__* for public or local websites and interactive visual checks.
3. Use playwright-cli when it is callable and the task needs a repeatable scripted or batch flow, or when neither MCP backend is available.

The prefixes above are capability checks, not commands to invent. If the preferred backend is unavailable, continue with the next available backend and report the fallback only when it affects access or coverage. If none of the three is callable, use the bundled website-showcase.mjs browser path for public or local sources; stop and report the missing authenticated-session capability for a protected source. Use one backend consistently for a flow unless authenticated state or a backend failure requires switching.

The selected browser backend complements the bundled CLI rather than replacing the output pipeline. Use it to reach pages, reuse session state, inspect navigation, or verify captures. Keep website-showcase.mjs generate as the canonical step for copying the validated template and writing showcase-data.json. When authenticated state cannot be passed to the bundled CLI, capture the confirmed routes with Chrome MCP and record the image paths in the external capture manifest defined by references/showcase-contract.md.

Workflow

1. Run Browser Tool Detection, then resolve the source. If the user has not already specified one, ask them to choose:

• Current environment: find the generated website in the current workspace, detect its start command, and use an existing server when available.
• Service URL: use the supplied HTTP(S) address and skip project detection and server startup.

For current-environment mode, run:

powershell node <skill-dir>/scripts/website-showcase.mjs detect --project <project-dir>

Prefer a server that is already running. Otherwise start the detected command in a persistent terminal and use the exact URL printed by the server. Do not change application code merely to make capture convenient. The source step is complete when one reachable entry URL and its source mode are known.

2. Discover candidate pages. Use the bundled discovery command for public or local sources that it can access:

powershell node <skill-dir>/scripts/website-showcase.mjs discover --source <environment|service> --url <url> --out <work-dir>/discovery.json

Read the manifest and use the selected browser backend to verify ambiguous routes or discover pages that depend on the active browser session. For authenticated sources inaccessible to the bundled CLI, inspect navigation with Chrome MCP and create an equivalent manifest that satisfies the showcase contract. Present a compact L1/L2 page tree. Explicitly identify pages excluded by default, navigation failures, the discovery limit, and any routes the selected backend could not access.

3. Stop for page confirmation. The user decides which pages represent the work. This gate is complete only when every requested page is either selected or deliberately excluded. If the user already gave an exact route list, treat that as confirmation.

4. Capture screenshots and bind them to the standard template in a new output directory. For sources accessible to the bundled CLI, run:

powershell node <skill-dir>/scripts/website-showcase.mjs generate --manifest <work-dir>/discovery.json --out <output-dir> --route / --route /pricing

For an authenticated source captured with Chrome MCP, import its capture manifest instead of launching a new browser session:

powershell node <skill-dir>/scripts/website-showcase.mjs generate --manifest <work-dir>/discovery.json --capture-manifest <work-dir>/captures.json --out <output-dir> --route / --route /account

Omit --route only when the user confirmed every page marked defaultSelected. Never overwrite an existing output directory; choose a new name unless the user explicitly requests replacement. Generation copies the validated assets/showcase.html unchanged and writes project-specific fields to showcase-data.json. Analytics failure must not fail screenshot generation; report its status separately.

5. Check the run-specific artifacts only: every confirmed route has the requested device captures, files are non-empty, and failures is empty. Use the selected browser backend to open the served showcase and verify that the generated assets load. Serve the output directory over localhost for the user.

The showcase UI and the Single image, Device pair, and Multi-page card layouts are prevalidated template behavior. Repeat browser/visual validation only when the template version changed, a capture is blank or malformed, the generated data violates the template contract, or the user explicitly asks for validation.

6. Report the output path, served preview URL, source mode, selected browser backend, selected page count, screenshot count, capture failures, and analytics status. Keep the preview server running so the user can inspect it.

Runtime

The CLI requires Node.js and the skill-local playwright dependency. If the import is missing, run npm install in the skill directory. The CLI falls back to an installed Chrome or Edge when Playwright's bundled Chromium is absent. If none is available, run npx playwright install chromium in the skill directory, then retry the failed command.

Read references/showcase-contract.md when deciding capture scope, output behavior, privacy, or analytics. Do not add hosting, accounts, cloud storage, community features, or automatic social publishing to this workflow.