skills.rest
HellKaiser45
HellKaiser45COMMUNITY
Explore all skills by this author →
GitHub

frontend-design-review

Analyze UI implementations against design system tokens and accessibility guidelines.

Updated Feb 4, 2026
Search Tags:#accessibility#frontend#design-system#design-review#ui-audit#component-review
One-click install
npx skills add https://github.com/HellKaiser45/Podlet --skill frontend-design-review-hellkaiser45
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design-review
Source: https://github.com/HellKaiser45/Podlet/tree/main/.podlet/skills/frontend-design-review
Command: npx skills add https://github.com/HellKaiser45/Podlet --skill frontend-design-review-hellkaiser45

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 help teams deliver distinctive, production-grade frontend interfaces.

Core Features & Use Cases

  • Mode 1: Design Review — evaluate existing UI for design system compliance, accessibility, and craftsmanship.
  • Mode 2: Creative Frontend Design — create distinctive interfaces with a strong aesthetic direction while following tokens and guidelines.
  • Use Case: PR reviews, design audits, accessibility checks, and component design reviews across web applications.

Quick Start

Run a quick UI design-system assessment on a new component to identify gaps and discrepancies.

Frequently Asked Questions about frontend-design-review

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

FAQPage Schema
How do I automate a UI audit for design system compliance in a PR review?▼

A UI audit for design system compliance evaluates component implementations against design tokens and Figma specs. It analyzes PR reviews to identify visual language discrepancies and ensure accessible interfaces.

What is a design review for frontend components and when do I need it?▼

A design review for frontend components evaluates existing UI craftsmanship and accessibility guideline adherence. You need it during design audits and component reviews to maintain consistent visual language.

Can I use design tokens to check accessibility guidelines during a frontend design task?▼

Yes, referencing design tokens and accessibility guidelines drives deterministic outcomes during frontend design tasks. The analysis applies established design patterns to ensure accessible interfaces.

What is the best way to evaluate UI implementations against Figma specs?▼

The best way to evaluate UI implementations against Figma specs is analyzing them against design quality standards. This design review mode assesses design system compliance and overall interface craftsmanship.

Do I need references to design system tokens before reviewing a component?▼

Yes, you must provide references to design system tokens, accessibility guidelines, and established design patterns. These references are required to drive deterministic outcomes and ensure consistent visual language.

What are the limitations of running a design review without established design patterns?▼

Running a design review without established design patterns prevents deterministic outcomes. The analysis requires references to design tokens and accessibility guidelines to effectively identify gaps and discrepancies.

Related Skills

Explore More Design & Creative Skills→
Ayub-KhanAyub-Khan

ui-ux-design

Define scalable UI/UX design systems with tokens for Figma handoff.

Community
Intermediate
TheSoftwareHouseTheSoftwareHouse
282

frontend-implementation

Implement accessible UI components using design tokens and semantic HTML.

Official
Advanced
murphytruemanmurphytrueman
155

cicd-integration

Generate CI/CD pipeline configurations for design system quality checks.

Community
Advanced
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced