What frameworks does this skill support?

It primarily supports React, Vite, and plain HTML projects, utilizing Playwright as the underlying automation engine.

How does it handle asynchronous loading states?

The skill implements a loading state machine check that verifies transitions from idle to loading, and then to success or error states.

Can it check for dark mode compatibility?

Yes, it includes built-in generic contracts for verifying theme contrast and readability across dark, light, and system modes.

Do I need to write new test cases for every component?

No, the framework is designed to scale by automatically discovering UI blocks via data-qa tags and applying generic behavioral contracts.

Where are the test results and artifacts stored?

All test artifacts, including snapshots, frames, videos, and the report.html, are stored under the artifacts/ui-check/ directory.

UI Check Framework

Name: UI Check Framework
Author: yiyousiow000814

byyiyousiow000814

보안 및 테스팅

Builds and extends extensible UI self-check frameworks for Web UIs using Playwright to automate visual and functional quality assurance.

소개

The UI Check Framework skill enables developers to implement a robust, scalable automated testing system that discovers UI components via QA tags and enforces behavioral contracts. It automates complex checks for theme accessibility, animation performance, loading states, and layout stability across various screen sizes. This skill is particularly useful for teams looking to maintain high UI standards without writing repetitive test cases for every new component, modal, or view added to their React or Vite projects.

주요 기능

0 GitHub stars
State machine validation for loading, success, and error flows
Automated component discovery via data-qa and data-testid tags
Interactive reporting with screenshots, video recordings, and HTML logs
Comprehensive theme, contrast, and accessibility verification
Visual stability and overlap detection across multiple screen sizes

사용 사례

Implementing accessibility and dark mode contrast checks into CI/CD pipelines
Enforcing QA tagging standards and documentation across large-scale frontend projects
Automating regression testing for design systems and component libraries

소개

주요 기능

0 GitHub stars
State machine validation for loading, success, and error flows
Automated component discovery via data-qa and data-testid tags
Interactive reporting with screenshots, video recordings, and HTML logs
Comprehensive theme, contrast, and accessibility verification
Visual stability and overlap detection across multiple screen sizes

사용 사례

Implementing accessibility and dark mode contrast checks into CI/CD pipelines
Enforcing QA tagging standards and documentation across large-scale frontend projects
Automating regression testing for design systems and component libraries