design-review

Evaluate UI/UX designs for WCAG 2.1 accessibility and brand consistency.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/SalesTeamToolbox/frood --skill design-review-salesteamtoolbox
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/SalesTeamToolbox/frood/tree/main/skills/builtins/design-review
Command: npx skills add https://github.com/SalesTeamToolbox/frood --skill design-review-salesteamtoolbox

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps teams find and fix design quality problems—like accessibility gaps, confusing visual hierarchy, and brand inconsistencies—before users get frustrated or blocked.

Core Features & Use Cases

  • Visual hierarchy auditing: Check eye flow, contrast, whitespace, and typographic consistency to ensure information is easy to scan and understand.
  • WCAG 2.1 accessibility checks: Validate contrast ratios, color-independence, focus states, keyboard navigation, touch targets, and image alt text.
  • Brand and UX consistency review: Confirm palette, typography, spacing system adherence, tone, logo usage, and verify clarity, feedback, and error/loading states.

Quick Start

Ask the AI to review this UI for usability, WCAG 2.1 accessibility, and brand consistency, and to return feedback grouped into what works well, critical issues, improvements, and minor polish.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I check my UI design for WCAG 2.1 accessibility compliance?

To check UI design for WCAG 2.1 accessibility compliance, evaluate contrast ratios, color-independence, focus states, keyboard navigation, touch targets, and image alt text. This process identifies specific accessibility gaps and provides actionable, prioritized feedback to fix critical usability barriers before release.

What is the best way to audit visual hierarchy in a product interface?

Auditing visual hierarchy in a product interface involves checking eye flow, contrast, whitespace, and typographic consistency. This review ensures information is easy to scan and understand, returning structured feedback grouped into critical issues, improvements, and minor polish for clear prioritization.

Can I review my design system for brand consistency before release?

You can review design system brand consistency by confirming palette, typography, spacing system adherence, tone, and logo usage. This pre-release review also verifies clarity, feedback, and error or loading states to ensure the interface aligns with established brand guidelines.

How do I get actionable usability feedback instead of vague suggestions?

To get actionable usability feedback instead of vague suggestions, request a structured review that focuses on specific issues grouped by severity. The evaluation returns feedback categorized into what works well, critical issues, improvements, and minor polish for clear prioritization.

Does this design review work for responsive layouts and error states?

Yes, this design review works for responsive layouts and error states. It evaluates pre-release product interfaces for usability, error states, and responsive layouts, applying WCAG 2.1 criteria and brand consistency checks to ensure comprehensive coverage of interactive elements.

When do I need to run a usability and accessibility review on my UX?

You need to run a usability and accessibility review on your UX during pre-release stages to catch design quality problems early. This prevents user frustration by identifying accessibility gaps, confusing visual hierarchy, and brand inconsistencies before the product reaches users.