QA Audit

QA Audit: Claude Code Cloud

App-specific QA audit skill for the Claude Code Cloud web app. Contains flow map, test cases, known issues, and mobile-specific tests.

Activation

Triggers on: "run QA", "audit the app", "regression test", "check for regressions", "mobile QA"

App Metadata

• Base URL: http://localhost:3072 (or configured port)
• Tech Stack: Next.js 15, Clerk auth, Hono API
• Test Credentials: User's Clerk account
• Last Full Audit: 2026-01-02
• Last QA Run: 2026-01-02

Quick Commands

• /qa-audit - Run all test cases
• /qa-audit regression - Run P0 tests only
• /qa-audit mobile - Run mobile-specific tests
• /qa-audit [flow-name] - Run specific flow tests

Flow Map

Screens Inventory

Navigation Graph

Landing (/)
  ├── Sign In → Dashboard
  └── Sign Up → Dashboard/Setup

Dashboard (/dashboard)
  ├── New Workspace → Dashboard (after creation)
  └── Workspace Card → Workspace Detail

Workspace Detail (/dashboard/workspace/[id])
  ├── ← WORKSPACES breadcrumb → Dashboard
  ├── Logo click → Dashboard
  └── Workspaces button → Dashboard

User Journeys

1. J01 - New User: Landing → Sign Up → Setup → Dashboard
2. J02 - Returning User: Landing → Sign In → Dashboard
3. J03 - Create Workspace: Dashboard → New → Form → Dashboard
4. J04 - Access Terminal: Dashboard → Workspace Card → Terminal
5. J05 - Return to Dashboard: Terminal → (breadcrumb/logo/button) → Dashboard

Test Case Library

P0 - Critical (Every Release)

P1 - Important (Mobile-Specific)

P2 - Standard

Known Issues & Workarounds

Mobile Breakpoints to Test

App-Specific Heuristics

What Typically Breaks

• Header at narrow viewports (no responsive handling)
• Terminal height calculation on small screens
• Long email addresses overflow nav

Patterns to Watch

• Inline styles with fixed values (no media queries)
• display: flex; gap: X without wrap
• calc(100vh - Xpx) height calculations

Known Fragile Areas

• apps/web/src/components/Header.tsx - no mobile breakpoints
• apps/web/src/components/TerminalSection.tsx - fixed height calc
• apps/web/src/app/globals.css - only one @media query at 768px

Screenshot Archive

Last Run Results

Dev Browser Setup

# Start server
cd skills/dev-browser && ./server.sh &

# Mobile viewport test
cd skills/dev-browser && npx tsx <<'EOF'
import { connect, waitForPageLoad } from "@/client.js";
const client = await connect();
const page = await client.page("mobile-test");
await page.setViewportSize({ width: 375, height: 812 });
await page.goto("http://localhost:3072");
await waitForPageLoad(page);
await page.screenshot({ path: "/tmp/qa-test.png" });
await client.disconnect();
EOF