AgentSkillsCN

ui-check-framework

使用 Playwright 构建或扩展适用于 Web UI（React/Vite 或纯 HTML）的可扩展 UI 自检框架。在被要求添加/升级 ui-check 或 ui-watch 流程、强制 data-qa/data-testid 发现、添加主题/对比度检查、动画验证、加载状态机检查、布局稳定性/重叠检查、模态滚动规则，或记录 QA 标记标准和 UI 测试命令时使用。

SKILL.md
--- frontmatter
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.