microsoft/frontend-design-review
.github/skills/frontend-design-review/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add microsoft/skills frontend-design-reviewInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
4 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
4
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Mar 23, 2026, 2:27 AM78.5s5 files scanned
SKILL.md
- name:
- frontend-design-review
- description:
- >
- 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,
- DO NOT USE FOR:
- Backend API reviews, database schema reviews, infrastructure or DevOps work, pure business logic
- acknowledgments:
- |
- Design review principles and quality pillar framework created by @Quirinevwm (https:
- //github.com/Quirinevwm).
- (https:
- //github.com/anthropics/skills/tree/main/skills/frontend-design). Licensed under respective terms.
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:
- Review component in your Storybook / component library for API and usage
- Use Figma Dev Mode to get exact specs (spacing, tokens, properties)
- Implement using design system components + design tokens
During review:
- Compare implementation to Figma design
- Verify design tokens are used (not hardcoded values)
- Check all variants/states are implemented correctly
- Flag deviations (needs design approval)
If component doesn't exist:
- Check if existing component can be adapted
- Reach out to design for new component creation
- Document exception and rationale in code
Review Process
- Identify user task
- Check design system for matching patterns
- Evaluate aesthetic direction
- Identify scope (component, feature, or flow)
- Evaluate each pillar
- Score and prioritize issues (blocking/major/minor)
- Provide recommendations with design system examples
Core Principles
- Task completion: Minimum clicks. Every screen answers "What can I do?" and "What happens next?"
- Action hierarchy: 1-2 primary actions per view. Progressive disclosure for secondary.
- Onboarding: Explain features on introduction. Smart defaults over configuration.
- Navigation: Clear entry/exit points. Back/cancel always available. Breadcrumbs for deep flows.
Quality Pillars
1. Frictionless Insight to Action
Evaluate: Task completable in ≤3 interactions? Primary action obvious and singular?
Red flags: Excessive clicks, multiple competing primary buttons, buried actions, dead ends.
2. Quality is Craft
Evaluate:
- Design system compliance: matches Figma specs, uses design tokens
- Aesthetic direction: distinctive typography, cohesive colors, intentional motion
- Accessibility: Grade C minimum (WCAG 2.1 A), Grade B ideal (WCAG 2.1 AA)
Red flags: Generic AI aesthetics, hardcoded values, implementation doesn't match Figma, broken reflow, missing focus indicators.
3. Trustworthy Building
Evaluate:
- AI transparency: disclaimer on AI-generated content
- Error transparency: actionable error messages
Red flags: Missing AI disclaimers, opaque errors without guidance.
Review Output Format
See references/review-output-format.md for the full review template.
Review Type Modifiers
See references/review-type-modifiers.md for context-specific review focus areas (PR, Creative, Design, Accessibility).
Quick Checklist
See references/quick-checklist.md for the pre-approval checklist covering design system compliance, aesthetic quality, frictionless, quality craft, and trustworthy pillars.
Pattern Examples
See references/pattern-examples.md for good/bad examples of creative frontend and design system review work.
Acknowledgments
Creative frontend principles inspired by Anthropic's frontend-design skill. Design review principles and quality pillar framework created by @Quirinevwm for systematic UI evaluation.
Related Skills
microsoft/kql
tools
VerifiedTrustedOfficial
KQL language expertise for writing correct, efficient Kusto Query Language queries. Covers syntax gotchas, join patterns, dynamic types, datetime pitfalls, regex patterns, serialization, memory management, result-size discipline, and advanced functions (geo, vector, graph). USE THIS SKILL whenever writing, debugging, or reviewing KQL queries — even simple ones — because the gotchas section prevents the most common errors that waste tool calls and cause expensive retry cascades. Trigger on: KQL, Kusto, ADX, Azure Data Explorer, Fabric Real-Time Intelligence, EventHouse, Log Analytics, log analysis, data exploration, time series, anomaly detection, summarize, where clause, join, extend, project, let statement, parse operator, extract function, any mention of pipe-forward query syntax.
2,074SKILL.mdUpdated Apr 15, 2026
microsoft/microsoft-foundry
development
VerifiedTrustedOfficial
Deploy, evaluate, and manage Foundry agents end-to-end: Docker build, ACR push, hosted/prompt agent create, container start, batch eval, prompt optimization, prompt optimizer workflows, agent.yaml, dataset curation from traces. USE FOR: deploy agent to Foundry, hosted agent, create agent, invoke agent, evaluate agent, run batch eval, optimize prompt, improve prompt, prompt optimization, prompt optimizer, improve agent instructions, optimize agent instructions, optimize system prompt, deploy model, Foundry project, RBAC, role assignment, permissions, quota, capacity, region, troubleshoot agent, deployment failure, create dataset from traces, dataset versioning, eval trending, create AI Services, Cognitive Services, create Foundry resource, provision resource, knowledge index, agent monitoring, customize deployment, onboard, availability. DO NOT USE FOR: Azure Functions, App Service, general Azure deploy (use azure-deploy), general Azure prep (use azure-prepare).
2,074SKILL.mdUpdated Mar 22, 2026
microsoft/azure-validate
testing
VerifiedTrustedOfficial
Pre-deployment validation for Azure readiness. Run deep checks on configuration, infrastructure (Bicep or Terraform), RBAC role assignments, managed identity permissions, and prerequisites before deploying. WHEN: validate my app, check deployment readiness, run preflight checks, verify configuration, check if ready to deploy, validate azure.yaml, validate Bicep, test before deploying, troubleshoot deployment errors, validate Azure Functions, validate function app, validate serverless deployment, verify RBAC roles, check role assignments, review managed identity permissions, what-if analysis, validate Container Apps deployment.
2,074SKILL.mdUpdated Mar 22, 2026
microsoft/azure-quotas
testing
VerifiedTrustedOfficial
Check/manage Azure quotas and usage across providers. For deployment planning, capacity validation, region selection. WHEN: "check quotas", "service limits", "current usage", "request quota increase", "quota exceeded", "validate capacity", "regional availability", "provisioning limits", "vCPU limit", "how many vCPUs available in my subscription".
2,074SKILL.mdUpdated Mar 22, 2026