tpo-ux-ui-guidelines

Review product interfaces against UX principles, accessibility rules, and acceptance checklists.

Updated Mar 22, 2026
One-click install
npx skills add https://github.com/TECH-HY/SKILLS --skill tpo-ux-ui-guidelines-tech-hy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tpo-ux-ui-guidelines
Source: https://github.com/TECH-HY/SKILLS/tree/main/skills/tpo-ux-ui-guidelines
Command: npx skills add https://github.com/TECH-HY/SKILLS --skill tpo-ux-ui-guidelines-tech-hy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Product owners and reviewers often lack a consistent, objective standard for judging whether a screen, flow, or design is ready for development or release, leading to subjective feedback and missed usability or accessibility issues. ## Core Features & Use Cases - Twelve UX Principles: Covers user goals, system status visibility, error prevention, consistency, cognitive load, accessibility, responsive design, and performance as review criteria. - Screen Acceptance Checklist: Defines concrete conditions a screen must satisfy before being accepted, including states, validation, navigation, and accessibility basics. - Structured Review Output: Produces a standardized UX/UI review report with verdict, critical issues, accessibility checks, responsive checks, and a final routing decision. - Use Case: When reviewing a Figma design or an AI-generated dashboard, apply this guideline to produce a verdict of Accepted, Accepted with minor fixes, or Rejected, with actionable fixes for the developer or designer agent. ## Quick Start Review this checkout form design against the UX/UI guidelines and return a structured verdict with critical issues and accessibility checks.

Frequently Asked Questions about tpo-ux-ui-guidelines

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

FAQPage Schema
How do I review a UI design before development starts?

Review the design against the twelve UX principles covering user goals, system status, error prevention, and accessibility. Then apply the screen acceptance checklist and return a structured verdict with critical issues and required fixes.

What should a UX/UI review report include?

A review report should include a verdict, summary, what works well, critical issues with required fixes, minor improvements, accessibility checks, responsive checks, and a final decision routing the work back to a developer or designer.

What accessibility checks are required for interface acceptance?

Minimum checks include keyboard navigation, visible focus states, sufficient color contrast, labeled form inputs, accessible button names, error messages linked to fields, and semantic HTML. These align with WCAG 2.2 guidance.

When should a UI design be rejected instead of accepted with fixes?

Reject a design when it is unclear, overloaded, disconnected from the user's task, or missing required states like loading, empty, and error. Visually attractive designs that fail the user goal check must be rejected.

Does this guideline apply to AI-generated UI code?

Yes, the guideline explicitly covers reviewing AI-generated UI, Figma designs, screenshots, and frontend implementations. The same acceptance checklist and review output format apply regardless of how the interface was produced.