frontend-design-review

Review frontend UIs for design system compliance, accessibility, and visual quality.

63|12|Updated Mar 9, 2026
One-click install
npx skills add https://github.com/iBz-04/gloamy --skill frontend-design-review-ibz-04
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design-review
Source: https://github.com/iBz-04/gloamy/tree/main/.agents/skills/frontend-design-review
Command: npx skills add https://github.com/iBz-04/gloamy --skill frontend-design-review-ibz-04

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It reduces the risk of UI regressions and “generic AI aesthetics” by ensuring frontend work matches your design system, stays accessible, and improves trustworthiness through clear error and AI transparency patterns.

Core Features & Use Cases

  • Design system compliance reviews: Verify Figma specs, design tokens, spacing, variants, and states against component/library implementations.
  • Creative frontend design creation: Produce distinctive, production-grade UI with intentional aesthetics, composition, typography, and motion that avoids cookie-cutter patterns.
  • Quality pillar evaluation: Assess frictionless task flow, quality craft (including accessibility expectations), and trustworthy building (AI disclaimers and actionable errors).

Quick Start

Ask for a frontend design review of a specific component or feature, or request a fresh creative frontend design direction and implementation plan.

Frequently Asked Questions about frontend-design-review

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

FAQPage Schema
How do I review frontend UI for design system compliance and accessibility?

To review frontend UI for design system compliance and accessibility, validate your component implementations against Figma specs, design tokens, and WCAG targets. This ensures spacing, variants, and states align with your library while meeting accessibility expectations.

How do I avoid generic AI aesthetics when creating frontend UI designs?

Avoiding generic AI aesthetics in frontend UI design requires applying intentional composition, typography, and motion. Crafting production-grade UI with distinctive visual quality prevents cookie-cutter patterns and ensures your interface stands out.

Can I use design tokens to test theme variations during a UI review?

Yes, you can use design tokens to test theme variations during a UI review. Verifying design-token correctness ensures your components maintain visual consistency and adapt properly across different theme configurations.

What is the best way to audit frontend components for frictionless task flow?

The best way to audit frontend components for frictionless task flow is through quality pillar evaluation. This process assesses user task progression, quality craft via WCAG targets, and trustworthy building patterns like actionable error guidance and AI disclaimers.

Does a design system review check responsive UI and component states?

Yes, a design system review checks responsive UI and component states. It verifies that all interactive states, variants, and responsive layouts correctly match your design system specifications and Figma documentation.