skills.rest
nikglavin
nikglavinCOMMUNITY
Explore all skills by this author →
GitHub

lyra-qa-design

Audit live web applications for visual fidelity and fix findings with atomic commits.

1|Updated Mar 24, 2026
Search Tags:#automation#frontend#design review#playwright#polish#visual QA#ai slop
One-click install
npx skills add https://github.com/nikglavin/lyra --skill lyra-qa-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lyra-qa-design
Source: https://github.com/nikglavin/lyra/tree/main/skills/lyra-qa-design
Command: npx skills add https://github.com/nikglavin/lyra --skill lyra-qa-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Autonomous visual QA and design-polish workflows for live web applications, reducing manual review time and ensuring consistent typography, spacing, color, hierarchy, and responsive behavior across breakpoints. It diagnoses visual regressions, proposes targeted fixes, and coalesces results into a verifiable design report.

Core Features & Use Cases

  • Audits live applications for hierarchy, spacing, typography, color, and responsive breakpoints.
  • Fixes findings in source code with atomic commits and re-verifies the results.
  • Produces a report with a design score and AI slop deltas to guide improvement.
  • Proactively suggests polish and accessibility enhancements during design reviews.

Quick Start

Ask the agent to run a full design-review audit on the current project.

Frequently Asked Questions about lyra-qa-design

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

FAQPage Schema
How do I automate visual QA and design review for a live web application?▼

Automated visual QA audits live web applications for design consistency across typography, spacing, color, hierarchy, and responsive breakpoints, then fixes findings with atomic commits and outputs a design report.

Can I use Playwright to test responsive breakpoints and fix visual regressions automatically?▼

Playwright supports automated visual QA by testing responsive breakpoints, diagnosing visual regressions, proposing targeted source code fixes, and re-verifying the updated UI results.

What is AI slop in frontend design and how do I measure it during a polish task?▼

AI slop refers to visual inconsistencies. A visual QA audit measures AI slop deltas alongside a design score to guide targeted typography, spacing, and color improvements during polish tasks.

Does automated design review work for both finding issues and committing source code fixes?▼

Automated design review audits live applications for visual fidelity and fixes findings directly in source code using atomic commits, then re-verifies the applied visual changes.

What are the limitations of using Playwright for autonomous visual QA?▼

Autonomous visual QA requires Playwright MCP to function. While it proactively suggests accessibility enhancements, users must validate the generated design report and AI slop deltas before merging fixes.

Related Skills

Explore More Design & Creative Skills→
gtpgg1013gtpgg1013

web-clone

Clone a live website's visuals and core interactions from a URL.

Community
Advanced
samjhechtsamjhecht
4

frontend-visual-regression-testing

Compare UI component screenshots against baselines to detect visual regressions.

Community
Advanced
calcosmiccalcosmic
9

frontend-design-contract

Generate a UI-SPEC.md contract defining visual tokens, breakpoints, and accessibility criteria.

Community
Intermediate
LaPaGaYoLaPaGaYo

design-review

Identify and fix visual design issues in software UI with before/after screenshot verification.

Community
Intermediate