inspect-app

name	inspect-app
description	Use this skill whenever the user asks to "test the UI", "check what the app looks like", "inspect the page", "verify the dev server is up", or before claiming a UI feature is done. Boots the dev server via .harness/scripts/dev-up.sh and drives the failing flow through Playwright MCP if installed (else falls back to curl + lightweight HTML capture). Mirrors the OpenAI Chrome-DevTools-Protocol-into-runtime pattern at solo scale — verify the running app, don't trust the type checker alone.
allowed-tools	Read, Bash(.harness/scripts/dev-up.sh), Bash(curl:*), Bash(playwright:*)
suggested-turns	12

When to use

The user said any of: "what does the page look like", "test the UI flow", "is the dev server up", "before merging the UI work", or invoked this skill explicitly via /inspect-app. Also auto-invokes from /debug-flow when the bug is UI-shaped.

Steps

1. Detect dev server. Read .harness/config.json for the framework.
   • If a process is already listening on the expected port (3000 / 8000 / 5000 depending on framework), reuse it.
   • Else: bash .harness/scripts/dev-up.sh & in the background and wait up to 30s for the readiness probe.
2. Capture mode — Playwright MCP (preferred). If mcp__playwright__* tools are available:
   • mcp__playwright__browser_navigate to the target URL
   • mcp__playwright__browser_snapshot for accessibility tree
   • mcp__playwright__browser_take_screenshot for a visual
   • Optionally drive a single user flow (click → fill → click → wait)
3. Capture mode — curl fallback. If MCP is unavailable:
   • curl -i -s -o response.body "http://localhost:$PORT$PATH" for headers + body
   • wc -l response.body to size-check
   • grep -E '<title>|<h1>' response.body | head -5 for sanity
4. Diff against expectation. If the user gave an expected element / text, grep for it. If not, just report what's on the page.
5. Cleanup. Kill the dev server we started (don't kill ones already running before this session).

Output contract

### App inspection
**URL:** http://localhost:<port><path>
**Status:** <HTTP status>
**Title:** <page title or first H1>
**Mode:** playwright-mcp | curl-fallback
**Screenshot:** <path or "n/a">
**Findings:** <bulleted list of matches/mismatches against expectation>

Anti-patterns

• Don't claim a UI feature is done without running this skill once.
• Don't leave a dev server running after the inspection — kill what you started.
• Don't grep for "Error" alone as a failure signal — many pages legitimately contain that word. Match against specific expected text instead.
• Don't take screenshots of pages with secrets or test fixtures with PII — the screenshot lands on disk.