ui-check-framework — community ui-check-framework, XAUUSD-Calendar-Agent, community, ide skills, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

About this Skill

Perfect for Frontend Agents needing automated UI testing and validation via data-qa tags. XAUUSD Calendar Agent

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

Agent Capability Analysis

The ui-check-framework skill by yiyousiow000814 is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance.

Ideal Agent Persona

Perfect for Frontend Agents needing automated UI testing and validation via data-qa tags.

Core Value

Empowers agents to enforce behavioral and visual contracts, including themes, animations, and layout stability, using a scalable UI self-check system that integrates with existing ui-tests folders and supports protocols like data-qa tagging.

↓ Capabilities Granted for ui-check-framework

Automating UI block discovery via data-qa tags
Validating modal usability and error visibility across different cards and toasts
Debugging layout instability issues in new and existing UI components

! Prerequisites & Limits

  • Requires existing ui-tests folder or scaffolding for optimal reuse
  • Limited to UI components with data-qa tags for automated discovery
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

ui-check-framework

Install ui-check-framework, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

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.

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 via data-qa tags. XAUUSD Calendar Agent

How do I install ui-check-framework?

Run the command: npx killer-skills add yiyousiow000814/XAUUSD-Calendar-Agent/ui-check-framework. 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 block discovery via data-qa tags, Validating modal usability and error visibility across different cards and toasts, Debugging layout instability issues in new and existing UI components.

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 for optimal reuse. Limited to UI components with data-qa tags for automated discovery.

↓ 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/ui-check-framework. 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.

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

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

★ 138.4k
⑂ 0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI