skills.rest
RemseyMailjard
RemseyMailjardCOMMUNITY
Explore all skills by this author β†’
Website𝕏@remseymailjardGitHub

frontend-design-review

Review UI implementations against design tokens and Figma specs.

Updated Mar 26, 2026
Search Tags:#accessibility#frontend#tokens#design-system#design-review#ui-quality
One-click install
npx skills add https://github.com/RemseyMailjard/superpowers --skill frontend-design-review-remseymailjard
Or copy as Structured Prompt for Agentβ–Ό
Please help me install this Agent Skill.
Skill: frontend-design-review
Source: https://github.com/RemseyMailjard/superpowers/tree/main/.github/skills/skills/frontend-design-review
Command: npx skills add https://github.com/RemseyMailjard/superpowers --skill frontend-design-review-remseymailjard

SYSTEM DOCUMENTATION & REQUIREMENTS

πŸ’‘ This Skill includes references (resource) components.

What problem does it solve?

Review UI implementations against design quality standards and your design system to ensure consistency, accessibility, and maintainable frontend code.

Core Features & Use Cases

  • Two Modes: Design Review and Creative Frontend Design to assess existing UI and craft distinctive, production-grade frontend interfaces.
  • Design System Workflow: verify components against tokens, typography, spacing, accessibility, and design-system guidelines.
  • Review Process: identify deviations, document rationale, and propose design-system-aligned improvements.

Quick Start

Audit a new frontend feature by running a design review against your design system guidelines in your repository.

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 code for design system compliance during a pull request?β–Ό

Review frontend code for design system compliance by checking component implementations against design tokens, typography, spacing, and accessibility guidelines. This process identifies deviations and proposes design-system-aligned improvements during PR reviews.

What is a UI design review and how does it enforce accessibility standards?β–Ό

A UI design review evaluates frontend implementations against design quality standards to ensure accessibility. It applies a tri-pillar framework verifying frictionless insight, quality craft, and trustworthy building to produce a structured, compliant assessment.

Can I audit frontend components against Figma specs and design tokens?β–Ό

Yes, you can audit frontend components by verifying their alignment with Figma specs and design tokens. The review process identifies deviations from these specifications and documents the rationale for proposed design-system-aligned improvements.

How do I run a design audit on existing frontend implementations?β–Ό

Run a design audit on existing frontend implementations by assessing the UI against your design system guidelines. The review identifies deviations from quality standards, documents the rationale, and proposes improvements to ensure maintainable frontend code.

Does the frontend design review process work for both auditing and crafting new UI?β–Ό

Yes, the frontend design review process operates in two modes: Design Review to assess existing UI and Creative Frontend Design to craft distinctive, production-grade frontend interfaces. Both modes enforce design-system guidelines and quality standards.

What design quality standards are enforced during a frontend code review?β–Ό

Design quality standards enforced during a frontend code review include a tri-pillar framework focusing on frictionless insight to action, quality craft, and trustworthy building. This verifies component alignment with design tokens and accessibility requirements.

Related Skills

Explore More Design & Creative Skills→
zmsqnfl-commitszmsqnfl-commits
1

designer

Generate design system token JSON, component specs, and motion guidelines.

Community
Advanced
PouriaRouzrokhPouriaRouzrokh

frontend-design

Define and implement production-grade frontend interfaces with typography, color tokens, spacing, and accessibility.

Community
Advanced
davidrrowleydavidrrowley

frontend-design-review

Review frontend interfaces for design quality and WCAG accessibility compliance.

Community
Intermediate
aresbitaresbit
46

web-design-guidelines

Analyze frontend UI implementations against Web Interface Guidelines and output file:line findings.

Community
Intermediate