Frontend Design Review

tl;dr: a two-mode Microsoft skill — Design Review (audit an existing UI against design-system, accessibility, and three named quality pillars) and Creative Frontend Design (commit to an aesthetic direction and ship something that does not look like AI slop). The pillars — Frictionless, Quality Craft, Trustworthy — give the agent a non-vibes scoring rubric. The creative half explicitly bans overused fonts (Inter, Roboto, Arial, Space Grotesk) and cliched palettes.

What it actually does

Fetched 2026-09-10 from microsoft/skills/main/.github/skills/frontend-design-review/SKILL.md. One of 11 Core skills in the Microsoft bundle. The SKILL.md opens with an explicit “USE FOR / DO NOT USE FOR” frame, then walks both modes. Detail lives in references/review-output-format.md, references/review-type-modifiers.md, references/quick-checklist.md, and references/pattern-examples.md (referenced, not bundled inline — same pattern as the other Core skills in the bundle).

Mode 1: Design Review

A structured audit of an existing UI. The agent is told to:

1. Identify the user task — what is the human trying to do on this surface?
2. Check the design system for matching patterns before designing anything new
3. Evaluate aesthetic direction — distinctive typography, cohesive colors, intentional motion
4. Identify scope — component, feature, or flow
5. Evaluate each pillar (Frictionless / Quality Craft / Trustworthy — see below)
6. Score and prioritize — blocking / major / minor
7. Provide recommendations with design-system examples

The three pillars:

Mode 2: Creative Frontend Design

Build something new from scratch. The skill is explicit: commit to an aesthetic direction before writing code. The five commitments:

1. Purpose — what problem does this solve? Who uses it?
2. Tone — minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial
3. Constraints — framework, performance, accessibility requirements
4. Differentiation — what makes this distinctive and context-appropriate?

Then the agent applies four aesthetic guidelines (verbatim from SKILL.md):

• Typography — distinctive fonts that elevate the surface. 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.

Match implementation complexity to vision: maximalist = elaborate code; minimalist = restraint and precision.

Design system workflow

The skill documents how the agent should work when a design system exists:

Before implementing:

1. Review the component in 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 an existing component can be adapted
2. Reach out to design for new component creation
3. Document the exception and rationale in code

Core principles (Design Review mode)

• 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.

Review output format

The skill references references/review-output-format.md for the full review template. Per-criterion scoring is structured (Frictionless / Quality Craft / Trustworthy + accessibility + design-system compliance), with findings tagged blocking / major / minor.

Install

microsoft/skills is a plugin bundle. The README documents npx skills add microsoft/skills:

# Wizard — picks which of the 175 skills to install into your agent's skills directory
npx skills add microsoft/skills

Manual fallback (from the README):

git clone https://github.com/microsoft/skills.git
cp -r .github/skills/frontend-design-review your-project/.github/skills/
# Multi-host: symlink into .claude/skills/ or .opencode/skills/ if your host watches those paths
ln -s ../.github/skills .claude/skills
ln -s ../.github/skills .opencode/skills

Targets GitHub Copilot CLI / VS Code Copilot by default. For Claude Code, also symlink ~/.claude/skills/ so the host picks it up.

The skill is instructions only — no runtime SDK to install. The agent reads SKILL.md and the four references/*.md files when triggered.

Quick start (Creative mode prompt shape)

The skill is told to commit to the direction up-front. An example prompt that triggers Creative mode:

Build a landing page for an analytics product. Tone: editorial / brutalist hybrid. Constraint: React + Tailwind, Lighthouse perf ≥ 90. Differentiation: data viz is the hero — the page should feel like a print magazine spread rendered in CSS.

What the skill does next: pick a non-banned display font (Fraunces / Editorial New / IBM Plex Serif / Söhne if licensed), build a dominant palette with one accent, orchestrate one well-timed page-load animation, then code with deliberate asymmetry.

Quick start (Review mode prompt shape)

Review this PR: . Surface scope: settings page, “Appearance” tab. Output: per-pillar scores + a blocking / major / minor list with file:line references.

What the skill does: ask for the Figma frame if missing, walk the four steps (purpose → design-system check → aesthetic → pillars), score each pillar, output in references/review-output-format.md shape.

What it explicitly is not

• Not a backend, DB, or DevOps review. Frontmatter DO NOT USE FOR lists those out.
• Not pure business logic without UI. If the diff has no rendered surface, this is the wrong skill.
• Not a one-shot UI generator that ignores design tokens. Mode 1 (Review) requires design-system grounding; the agent should not invent components.
• Not a substitute for a human designer. The skill is a structured critique and a constraint harness. Pair with a real review from a designer before shipping.
• Not compatible with non-frontend code. The skill name is the contract.

Gotchas

• The Creative mode anti-pattern list is the point. SKILL.md names Inter, Roboto, Arial, Space Grotesk as fonts to avoid. If the agent still defaults to them, the skill is not loaded.
• Accessibility floor is WCAG 2.1 A (Grade C). WCAG 2.1 AA (Grade B) is the target. Anything below C is a blocking finding.
• One skill at a time. README: “Loading all skills causes context rot.” frontend-design-review is broad on its own (two modes × four reference files).
• Reference files are referenced, not bundled inline. SKILL.md points to ./references/review-output-format.md, ./references/review-type-modifiers.md, ./references/quick-checklist.md, ./references/pattern-examples.md. If the host can’t reach the cloned repo path, the agent has the pillar list and anti-patterns — but the long review templates stop at the inline summary.
• The skill is in active development. README header: “Work in Progress — this repository is under active development.” Expect upstream edits.
• Acknowledgments field names Anthropic’s frontend-design skill as inspiration. Creative frontend guidance tracks Anthropic’s open-source frontend-design skill; the design-review framework (three pillars + review workflow) is original to @Quirinevwm.
• Pair with a UI audit skill for net-new surfaces. frontend-design-review covers creation + review; for a pure critique of an existing surface, refactoring-ui-audit is a more focused 8-pass checklist.
• sandbox_test untested — we read SKILL.md and the upstream README, we did not run a review in the sandbox. Per config/skill-safety.md, this verdict does not change until a human runs the eval-vs-prompt harness.

References (per SKILL.md)

• references/review-output-format.md — full review template (per-pillar scoring, blocking/major/minor)
• references/review-type-modifiers.md — context-specific review focus (PR, Creative, Design, Accessibility)
• references/quick-checklist.md — pre-approval checklist covering design-system compliance + aesthetic quality + three pillars
• references/pattern-examples.md — good/bad examples of creative frontend and design-system review work
• Anthropic’s frontend-design skill (acknowledged inspiration): https://github.com/anthropics/skills/tree/main/skills/frontend-design

Related

• Refactoring UI Audit — same shelf; a focused 8-pass audit (hierarchy, layout, typography, color, depth, images, finishing touches, personality) for net-new critique
• Frontend Design (Anthropic) — same shelf; the upstream Anthropic skill this one credits for creative-frontend guidance
• UI Skills Catalog — same shelf; the broader index of UI/design skills
• Vercel Web Design Guidelines — same shelf; Vercel’s design rules, complementary checklist for web surfaces