skills.rest
511avolo-dot
511avolo-dotCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design-review

Evaluate frontend UI implementations for design system compliance and accessibility.

Updated May 4, 2026
Search Tags:#accessibility#design-system#design-review#frontend-design#component-review#ui-code-review#quality-craft
One-click install
npx skills add https://github.com/511avolo-dot/MR --skill frontend-design-review-511avolo-dot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design-review
Source: https://github.com/511avolo-dot/MR/tree/main/.agents/skills/frontend-design-review
Command: npx skills add https://github.com/511avolo-dot/MR --skill frontend-design-review-511avolo-dot

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Review and create distinctive, production-grade frontend interfaces with high design quality and design system compliance. Evaluates using three pillars: frictionless insight-to-action, quality craft, and trustworthy building. USE FOR: PR reviews, design reviews, accessibility audits, design system compliance checks, creative frontend design, UI code review, component reviews, responsive design checks, theme testing, and creating memorable UI. DO NOT USE FOR: Backend API reviews, database schema reviews, infrastructure or DevOps work, pure business logic without UI, or non-frontend code.

Core Features & Use Cases

  • Two Modes:
    • Mode 1: Design Review — Evaluate existing UI for design system compliance, accessibility and craft quality.
    • Mode 2: Creative Frontend Design — Create distinctive interfaces with a specific aesthetic direction and precise execution.
  • Design System Workflow — guidance before implementing, during review, and documenting deviations.
  • Pillar-focused evaluation — Frictionless Insight to Action, Quality is Craft, Trustworthy Building.

Quick Start

Review the attached frontend project for design-system conformance, accessibility, and UI quality, and provide a prioritized feedback 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 review frontend UI for design system compliance and accessibility?▼

Automate PR design reviews by evaluating frontend UI implementations against design system compliance, design tokens, and accessibility checks, providing a prioritized feedback report focused on quality craft and frictionless insight-to-action.

What is a UI code review for design systems?▼

A UI code review for design systems evaluates frontend component implementations against design tokens, accessibility standards, and production-grade craftsmanship using a structured review workflow across three pillars: frictionless insight-to-action, quality craft, and trustworthy building.

Can I use this to create distinctive frontend designs with specific aesthetics?▼

Yes, you can use the Creative Frontend Design mode to create distinctive interfaces with a specific aesthetic direction and precise execution, ensuring high design quality and design system compliance.

Does this design review work for backend API or database schema reviews?▼

No, this design review does not work for backend API reviews, database schema reviews, infrastructure, DevOps work, or pure business logic without UI, as it is strictly scoped to frontend UI implementations.

When do I need an accessibility audit for frontend components?▼

You need an accessibility audit for frontend components when evaluating UI implementations for design system compliance and high-quality craftsmanship, specifically within the Trustworthy Building pillar using accessibility checks.

Related Skills

Explore More Design & Creative Skills→
RemseyMailjardRemseyMailjard

frontend-design-review

Review UI implementations against design tokens and Figma specs.

Community
Advanced
rachel353rachel353

ux-insight-matcher

Extract and merge UX design insights into prioritized guidance for frontend tasks.

Community
Advanced
petbrainspetbrains
13

frontend-design-review

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

Official
Basic
thecomputer07thecomputer07

qsd-ui-review

Audit frontend code with a 6-pillar UI evaluation and generate UI-REVIEW.md.

Community
Advanced