skills.rest
NodeJSmith
NodeJSmithCOMMUNITY
Explore all skills by this author →
GitHub

ui-qa

Validate the Hassette web UI against a live demo stack.

77|5|Updated Sep 1, 2025
Search Tags:#responsive design#playwright#visual review#screenshot analysis#persona testing#ui qa
One-click install
npx skills add https://github.com/NodeJSmith/hassette --skill ui-qa-nodejsmith
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-qa
Source: https://github.com/NodeJSmith/hassette/tree/main/.claude/skills/ui-qa
Command: npx skills add https://github.com/NodeJSmith/hassette --skill ui-qa-nodejsmith

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you verify the Hassette web UI against a live demo stack so you can catch visual regressions, broken responsive layouts, and missing navigation affordances that static checks miss.

Core Features & Use Cases

  • Screenshot-based visual review: Capture page and viewport matrices and critique them against design rules and tokens.
  • Task-driven persona walkthroughs: Simulate real users to uncover dead ends, lost context, and missing links between related views.
  • Live demo validation: Use the running Hassette demo environment to inspect real logs, failures, and app states instead of mock data.
  • Use Case: After changing a mobile logs table, run a focused mobile QA pass to confirm the layout remains readable and the next-hop actions still work.

Quick Start

Use the ui-qa skill to start the demo stack, capture the affected screens, and run the relevant persona walkthroughs for the UI change I just made.

Frequently Asked Questions about ui-qa

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

FAQPage Schema
How do I catch visual regressions in a live web UI demo environment?▼

Visual regression testing in a live demo environment captures actual page states and viewport matrices to critique against design rules and tokens, uncovering broken layouts that static mockups miss.

Can I use Playwright to run persona-driven QA walkthroughs for responsive layouts?▼

Sequential Playwright-based persona execution simulates real users navigating workflows, uncovering dead ends and missing links between related views across mobile and desktop responsive layouts.

What is the best way to validate mobile UI accessibility after a layout change?▼

Mobile UI accessibility validation runs a focused QA pass against the running demo stack to confirm the layout remains readable and next-hop actions work on mobile and desktop viewports.

Does screenshot critique work for finding navigation friction in web apps?▼

Screenshot critique captures affected screens and compares them against design tokens to identify navigation friction, lost context, and missing affordances that static checks overlook.

Why does static UI checking miss responsive layout defects that live demo validation catches?▼

Live demo validation inspects real logs, failures, and app states from the running environment, catching responsive layout defects and navigation friction that static checks cannot detect.

When do I need to run a live demo stack for UI QA instead of mock data?▼

Running a live demo stack for UI QA is required when validating real logs, app states, and status workflows, as mock data cannot surface the visual and functional defects present in actual usage.

Related Skills

Explore More Design & Creative Skills→
samjhechtsamjhecht
4

frontend-visual-regression-testing

Compare UI component screenshots against baselines to detect visual regressions.

Community
Advanced
ByronWilliamsCPAByronWilliamsCPA

naive-ux-check

Run persona-specific manual UX tests and log redacted feedback.

Official
Advanced
utsavthakurutsavthakur

webapp-testing

Automate browser-based testing of local web applications with Playwright.

Community
Intermediate
riezriez
1

broken-ui-a11y-audit

Audit live web pages for visible UI and accessibility issues across viewports.

Community
Intermediate