TWISTEdBRACKETS

Quality & review

Responsive Layout Audit

responsive-layout-audit

A review pass, not a from-scratch mobile-first design process. It reads a page's route and components, classifies content into what has to stay visible on a small screen versus what's a good candidate for a menu, drawer, or toggle, and checks the implementation against a maintained checklist covering breakpoints, navigation, touch targets, typography, images, tables, forms, and mobile performance. Auditing several pages at once fans out to one subagent per page, run in parallel, then merges the results into a single report.

What it does

  • Resolves the named page(s) to their route files and reads the component tree
  • Classifies content into what must stay visible on mobile vs. what can collapse into a menu, drawer, or toggle
  • Checks breakpoint classes, fixed widths, hover-only affordances, and touch target sizing against the reference checklist
  • Fans out to one subagent per page in parallel when auditing multiple pages, then merges the findings
  • Reports issues grouped by page and severity, each with a location, the guideline violated, and a concrete fix

Report format example

The shape of the findings this skill reports back - grouped by page, most severe first.

text
### /pricing - 2 issues

Blocker - PricingTable.js:42
The plan comparison table has no small-screen treatment; below 640px it overflows silently with no scroll affordance.
Guideline: Tables & dense data - give wide tables an explicit small-screen treatment.
Fix: wrap the table in a horizontally scrollable container with a visible scroll shadow, or reflow each plan into a stacked card below 640px.

Major - PricingHeader.js:18
"Compare all plans" uses the same visual weight as "Start free trial", competing with the page's primary action.
Guideline: Content priority - don't let a secondary action compete with the primary one.
Fix: demote "Compare all plans" to a quiet text link; keep "Start free trial" as the only filled button on the page.

How it flows

  1. 01Resolve target page(s) to route files
  2. 02Read the maintained checklist in references/responsive-guidelines.md
  3. 03Classify content as core (stays visible) or secondary (can collapse)
  4. 04Check breakpoint, touch-target, and layout implementation against the checklist
  5. 05Report issues by page and severity, with location and fix

Example prompt

“/responsive-layout-audit Audit the pricing and contact pages for responsive layout issues.”

Install

sh
npx dot-skills add levi-putna/twistedbrackets.com/responsive-layout-audit