skills.rest
alvis
alvisCOMMUNITY
Explore all skills by this author →
Website𝕏@alvishttangGitHub

audit

Audit rendered web interfaces for design, accessibility, and responsive defects with a deterministic CLI.

4|1|Updated Jul 31, 2025
Search Tags:#accessibility#browser automation#wcag#design review#responsive testing#web audit#visual qa
One-click install
npx skills add https://github.com/alvis/.agents --skill audit-alvis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: audit
Source: https://github.com/alvis/.agents/tree/main/plugins/web/skills/audit
Command: npx skills add https://github.com/alvis/.agents --skill audit-alvis

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Manually reviewing a web interface across multiple viewports for design consistency, WCAG accessibility, and responsive layout defects is slow and error-prone. This Skill automates that review by crawling a rendered site with a real browser, running deterministic in-page audits, and producing evidence-backed findings mapped to canonical review files. ## Core Features & Use Cases - Deterministic multi-viewport crawling: Audits pages at mobile (390x844), tablet (820x1180), desktop (1440x900), and wide (1920x1080) viewports using a Bun-based CLI driving a shared Chrome DevTools browser via agent-browser. - Eleven browser-side audit modules: Checks WCAG contrast, semantic structure, touch target sizes, mobile overflow, design token adoption, typography, spacing grids, unused CSS, and modal accessibility directly against the live DOM and computed styles. - AI adjudication with visual grounding: Findings flagged for subjective review are adjudicated against section-crop screenshots, then classified into canonical review areas (alignment, correctness, quality, testing, and more) with P0-P3 severity mapping. - Use Case: Point the Skill at a local Next.js dev server before launch; it crawls the site across all viewports, replays interactions like menus and modals, and returns a scored report.json plus proposed review findings with screenshot evidence. ## Quick Start Ask the agent to audit your running web app by providing its URL, for example: audit http://localhost:3000 across all viewports and report accessibility and design findings.

Frequently Asked Questions about audit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit a website for accessibility and design issues automatically?▼

Run the bundled CLI with a target URL or project path: it crawls the site in a real browser, injects eleven audit modules covering WCAG contrast, semantics, touch targets, and layout, then writes a scored report.json with evidence for each finding.

What viewports does responsive design testing cover?▼

The default --viewport all setting audits four viewports: mobile 390x844, tablet 820x1180, desktop 1440x900, and wide 1920x1080. You can restrict the run to a single viewport with the --viewport flag.

Which frameworks are supported for route discovery?▼

Source route discovery supports Next.js App and Pages Router, Vite with React Router, Remix, SvelteKit, Astro, Nuxt, and static HTML trees. Dynamic segments are replaced with sample slugs, and real IDs can be supplied via --seeds.

What dependencies are required to run the web audit?▼

The audit requires Bun to execute the TypeScript CLI, the agent-browser binary for browser control, and an isolated Chrome DevTools browser session. The CLI exits with code 2 if agent-browser is missing.

Why do some findings need AI visual review?▼

Eleven subjective design rules, such as visual hierarchy and copy clarity, cannot be decided deterministically, so the CLI flags them with needs_ai_review. Each is adjudicated against a section-crop screenshot; findings without a crop are recorded as missing_section_crop rather than guessed.

Can the audit fix the design issues it finds?▼

No. The audit only performs independent assessment and reports evidence-backed findings classified into canonical review areas. Fixes are routed to the owning implementation skill, and the audit never edits product source code.

Related Skills

Explore More Design & Creative Skills→
kisslex2013-altkisslex2013-alt

chrome-devtools

Automates Chrome debugging and performance analysis via MCP.

Community
Advanced
seasonmacseasonmac

node-connect

Diagnose and fix OpenClaw node connection and pairing failures.

Community
Intermediate
JasonColapietroJasonColapietro
123

frontend-design-review

Review and visually QA web interfaces against numeric design laws with rendered screenshot evidence.

Community
Advanced
redisreadredisread

hunt

Diagnose root causes of errors, crashes, regressions, and failing tests before fixes.

Community
Advanced