frontend-design-review

Solid

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.

Web & Frontend 2,429 stars 272 forks Updated 2 days ago MIT

Install

View on GitHub

Quality Score: 96/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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. - **Color & Theme**: Cohesive palette with CSS variables. Dominant colors + sharp accents > timid, evenly-distributed palettes. - **Motion**: CSS-only preferred. One well-orchestrated page load with staggered reveals > scattered micro-interactions. - **Spatial Composition**: Asymmetry, overlap, diagonal flow, grid-breaking elements, generous neg...

Details

Author
microsoft
Repository
microsoft/skills
Created
4 months ago
Last Updated
2 days ago
Language
TypeScript
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category