frontend-design-review

Review and create frontend interfaces against design system compliance and quality pillars.

Updated May 5, 2026
One-click install
npx skills add https://github.com/UlaYuga/promo-preflight --skill frontend-design-review-ulayuga
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design-review
Source: https://github.com/UlaYuga/promo-preflight/tree/main/.agents/skills/frontend-design-review
Command: npx skills add https://github.com/UlaYuga/promo-preflight --skill frontend-design-review-ulayuga

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? UI work often ships with inconsistent design system usage, generic aesthetics, accessibility gaps, or unclear user flows, and teams lack a repeatable rubric to evaluate frontend quality before merge. ## Core Features & Use Cases - Design Review Mode: Evaluate existing UI against design system compliance (Figma specs, design tokens, component variants), three quality pillars (Frictionless, Quality Craft, Trustworthy), and accessibility grades. - Creative Frontend Mode: Create distinctive interfaces with committed aesthetic direction covering typography, color, motion, spatial composition, and backgrounds while avoiding generic patterns. - Structured Review Output: Produce scored reviews with blocking/major/minor issues, pillar status tables, and prioritized recommendations using the provided output template. - Use Case: During a PR review of a new dashboard component, run a design review to verify design token usage, keyboard navigation, and action hierarchy, then return a pass/needs-work verdict with concrete fixes. ## Quick Start Review this UI component implementation for design system compliance, accessibility, and the three quality pillars, then give me a scored verdict with prioritized issues.

Frequently Asked Questions about frontend-design-review

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

FAQPage Schema
How are review issues prioritized in the output?▼

Issues are classified as blocking (must fix before merge), major (should fix), or minor (refinement). Each issue includes the affected pillar or design system area plus a recommendation with references.