verify-feature

Verify Feature

Post-implementation browser verification for frontend features. Auto-detects changed routes from git history, navigates them, takes screenshots, and checks for console/network errors.

Arguments

• {route} — Route to verify (e.g., /users, /settings). If omitted, auto-detects from git changes.
• --responsive — Also capture mobile viewport screenshots (375x667)
• --interactive — Click the first Create/Add button, verify dialog appears, then dismiss

Configuration

Read cloudstack.json from the project root at the start of execution. Extract:

• FRONTEND_PATH = frontend.path (default: web)
• DEV_PORT = frontend.devPort (default: 5173)
• UI_LIBRARY = frontend.uiLibrary (default: shadcn)
• STATE_SERVER = frontend.stateManagement.server (default: tanstack-query)
• STATE_CLIENT = frontend.stateManagement.client (default: zustand)
• MULTI_TENANT = backend.multiTenancy (default: false)

If cloudstack.json does not exist, auto-detect by checking package.json dependencies.

Auth Configuration

Check cloudstack.json for localDev.authConfig. If present, use it for localStorage injection. Otherwise, detect the auth store pattern from the codebase (see screenshot skill for details).

Process

Step 1: Detect Routes

If a route was provided, use it directly. Otherwise, auto-detect from recent changes:

# Find changed page files
git diff --name-only HEAD~3 | grep "{FRONTEND_PATH}/src/.*pages/"

Map changed page files to routes by finding the router configuration file:

# Find router config
grep -rl "createBrowserRouter\|RouteObject\|<Route" {FRONTEND_PATH}/src/ 2>/dev/null | head -3

Read the router file and match feature/page names to route paths.

If no routes can be detected, ask the user which route to verify.

Step 2: Pre-flight

curl -sf http://localhost:{DEV_PORT} > /dev/null 2>&1 && echo "Frontend: UP" || echo "Frontend: DOWN"

If frontend is down, STOP and suggest starting the dev server.