frontend-design-review

Review Figma/Sketch assets for UI/UX quality, design-system alignment, and WCAG 2.1 AA compliance.

14|11|Updated Dec 1, 2025
One-click install
npx skills add https://github.com/DauQuangThanh/hanoi-rainbow --skill frontend-design-review-dauquangthanh
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design-review
Source: https://github.com/DauQuangThanh/hanoi-rainbow/tree/main/skills/frontend-design-review
Command: npx skills add https://github.com/DauQuangThanh/hanoi-rainbow --skill frontend-design-review-dauquangthanh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Frontend teams need structured, in-depth evaluations of UI/UX quality, design-system alignment, accessibility, and responsive patterns to ensure high-quality releases and consistent design language.

Core Features & Use Cases

  • Comprehensive UI/UX quality assessment across screens and journeys.
  • Design system validation including tokens, component patterns, and governance checks.
  • Accessibility auditing aligned with WCAG 2.1 AA standards and keyboard/navigation checks.
  • Responsive design evaluation with breakpoint strategy, mobile-first considerations, and performance impact.
  • Actionable findings with severity ratings, practical remediation steps, and documentation guidance.

Quick Start

Issue a frontend design review by feeding in the latest Figma/Sketch assets and component libraries, and request a follow-up report with prioritized fixes.

Frequently Asked Questions about frontend-design-review

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

FAQPage Schema
What is a frontend design review and what problems does it solve?

A frontend design review identifies UI/UX quality gaps, design-system deviations, and accessibility issues. It solves inconsistent design language by validating tokens, ensuring WCAG 2.1 AA compliance, and delivering actionable recommendations with severity ratings.

How do I audit UI/UX quality and design-system tokens across multiple screens?

Feed your Figma or Sketch assets and component libraries into a review process to audit UI/UX quality and tokens. This validates component patterns, checks design-system governance, and generates structured findings with prioritized fixes and documentation guidance.

Can I check WCAG 2.1 AA compliance and keyboard navigation using Figma assets?

Yes, you can check WCAG 2.1 AA compliance and keyboard navigation from Figma assets. The review process audits interaction patterns across journeys, identifies accessibility issues, and provides practical remediation steps for governance-ready reports.

Does this frontend design review evaluate responsive design and breakpoint strategy?

Yes, the frontend design review evaluates responsive design and breakpoint strategy. It assesses mobile-first considerations, identifies responsive inconsistencies across screens, and analyzes performance impact to ensure high-quality releases.

What is the best way to prioritize UI fixes after a design system validation?

The best way to prioritize UI fixes after design system validation is using generated reports with severity ratings. These reports provide practical remediation steps and documentation guidance, enabling teams to address critical accessibility and responsive inconsistencies first.