skills.rest
jason23452
jason23452COMMUNITY
Explore all skills by this author →
GitHub

frontend-design-review

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

Updated Jun 28, 2026
Search Tags:#accessibility#frontend#design system#ui review#wcag#design review#responsive
One-click install
npx skills add https://github.com/jason23452/my-skill --skill frontend-design-review-jason23452
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design-review
Source: https://github.com/jason23452/my-skill/tree/main/flow/frontend-design-review
Command: npx skills add https://github.com/jason23452/my-skill --skill frontend-design-review-jason23452

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Frontend UI work often ships with generic aesthetics, design system deviations, accessibility gaps, and unclear action hierarchies that only surface late in review. This Skill provides a structured review framework with quality pillars, scoring gates, and repair contracts so UI implementations are evaluated consistently before merge. ## Core Features & Use Cases - Design Review Mode: Evaluate existing UI against design system compliance, three quality pillars (Frictionless, Quality Craft, Trustworthy), accessibility standards, and code quality. - Creative Frontend Mode: Create distinctive interfaces with a committed aesthetic direction, avoiding generic AI-generated visual patterns. - Screenshot Score Gate: Score desktop, tablet, and mobile screenshots across weighted dimensions with an 88/100 pass threshold. - Use Case: During a PR review of a new dashboard, run the full option/scene × viewport matrix, produce a structured issue inventory with severity and repair requirements, and hand off a complete repair batch before re-review. ## Quick Start Review this frontend pull request for design system compliance, accessibility, and responsive behavior across desktop and mobile viewports.

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?▼

Compare the implementation against Figma specs using Dev Mode, verify design tokens are used instead of hardcoded values, and check that all component variants and states match the design system. Document any deviations with rationale and design approval.

What criteria should a frontend design review cover?▼

Cover three quality pillars: Frictionless (task completion in minimal interactions with a clear primary action), Quality Craft (design system compliance, distinctive aesthetics, WCAG accessibility), and Trustworthy (AI content disclaimers and actionable error messages).

How do I avoid generic AI-generated UI aesthetics?▼

Commit to an explicit aesthetic direction before coding: define purpose, tone, constraints, and differentiation. Use distinctive typography, cohesive CSS variable palettes, intentional motion, and spatial composition rather than default fonts and uniform card grids.

Does this review process support accessibility audits?▼

Yes, the accessibility audit modifier focuses on the Quality Craft pillar with keyboard testing, screen reader testing (NVDA, JAWS, Narrator), contrast ratio checks, and ARIA pattern verification. Grade C (WCAG 2.1 A) is the minimum bar, Grade B (AA) is ideal.

When should I not use a frontend design review skill?▼

Do not use it for framework scaffolding, API client work, E2E test setup, backend API reviews, database schema reviews, infrastructure, DevOps, or pure business logic without UI impact. It targets visible UI quality only.

What is the screenshot score gate for UI approval?▼

Inspect desktop, tablet, and mobile screenshots and score eight dimensions with weights 15/15/15/10/10/10/15/10. Approval requires at least 88/100, with hierarchy, composition, task focus, and responsive each scoring 8 or higher and no hard blockers.

Related Skills

Explore More Design & Creative Skills→
CristoVenturesCristoVentures
2

design-implementation-reviewer

Compare live frontend implementations to Figma designs and generate discrepancy reports.

Official
Advanced
aroidoaroido

subagent-pr-reviewer

Automate GitHub Pull Request reviews with parallel subagents for architecture, code quality, and requirements.

Official
Advanced
montoyaedumontoyaedu

visual-review

Capture web page screenshots with Playwright for visual QA evidence.

Community
Intermediate
ForgePlanForgePlan
3

canvas-storybook-test

Automate Storybook story testing against design specifications with Vitest, axe-core, and Chromatic.

Official
Advanced