validate-ui

Validates a UI implementation against its stated requirements and reports gaps and unrequested changes.

Updated Apr 9, 2026
One-click install
npx skills add https://github.com/muselesscreator/ui-skills --skill validate-ui-muselesscreator
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: validate-ui
Source: https://github.com/muselesscreator/ui-skills/tree/main/validate-ui
Command: npx skills add https://github.com/muselesscreator/ui-skills --skill validate-ui-muselesscreator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? After implementing a UI feature, it is hard to know whether the code actually does what was requested, whether edge cases like loading and error states are covered, and whether unrelated changes crept into the branch. This Skill performs a behavioral comparison of the implementation against the original spec and produces a structured verdict. ## Core Features & Use Cases - Requirements Verification: Parses the original ticket, task description, or plan output and checks each stated and implicit requirement (loading, error, empty states, accessibility) against the branch diff. - Scope Creep Detection: Flags unrequested changes such as modified shared helpers, new dependencies, or unasked-for refactors, and raises decision memos for human judgment. - Structured Verdict Report: Emits a machine-consumable validation report with PASS, FAIL, or BLOCKED verdicts, routing human-only gaps (manual visual checks) to BLOCKED instead of wasting remediation cycles. - Use Case: Before opening a PR for a new settings page, run the skill against the original Linear ticket to confirm every acceptance criterion is implemented, no unrelated files changed, and required tests exist. ## Quick Start Ask the AI to validate this feature against the original ticket or task description and report any gaps or unrequested changes.

Frequently Asked Questions about validate-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check if my UI implementation matches the requirements?

Provide the original feature request, ticket URL, or plan output as the argument. The skill extracts the stated requirements, diffs the branch against the base, and maps each requirement to the files and lines that implement it, marking gaps with a failing mark.

How does the skill detect scope creep or unrequested changes?

It diffs modified functions against the base branch and counts call sites with git grep, treating changes to shared helpers as unrequested for every caller the request never mentioned. Each finding is raised as a decision memo with keep, revert, or split options rather than settled unilaterally.

What happens when remaining gaps can only be checked manually?

When every remaining gap is a mandated manual, visual, or in-browser check with no automation surface, the verdict script emits BLOCKED instead of FAIL. This routes the work to a human on the first pass instead of spending automated remediation rounds on checks no code change can perform.

Does the validation handle large diffs?

Yes. For changes over roughly ten files or six hundred diff lines, it spawns a read-only agent that summarizes user-facing behavior per file and maps requirements to implementations. The validator then works from that summary and only opens specific files to verify uncertain requirements.

What accessibility checks are included in UI validation?

It checks for missing ARIA attributes and keyboard navigation, and for icon-only or colour-carried states it resolves the token to its hex value and computes the contrast ratio against every background, enforcing the 3:1 WCAG 1.4.11 floor.