Loading...
Loading...
Found 8 Skills
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
Use vision models to self-review screenshots against design intent. Catches spacing issues, alignment problems, color inconsistencies, responsive bugs, and accessibility gaps. Use when reviewing designs, comparing implementations to mockups, or doing pre-ship QA.
Systematically test all pages for errors, functionality, and proper rendering using Playwright MCP
Frontend website debugging toolkit using Chrome DevTools Protocol with Playwright/WebKit fallbacks. Use this skill when: (1) Debugging CSS, HTML, or JavaScript issues on a webpage, (2) Taking screenshots to verify visual changes, (3) Inspecting DOM structure or console errors, (4) Testing responsive layouts, (5) Extracting selectors for automation, (6) Self-debugging frontend work Claude has created, (7) User says "debug this page", "check my site", "why doesn't this look right", or "fix the frontend". Supports Chrome (primary) and Safari/WebKit (via Playwright). Designed for agent-driven debugging loops.
Adversarial design critique of the current work — render it, look at it, and argue for rejection. Run after the gates are green, never instead of them.
Use when a site needs a combined accessibility and responsive-quality review: alt text, headings, keyboard use, focus, contrast, form labels, reduced motion, phone and tablet layouts, overflow, tables, dialogs, touch targets, sticky bars. It runs one shared runtime pass and routes to the accessibility and mobile specialists. Do not use it to claim WCAG conformance, to replace assistive-technology testing, or for backend or SEO work.
Run the one-command quality gate and report the real N/N result. Use before claiming any build/review is done.
Use when a site must work on phones and tablets, and you need real evidence from rendered layouts at small viewports: viewport meta, horizontal overflow, navigation, reading width, forms, tables, dialogs, touch targets, sticky bars, and whether the main task can be completed. Do not use it to treat "no horizontal scrollbar" as mobile readiness, to claim device coverage from one emulated size, or to redesign the site.