ui-check-framework — community ui-check-framework, XAUUSD-Calendar-Agent, community, ide skills

v1.0.0
GitHub

About this Skill

Perfect for Frontend Agents needing automated UI testing and validation capabilities. 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 dis

yiyousiow000814 yiyousiow000814
[0]
[0]
Updated: 3/7/2026

Killer-Skills Review

Decision support comes first. Repository text comes second.

Reference-Only Page Review Score: 7/11

This page remains useful for operators, but Killer-Skills treats it as reference material instead of a primary organic landing page.

Original recommendation layer Concrete use-case guidance Explicit limitations and caution Locale and body language aligned
Review Score
7/11
Quality Score
29
Canonical Locale
en
Detected Body Locale
en

Perfect for Frontend Agents needing automated UI testing and validation capabilities. 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 dis

Core Value

Empowers agents to discover UI blocks via data-qa tags and enforce behavioral contracts, including themes, animations, loading, layout stability, modal usability, and error visibility, using protocols like data-qa and scaling to new UI components without requiring new test cases.

Ideal Agent Persona

Perfect for Frontend Agents needing automated UI testing and validation capabilities.

↓ Capabilities Granted for ui-check-framework

Automating UI self-checks for new UI components
Enforcing visual contracts for consistent theming and layout
Debugging UI issues with data-qa tag-based inspection

! Prerequisites & Limits

  • Requires existing ui-tests/ folder or scaffolding
  • Limited to UI components with data-qa tags

Why this page is reference-only

  • - The underlying skill quality score is below the review floor.

Source Boundary

The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.

After The Review

Decide The Next Action Before You Keep Reading Repository Material

Killer-Skills should not stop at opening repository instructions. It should help you decide whether to install this skill, when to cross-check against trusted collections, and when to move into workflow rollout.

Install Path

Start With Installation And Validation

If this skill is worth continuing with, the next step is to confirm the install command, CLI write path, and environment validation.
Trusted Recheck

Cross-Check Against Trusted Picks

If you are still comparing multiple skills or vendors, go back to the trusted collection before amplifying repository noise.
Workflow

Move To Workflow Collections For Team Rollout

When the goal shifts from a single skill to team handoff, approvals, and repeatable execution, move into workflow collections.
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is ui-check-framework?

Perfect for Frontend Agents needing automated UI testing and validation capabilities. 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 dis

How do I install ui-check-framework?

Run the command: npx killer-skills add yiyousiow000814/XAUUSD-Calendar-Agent. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for ui-check-framework?

Key use cases include: Automating UI self-checks for new UI components, Enforcing visual contracts for consistent theming and layout, Debugging UI issues with data-qa tag-based inspection.

Which IDEs are compatible with ui-check-framework?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for ui-check-framework?

Requires existing ui-tests/ folder or scaffolding. Limited to UI components with data-qa tags.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add yiyousiow000814/XAUUSD-Calendar-Agent. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use ui-check-framework immediately in the current project.

! Reference-Only Mode

This page remains useful for installation and reference, but Killer-Skills no longer treats it as a primary indexable landing page. Read the review above before relying on the upstream repository instructions.

Upstream Repository Material

The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.

Upstream Source

ui-check-framework

Install ui-check-framework, an AI agent skill for AI agent workflows and automation. Review the use cases, limitations, and setup path before rollout.

SKILL.md
Readonly
Upstream Repository Material
The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.
Supporting Evidence

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.

Related Skills

Looking for an alternative to ui-check-framework or another community skill for your workflow? Explore these related open-source skills.

View All

openclaw-release-maintainer

Logo of openclaw
openclaw

Your own personal AI assistant. Any OS. Any Platform. The lobster way. 🦞

★ 333.8k
⑂ 0
AI

widget-generator

Logo of f
f

Generate customizable widget plugins for the prompts.chat feed system

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

The React Framework

★ 138.4k
⑂ 0
Browser

pr-review

Logo of pytorch
pytorch

Tensors and Dynamic neural networks in Python with strong GPU acceleration

★ 98.6k
⑂ 0
Developer