frontend-design-review

par microsoft

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.

npx skills add https://github.com/microsoft/skills --skill frontend-design-review
Télécharger ZIPGitHub
3k
Essayer cette compétenceSponsorisé

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)

If component doesn't exist:

  1. Check if existing component can be adapted
  2. Reach out to design for new component creation
  3. Document exception and rationale in code

Review Process

  1. Identify user task
  2. Check design system for matching patterns
  3. Evaluate aesthetic direction
  4. Identify scope (component, feature, or flow)
  5. Evaluate each pillar
  6. Score and prioritize issues (blocking/major/minor)
  7. 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.

Plus de skills de microsoft

oss-growth
microsoft
Persona de growth hacker OSS
agent-framework-azure-ai-py
microsoft
Créez des agents Azure AI Foundry à l’aide du SDK Python Microsoft Agent Framework (agent-framework-azure-ai). À utiliser lors de la création d’agents persistants avec AzureAIAgentsProvider, de l’utilisation d’outils hébergés (interpréteur de code, recherche de fichiers, recherche web), de l’intégration de serveurs MCP, de la gestion de fils de conversation ou de l’implémentation de réponses en streaming. Couvre les outils de fonction, les sorties structurées et les agents multi-outils.
development
airunway-aks-setup
microsoft
Configurez AI Runway sur AKS — du cluster nu au modèle en cours d'exécution. Couvre la vérification du cluster, l'installation du contrôleur, l'évaluation GPU, la configuration du fournisseur et le premier déploiement. QUAND : « configurer AI Runway », « intégrer un cluster AKS », « installer AI Runway », « configuration airunway », « déployer un modèle sur AKS », « inférence GPU sur AKS », « configuration KAITO sur AKS », « exécuter LLM sur AKS », « vLLM sur AKS », « configurer le service de modèles sur AKS », « contrôleur AI Runway ».
devops
appinsights-instrumentation
microsoft
Guidance for instrumenting webapps with Azure Application Insights. Provides telemetry patterns, SDK setup, and configuration references. WHEN: how to instrument app, App Insights SDK, telemetry patterns, what is App Insights, Application Insights guidance, instrumentation examples, APM best practices.
devops
applicationinsights-web-ts
microsoft
Instrumentez les applications navigateur/web avec le SDK JavaScript Application Insights (@microsoft/applicationinsights-web). Utilisez-le pour la surveillance des utilisateurs réels (RUM) — vues de page, clics, dépendances AJAX/fetch, exceptions, événements personnalisés et traces d’agents GenAI côté navigateur corrélées aux traces OpenTelemetry backend. Couvre le script de chargement du SDK et la configuration npm, les extensions de framework (React, React Native, Angular), Click Analytics, les initialiseurs de télémétrie et les conventions sémantiques OTel GenAI pour les spans d’agents/outils/modèles émises depuis le navigateur.
devops
azure-ai-anomalydetector-java
microsoft
Créez des applications de détection d'anomalies avec le SDK Azure AI Anomaly Detector pour Java. Utilisez-le lors de l'implémentation de la détection d'anomalies univariées/multivariées, de l'analyse de séries temporelles ou de la surveillance basée sur l'IA.
development
azure-ai-language-conversations-py
microsoft
Implémentez la compréhension du langage conversationnel (CLU) à l’aide du SDK Python azure-ai-language-conversations. Utilisez-le lorsque vous travaillez avec ConversationAnalysisClient pour analyser l’intention et les entités d’une conversation, créer des fonctionnalités de NLP ou intégrer la compréhension du langage dans des applications.
development
azure-ai-ml-py
microsoft
SDK v2 d’Azure Machine Learning pour Python. Utiliser pour les espaces de travail ML, les tâches, les modèles, les jeux de données, le calcul et les pipelines. Déclencheurs : « azure-ai-ml », « MLClient », « espace de travail », « registre de modèles », « tâches d’entraînement », « jeux de données ».
development