测试与安全

test

aladicf/better-web-ui

Build or improve a UI testing strategy covering visual regression, interaction testing, and accessibility assertions. Use when the user asks to add tests, set up testing, fix flaky tests, improve test coverage, validate UI behavior, catch visual bugs, or establish confidence in shipping frontend changes.

  • 529 次安装
  • 46 星标
  • 收录于

安装命令

npx skills add https://github.com/aladicf/better-web-ui --skill test

SKILL.md

Establish systematic confidence in UI behavior through the right mix of visual regression, interaction testing, and accessibility assertions.

Treat testing as a design input, not a post-ship safety net. The goal is not maximum coverage; it is catching the bugs that matter most without drowning the team in maintenance.

Consult the accessibility testing reference when the testing strategy needs automated axe checks, screen reader validation, or keyboard traversal tests. Consult the component accessibility reference when testing custom components for focus management, ARIA correctness, and keyboard behavior. Consult the interaction design reference when validating workflows under stress, error, or edge-case conditions. Consult the error-recovery reference when testing validation behavior, recoverable field errors, or abandonment paths. Consult the loading feedback and perceived performance reference when testing loading states, skeletons, stale-data cues, or perceived-performance behavior.

MANDATORY PREPARATION

Users start this workflow with /test. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first. Additionally gather: the most common UI bugs currently escaping to production, the team's tolerance for test maintenance, and which parts of the UI change most frequently.

Assess Testing Needs

Identify what is breaking and what should be caught: