Playwright CLI Skill - Deterministic AI-interface audit

Stop guessing why twitches, lays, distorts the interface and spend hours on manual scrolling.

We’re no longer using “magical AI” that just looks at a screenshot and says “sort of normal.”.

We now have a repeatable engineering process like an autotest, only 10 times faster and smarter.

AI controls a real browser, takes accurate metrics every 100 milliseconds, captures visual artifacts, catches bugs, and ** immediately links each bug to a specific line of code in your project — that’s the deterministic AI UI Audit.

## Stack

• Playwright CLI Skill – Real browser management from the terminal (official Microsoft 2026 tool)
• AI Agent (Claude/Cursor/Grok/Codex) – builds scripts, analyzes screenshots and logs
• ripgrep (rg) - instant search for all code for root-cause

## Complete 7-step process

1. Fixing the test profile The same viewport (393×852 – iPhone 14/15), the same environment (staging or preview), the same set of routes. Team example:

   bash copy

   playwright-cli open https://staging.yourapp.com --viewport=393,852

2. Building a screen map The AI reads your routing.ts / app/routes / Next.js App Router and generates a complete list of pages + user paths. Prompt for this step is lower.

3. We run navigation through a real browser AI takes turns opening all screens and performs basic navigation (click on tabs, open modals, etc.).

4. **Remove the "layout shift" metrics ** Each ~100 ms read getBoundingClientRect() key blocks (header, CTA buttons, cards, containers). We consider the maximum shift in X/Y per session. The result: "max shift = 57 px on the product card.".

5. Fixing visual artifacts Take 3 screenshots on each screen:

   • early - immediately after downloading
   • mid in 800 ms
   • settled - after complete stabilization (network idle + 500 ms silence)

6. ** Collecting runtime errors** Log it all:

   • console.error and console.warn
   • HTTP requests ≥400
   • Problems with assets, authorization, data

7. Doing root-cause analysis** AI gets: screenshots + metrics + logs + fresh snapshot elements. It runs rg "className|id|data-testid" and outputs:

   • file
   • priority (P0/P1/P2)
   • ready-made

## What does it mean in practice

• ** 100% reproducibility* – launched today, launched in a week – comparable result
• Measurability - the bug no longer sounds "like twitching" but "max layout shift 57 px on mobile, .product-card element, line 142 in ProductGrid.tsx"
• *Regression protection – after each fix, run the same audit and see if it gets better or worse
• Time savings – a full 25-screen application audit takes 12-18 minutes instead of 3-4 hours manually

## The key principle of methodology

AI is just an accelerator of analysis. The quality is given by the deterministic Pipeline: Fixed conditions → metrics → artifacts → rerun.

## Ready-made prompts for Claude / Cursor / Grok (copy-paste)

Prompt No. 1 – Complete audit per request

Run a deterministic AI UI Audit for my application.

Test profile:
- Viewport: 393x852
- URL: [Link to your website]
Routes: Read the app/routes.ts file and make a full list

Steps:
1. Build a screen map.
2. Open every screen with Playwright CLI
3. Take 3 screenshots (early/mid/settled)
4. Measure max layout shift every 100 ms for blocks: header, main, cta-buttons
5. Gather console.error/warn + HTTP >=400
6. Do root-cause analysis with rg code
7. Give a table of bugs with priorities P0-P2 and ready fixes

Use only the Playwright CLI Skill team.

Prompt No. 2 - One screen analysis

Analyze these 3 screenshots + layout shift metrics + Playwright logs.
For each visual bug, specify:
- Priority (P0/P1/P2)
- Exact location in the code (file: line)
- The proposed one-line fix

Prompt No. 3 - Configure the test profile

Create an audit profile file. json for Deterministic AI UI Audit:
viewport 393x852
- 12 key screens
List of selectors for shift measurement
Launch command via Playwright CLI

## How to start the first audit

1. Install Playwright CLI Skill
2. Copy Prompt No. 1 in Claude/Cursor
3. Ask the AI to run the script if it doesn’t run automatically
4. Get a ready report in Markdown + folder with artifacts

## How to support

• Add an audit to CI/CD (GitHub Actions/GitLab) – starts after each PR
• Store results in Supabase (Audit table)
• Compare metrics once a week (max shift should fall)
• After major refactorings, start a regression audit

## FAQ

Can I use it without Playwright CLI? ** You can, but you lose speed and determination. Playwright CLI is the basis of the methodology.

Does it work on mobile devices? ** Just enter viewport and use --device="iPhone 15".

How much does it cost to launch? ** 0 rubles, all local.

**Suitable for large applications? ** Yeah. We ran an audit on a project with 47 screens — 14 minutes.

## Outcome

Deterministic AI UI Audit is not just “AI looked at the site.” This is an engineering tool at the level of autotests, which already today gives us stable interfaces and confidence at every step.