What is the frontend-design-review skill?
The frontend-design-review skill is a SKILL.md in Microsoft's microsoft/skills repository. It works in two modes. Design Review scores an existing interface on frictionless insight to action, quality craft and trustworthy building. Creative Frontend Design commits to an aesthetic direction first, then builds a distinctive UI.
Its SKILL.md opens with two modes: Design Review, which evaluates existing UI, and Creative Frontend Design, which builds interfaces that avoid generic AI aesthetics and carry a clear conceptual direction.
It sits in the Core group of Microsoft's skills repository, a collection aimed at coding agents working with Azure SDKs and Foundry. The review framework itself is credited in the file to an outside author, @Quirinevwm.
What changes in your agent's output
- Reviews follow a fixed seven step process: identify the user task, check the design system, evaluate aesthetic direction, set scope, evaluate each pillar, score issues, then recommend fixes.
- Issues are scored as blocking, major or minor.
- Deviations from Figma specs and hardcoded values are flagged instead of waved through.
- In creative mode the agent states a purpose, tone, constraints and differentiation before it writes any code.
The three quality pillars
- Frictionless insight to action: can the task finish in three interactions or fewer, and is the primary action obvious and singular?
- Quality is craft: design system compliance, aesthetic direction and accessibility. Grade C (WCAG 2.1 A) is the minimum and Grade B (WCAG 2.1 AA) is ideal.
- Trustworthy building: a disclaimer on AI-generated content and error messages that tell people what to do next.
Who the frontend-design-review skill is for
Best for
- Pull request and component reviews in a team that keeps a design system, Storybook and Figma specs.
- Creating a landing page or app screen with a stated tone, such as brutalist, editorial or luxury, rather than a default look. See also anti-ui-slop.
- Checking accessibility, responsive behavior and theme testing alongside design quality in one pass. For a second reviewer, try web-design-reviewer.
Not for
- Backend API reviews, database schema reviews, infrastructure work or business logic with no UI. The skill lists these as excluded.
- Pure business logic without UI or other non frontend code. See also accessibility-audit.
Use it with UiChemy
The skill outputs code and review notes. UiChemy Figma to WordPress converts a Figma design, and UiChemy Composer is an AI visual editor that writes real HTML, CSS and JS inside Elementor or Gutenberg. Click Get Started on uichemy.com. See also frontend-design.
How to install Frontend Design Review Skill: Review and Create UI
git clone https://github.com/microsoft/skills.gitClone the repository
Run
git clone https://github.com/microsoft/skills.git. The README's quick start uses an npx wizard, so this page uses the manual route the README also documents.Copy only this skill
Copy
.github/skills/frontend-design-reviewfrom the clone into.github/skills/in your project. The README warns that loading every skill causes context rot, so copy only what you need.Share with other agents
If you use more than one agent in the same repo, the README suggests symlinks, for example
ln -s ../.github/skills .claude/skillsfor Claude Code or.opencode/skillsfor OpenCode.
Check that it loaded
Ask your agent to review a component against your design system. With the skill loaded it should walk the three pillars and label each issue blocking, major or minor, or, when creating a new screen, commit to an aesthetic direction before coding.
Key features
- Two modes in one skillDesign Review evaluates existing UI for design system compliance, the three pillars, accessibility and code quality. Creative Frontend Design builds distinctive interfaces from scratch.
- Commit before codingCreative mode asks the agent to settle four things first: purpose, tone, constraints and differentiation. Tone examples include minimal, maximalist, retro-futuristic, luxury, editorial, brutalist and art deco.
- Typography and color rulesPair a display font with a refined body font and avoid Inter, Roboto, Arial and Space Grotesk. Build a cohesive palette with CSS variables, using dominant colors and sharp accents.
- Motion, space and backgroundsPrefer CSS-only motion with one orchestrated page load and staggered reveals. Use asymmetry, overlap and negative space, with textures such as gradient meshes, noise and grain overlays.
- Design system workflowCheck the component in Storybook for API and usage, take exact specs from Figma Dev Mode, implement with design tokens, then flag deviations and document any exception in code.
- Seven step review processFrom identifying the user task through scoring issues as blocking, major or minor to recommending fixes with design system examples.
- Core principlesMinimum clicks, one or two primary actions per view with progressive disclosure for the rest, smart defaults over configuration, and back or cancel always available.
- Accessibility gradingQuality craft sets Grade C (WCAG 2.1 A) as the floor and Grade B (WCAG 2.1 AA) as the goal, and treats missing focus indicators and broken reflow as red flags.
- Trust checksThe agent looks for an AI disclaimer on generated content and for actionable error messages, flagging opaque errors that give no guidance.
- Reference filesFour files sit beside SKILL.md: a quick checklist, pattern examples, a review output format, and review type modifiers for PR, Creative, Design and Accessibility reviews.
Frequently asked questions
What is the frontend-design-review skill?
It is a SKILL.md in the microsoft/skills repository that reviews UI implementations against design quality standards or creates distinctive frontend interfaces. It scores work on three pillars: frictionless insight to action, quality craft and trustworthy building.
How do I install the frontend-design-review skill?
Clone the repository with git, then copy the .github/skills/frontend-design-review folder into your own project's .github/skills/ directory. The README's wizard command is not used here. Copy only the skills you need, since loading many dilutes the agent's attention.
What are the two modes?
Design Review checks existing UI for design system compliance, the three pillars, accessibility and code quality. Creative Frontend Design starts with a committed aesthetic direction and builds something distinctive. Name the task, such as reviewing a pull request or creating a memorable interface, since the skill description covers both.
How does it score issues?
The review process ends by scoring and prioritizing issues as blocking, major or minor, then giving recommendations with design system examples. A reference file defines the review output format, so findings arrive in a consistent template instead of freeform commentary.
Does it work with Claude Code, Cursor or Codex?
The README says skills install to your chosen agent's directory, naming .github/skills/ for GitHub Copilot, and shows symlinks for Claude Code and OpenCode. It does not list Cursor or Codex, so copy the folder wherever your agent loads skills.
What accessibility level does it expect?
Under the quality craft pillar, Grade C, which is WCAG 2.1 A, is the minimum and Grade B, which is WCAG 2.1 AA, is ideal. Missing focus indicators and broken reflow are named red flags. The skill description also lists accessibility audits among its uses.
What does it not cover?
The skill excludes backend API reviews, database schema reviews, infrastructure or DevOps work, pure business logic without UI, and non-frontend code. It is built for component reviews, PR reviews, design system checks and creative frontend work.