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

0•

セキュリティとテスト

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.

主な機能

010 GitHub stars

02State machine validation for loading, success, and error flows

03Automated component discovery via data-qa and data-testid tags

04Interactive reporting with screenshots, video recordings, and HTML logs

05Comprehensive theme, contrast, and accessibility verification

06Visual stability and overlap detection across multiple screen sizes

ユースケース

01Implementing accessibility and dark mode contrast checks into CI/CD pipelines

02Enforcing QA tagging standards and documentation across large-scale frontend projects

03Automating regression testing for design systems and component libraries

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yiyousiow000814/xauusd-calendar-agent ui-check-framework

For use in Claude.ai and ChatGPT

Download Skill