mcpField
U
ui-check-framework

ui-check-framework

github.com/yiyousiow000814Testing & quality041 installsUpdated 15w ago
Repository

About ui-check-framework

UI Check Framework is a skill for building or refining automated UI self-checks around data-qa tags. It uses generic behavioral and visual contracts to validate interface components without requiring a new test case for every addition.

Key features

  1. 01Discover tagged UI elements
  2. 02Capture component screenshots
  3. 03Check theme and motion behavior
  4. 04Validate async loading states
  5. 05Report artifacts and test results

Use cases

  1. 01Add automated checks for new UI components
  2. 02Verify modal usability at small heights
  3. 03Detect layout shifts and hidden errors

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/yiyousiow000814/xauusd-calendar-agent --skill ui-check-framework

After installing, type/ui-check-frameworkin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
contracts.md
qa-tagging.md
workflow.md

Details

From the project README

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.

Comments

Markdown supported