Localized reading guide

frontend-design-reviewPurpose, usage and source

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.

Source retrieved: 2026-10-29

Source repository: microsoft/skills
SKILL.md: .github/skills/frontend-design-review/SKILL.md
Repository stars: 3,157
Repository updated: 2026-10-31
Categories: Development
Last collected: 2026-10-31 10:38 UTC+08:00

License: MIT

Source SKILL.md

Workflow excerpts are reading aids, not executable instructions from Codez. No third-party Skill was run to produce this page.

The purpose and workflow passages below are upstream material, organized and translated for reading. They are distinct from the separately labeled Codez editorial analysis.

What this Skill does

How the upstream workflow works

Design System Workflow

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 Compare implementation to Figma design

Upstream passage · L54 ↗

Review Process

Identify user task Check design system for matching patterns Evaluate aesthetic direction Identify scope (component, feature, or flow)

Upstream passage · L72 ↗

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.

Upstream passage · L82 ↗

Requirements and setup

No short requirements passage was selected from this file. This does not mean the Skill has no dependencies. Check the repository setup instructions and referenced files.

Limits and quality checks

2. Quality is Craft

Design system compliance: matches Figma specs, uses design tokens Aesthetic direction: distinctive typography, cohesive colors, intentional motion

Upstream passage · L99 ↗

Start with a safe trial

Check the supported host and the repository installation instructions. Keep the Skill directory and its referenced scripts, assets and documentation together; SKILL.md alone may omit dependencies.
Give the agent your real input, desired output and acceptance criteria. Invocation syntax and available tools depend on the host; this site does not assume a universal install command.
Try the source workflow in a disposable project or on a copy. Review operations that change files, remote services or billable resources before allowing them.
Validate the output against the source quality checks and your own requirements. A successful trigger or a high repository Star count does not establish a correct result.

Skill format and directory specification ↗

Read further in the source

Translation and scope

This reading guide selects passages from the pinned upstream SKILL.md. Translation is assisted. It is not a complete manual or a claim of tested compatibility. Read the original and its referenced files before use.

This introduction refers to the pinned version below; current repository activity and collection time are shown separately.

Pinned source: Read the original ↗
Source retrieved: 2026-10-29T09:32:23Z
Source commit: 00d66a64919edca5bca2c673373444e36a4b5461
Source SHA-256: 639b68cdc6f9b4cdd66a111851555afee2eb82d4de37bf9cbad3be845bb00c2d

Back to the full Skill catalog