skills.rest
petbrains
petbrainsOFFICIAL
Explore all skills by this author →
GitHub

frontend-design-review

Review frontend UI/UX designs for accessibility and responsive behavior.

13|2|Updated Aug 9, 2025
Search Tags:#accessibility#WCAG#UI/UX#design review
One-click install
npx skills add https://github.com/petbrains/mvp-builder --skill frontend-design-review
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design-review
Source: https://github.com/petbrains/mvp-builder/tree/main/.claude/skills/frontend-design-review
Command: npx skills add https://github.com/petbrains/mvp-builder --skill frontend-design-review

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides a design review framework to assess UI/UX quality, accessibility, and consistency; outputs structured findings.

Core Features & Use Cases

  • Accessibility and WCAG validation
  • Consistency checks across components
  • Structured review reports with prioritized findings

Quick Start

Apply the design-review framework to PRs and UI changes and generate a findings report.

Frequently Asked Questions about frontend-design-review

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

FAQPage Schema
How do I validate accessibility compliance with WCAG 2.1 during UI development?▼

Design review frameworks assess UI/UX against WCAG 2.1 AA standards during development and review phases. They check color contrast, keyboard navigation, semantic markup, and screen reader compatibility, generating structured reports with prioritized accessibility findings to ensure compliance before release.

What should I check in a UI/UX design review before shipping a component?▼

A design review evaluates visual polish, responsive behavior across devices, consistent component standards, interaction patterns, and accessibility compliance. It produces prioritized findings addressing gaps in consistency, layout stability, and WCAG adherence so you ship polished, accessible work.

Can I use design review to validate responsive layouts across different screen sizes?▼

Yes. Design reviews validate responsive behavior and layout consistency across breakpoints and devices. They verify that components adapt correctly, maintain visual hierarchy, and remain accessible on mobile, tablet, and desktop, with findings organized by priority.

How do I ensure UI components meet design system standards?▼

Design reviews check component consistency against design system elements and interaction patterns. The framework compares implementations against standards and flags deviations, ensuring uniformity across your UI before merge or release.

What's included in a structured design review report?▼

Reports contain prioritized findings organized by category: accessibility gaps, responsive issues, consistency violations, and visual polish problems. Each finding details the location, severity, and impact, enabling teams to address critical issues first.

Related Skills

Explore More Design & Creative Skills→
bergsidebergside
2.3k

energetic

Define energetic design-system tokens, component states, and WCAG 2.2 AA focus rules.

Official
Intermediate
busboom-software-studiobusboom-software-studio
1

project-status

Analyze SE artifacts and tickets to generate a structured project status report.

Official
Intermediate
webdriveriowebdriverio
11

Frontend Components

Enforce frontend component coding standards across web UI projects.

Official
Basic
OlatisunkanmiOlatisunkanmi
8

i-audit

Automate UI audits for accessibility, performance, theming, and responsive-design gaps.

Community
Advanced