skills.rest
N2O-com
N2O-comOFFICIAL
Explore all skills by this author →
GitHub

frontend-review

Assess web page UI quality with programmatic checks, visual analysis, and interaction testing.

Updated Aug 23, 2026
Search Tags:#accessibility#ui review#frontend testing#playwright#automated fixing#llm vision
One-click install
npx skills add https://github.com/N2O-com/N2O-just-workflow --skill frontend-review-n2o-com
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-review
Source: https://github.com/N2O-com/N2O-just-workflow/tree/main/02-agents/frontend-review
Command: npx skills add https://github.com/N2O-com/N2O-just-workflow --skill frontend-review-n2o-com

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/test, @axe-core/playwright, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the tedious and error-prone process of manually reviewing user interfaces, ensuring high standards of quality, accessibility, and user experience across different devices and states.

Core Features & Use Cases

  • Multi-Agent Assessment: Combines programmatic checks (accessibility, layout, styles), visual analysis (LLM-powered screenshot review), and interaction testing (simulating user behavior).
  • Automated Fixing: Iteratively attempts to fix identified issues, reducing manual rework.
  • Use Case: Before deploying a new feature, run this Skill on the staging URL to catch accessibility violations, inconsistent spacing, broken links, and ensure the UI looks and functions correctly on mobile and desktop.

Quick Start

Run /frontend-review on the provided page URL to assess its UI quality.

Frequently Asked Questions about frontend-review

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

FAQPage Schema
How do I automate frontend UI testing and accessibility checks with Playwright?▼

Automate frontend UI testing by running a multi-agent assessment on your page URL, combining Playwright interaction testing, axe-core programmatic accessibility checks, and LLM visual analysis to identify and auto-fix issues.

What is LLM vision-based UI review and how does it detect visual hierarchy issues?▼

LLM vision-based UI review analyzes page screenshots to evaluate visual hierarchy, density, and consistency, identifying rendering problems that traditional programmatic computed style checks might miss.

Does this automated UI review tool support responsive testing across mobile and desktop?▼

Yes, the automated UI review supports responsive testing across mobile and desktop by simulating user behavior and interaction testing via Playwright to ensure correct functionality and layout.

Can I automatically fix accessibility violations found during axe-core testing?▼

Yes, the tool iteratively attempts automated fixing of identified accessibility violations and other UI issues, reducing manual rework before generating detailed reports and defensive end-to-end tests.

How do I check my web page against a design spec for visual consistency?▼

Check visual consistency against a design spec by enabling optional spec alignment during the UI quality assessment, filtering focus and running flow-based assessments to verify precise layout matching.

What are the limitations of using automated Playwright tests for UI quality assessment?▼

Automated Playwright tests for UI assessment require a valid accessible URL to run and are limited to detecting programmatic layout issues, accessibility violations, and simulated interaction states rather than subjective design preferences.

Related Skills

Explore More Software Engineering Skills→
fugazifugazi
215

a11y-playwright-testing

Automate WCAG 2.1 AA accessibility scans in Playwright tests with axe-core.

Community
Intermediate
petrkohutpetrkohut

bmad-qa-generate-e2e-tests

Generate end-to-end automated tests for existing software features.

Community
Advanced
pedronauckpedronauck
567

a11y-testing

Automate accessibility testing with jest-axe and Playwright axe-core.

Community
Intermediate
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced