@yiyousiow000814/ui-check-framework

---
name: ui-check-framework
description: Build or extend an extensible UI self-check framework for Web UIs (React/Vite or plain HTML) using Playwright. Use when asked to add/upgrade ui-check or ui-watch flows, enforce data-qa/data-testid discovery, add theme/contrast checks, animation verification, loading state-machine checks, layout stability/overlap checks, modal scroll rules, or to document QA tagging standards and UI testing commands.
---

# UI Check Framework

## Overview

Create or refine an automated UI self-check system that discovers UI blocks via data-qa
tags and enforces behavioral/visual contracts (themes, animations, loading, layout
stability, modal usability, error visibility). The framework must scale to new cards,
modals, toasts, and actions without writing new test cases each time.

## Workflow (use in order)

1) **Inspect existing scaffolding**
   - Prefer reusing the project's `ui-tests/` folder if it exists.
   - Read `ui-tests/docs/UI_TESTING.md` and `ui-tests/docs/QA_TAGGING.md` if present.
   - Confirm scripts in root `package.json` (`ui:test`, `ui:update-baseline`,
     `ui:report`, `ui:check`, `ui:watch`) point at Playwright flows.

2) **Enforce discovery**
   - Auto-collect all `data-qa` or `data-testid` elements that start with `qa:`.
   - Capture component screenshots (cards, modals, menus, toolbars, toasts) at
     small/medium/large sizes.
   - For modals: verify internal scroll, single close button, and header visibility
     at small window height.

3) **Enforce contracts (generic, not hardcoded)**
   - Theme contrast/readability for dark/light/system (see references).
   - Animation/motion checks for spinners, transitions, toasts.
   - Loading state machine for async actions: idle -> loading -> success/error -> idle.
   - Layout stability (no layout shift for transient status/toasts).
   - Overlap detection for action buttons and modal header/footer.
   - Error visibility and blank-page detection.

4) **Wire UI hooks for automation**
   - Add minimal `window.__ui_check__` helpers (e.g., append log, trigger toast) to
     make contracts testable without hardcoding selectors.
   - Add required `data-qa` tags to new cards/modals/actions as they appear.

5) **Artifacts and reporting**
   - Store artifacts under `artifacts/ui-check/` (snapshots, frames, video, report.html).
   - Ensure `ui:check` is interactive (open/close modal, hover/press, theme toggle, scroll).

## Project-specific anchors

- Primary UI tests live in `ui-tests/` and use Playwright.
- Use `ui-tests/scripts/ui-check.mjs` and `ui-tests/scripts/ui-watch.mjs` as the
  interactive validation entry points.
- Keep user-facing docs in `ui-tests/docs/UI_TESTING.md` and
  `ui-tests/docs/QA_TAGGING.md`.

## References

- `references/workflow.md` - extension workflow and verification checklist.
- `references/qa-tagging.md` - required QA tokens and naming conventions.
- `references/contracts.md` - required generic contracts and how to check them.