skilld
All skills
microsoft avatar

/frontend-design-review

@cbfd1b6
by microsoftmicrosoft/skills3.1k stars
351

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.

Ask your Agent

Use this Skill: https://skilld.dev/gh/microsoft/skills/frontend-design-review

This session only. Nothing lands on disk.

referencesreview-type-modifiers.md

≈411 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Review Type Modifiers

Adjust focus based on review context:

PR Review

  • Focus: Code implementation, design system component usage, design token usage, accessibility in code
  • Check: Proper imports, design tokens used (not hardcoded), ARIA attributes present
  • Verify: Component matches Figma specs using Dev Mode

Creative Frontend Review

  • Focus: Aesthetic direction, typography choices, visual distinctiveness, motion design
  • Check: Clear conceptual intent, avoiding generic AI patterns, cohesive execution
  • Verify: Implementation complexity matches vision (maximalist needs elaborate code, minimalist needs precision)

Design Review

  • Focus: User flows, interaction patterns, visual hierarchy, navigation, design system alignment
  • Check: Task completion path, action hierarchy, progressive disclosure
  • Verify: All components exist in design system or have documented exceptions

Accessibility Audit

  • Focus: Deep dive Quality Craft pillar
  • Check: Keyboard testing, screen reader testing, contrast ratios, ARIA patterns
  • Test with: Screen readers (NVDA, JAWS, Narrator), keyboard only, 200% zoom
  • Verify: Design system accessibility features are properly implemented

Design System Compliance Audit

  • Focus: Deep dive design system usage
  • Check: All components match Figma specs, design tokens used throughout, no hardcoded values
  • Test: Compare implementation side-by-side with Figma using Dev Mode
  • Verify: Component variants, spacing, colors, typography all match design system
  • Document: Any deviations with rationale and plan to align

Source: SKILL.md on GitHub

Third-party checks

No alerts16d5 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    This skill provides a comprehensive framework for frontend design reviews, focusing on design system compliance, quality pillars, and aesthetic excellence. It includes structured templates for evaluation and creative guidance. No security issues were identified during the analysis.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • Runlayer7mo

    2/5 files flagged

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at cbfd1b6. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 19 hours ago.

Activeupdated 7 months ago

Capability

Other metadata
acknowledgments
Design review principles and quality pillar framework created by @Quirinevwm (https://github.com/Quirinevwm). Creative frontend guidance inspired by Anthropic's frontend-design skill (https://github.com/anthropics/skills/tree/main/skills/frontend-design). Licensed under respective terms.

README badge

README badge for microsoft/skills/frontend-design-review