All SkillsGet Started Free
Frontend Design Review
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.
MCP get_skill({ skillId: "frontend-design-review-d00f5fa1" })Use this skill with your agent
Create a free account and connect via MCP
# 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 negative space OR controlled density. - **Backgrounds**: Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays. **AVOID**: Overused fonts, cliched color schemes, predictable layouts, cookie-cutter design without context-specific character. Match implementation complexity to vision. Maximalist = elaborate code. Minimalist = restraint and precision. --- ## Design Review ### Design System Workflow **Before implementing:** 1. Review component in your Storybook / component library for API and usage 2. Use Figma Dev Mode to get exact specs (spacing, tokens, properties) 3. Implement using design system components + design tokens **During review:** 1. Compare implementation to Figma design 2. Verify design tokens are used (not hardcoded values) 3. Check all variants/states are implemented correctly 4. Flag deviations (needs design approval)
#broad-capability#development#setup#azure#microsoft-foundry#documentation#cloud#design#review