frontend-design-review
Review and create distinctive frontend interfaces
Developer Setup
Setup & Installation
npx skills add https://github.com/microsoft/skills --skill frontend-design-reviewnpx skills add https://github.com/microsoft/skills --skill frontend-design-reviewOverview
What This Skill Does
Reviews UI implementations against three quality pillars (Frictionless, Quality Craft, Trustworthy) and design system specs, or builds production-grade frontend interfaces from scratch with a defined aesthetic direction. Covers PR reviews, accessibility audits, design token compliance, and component reviews.
Application
When to use this Skill
- Configuring integration settings for custom agent workflows.
- Optimizing query execution and response latency in production.
- Developing clean, standard-compliant implementations for enterprise services.
- Troubleshooting connection timeouts and authentication handshakes.
- Monitoring API rate limits and execution pipelines programmatically.
Documentation
Show Skills.md file
Frontend Design Review
Review UI implementations against design quality standards and your design system OR create distinctive, production-grade frontend interfaces from scratch.
Two Modes
Mode 1: Design Review
Evaluate existing UI for design system compliance, three quality pillars (Frictionless, Quality Craft, Trustworthy), accessibility, and code quality.
Mode 2: Creative Frontend Design
Create distinctive interfaces that avoid generic "AI slop" aesthetics, have clear conceptual direction, and execute with precision.
Creative Frontend Design
Before coding, commit to an aesthetic direction:
- Purpose: What problem does this solve? Who uses it?
- Tone: minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial, etc.
- Constraints: Framework, performance, accessibility requirements.
- Differentiation: What makes this distinctive and context-appropriate?
Aesthetics Guidelines
- Typography: Distinctive fonts that elevate aesthetics. Pair a display font with a refined body font. Avoid Inter, Roboto, Arial, Space Grotesk.
Recommendations