Frontend Design Review
Review or create production-ready frontend interfaces with stronger usability, craft, accessibility, and visual character.
The skill only guides frontend design review and interface creation; there is no credential theft, covert exfiltration, destructive default, or clearly disproportionate permission. However, it does not define sensitive-design-data handling, Figma/Storybook data flows, confirmation for external collaboration, rollback boundaries, or dependency security, so 7 points are deducted. The repository MIT license and verified Microsoft provenance support governance and attribution only.
The main document, checklist, output template, and review modifiers are broadly consistent and cover review, accessibility, and error feedback. However, the workflow depends on Figma, Storybook, screen readers, and project context without skill-specific tests, abnormal-input handling, or diagnosable behavior when dependencies are unavailable. Under static calibration it cannot exceed 10, so 13 points are deducted.
The description clearly identifies applicable scenarios and excludes backend, database, infrastructure, and pure-business-logic work, while separating review and creative modes. Inputs, trigger precision, output variants, and non-fit boundaries remain coarse, with no Chinese workflow or mainland-China network guidance, so 5 points are deducted.
Information is layered into modes, principles, workflows, pillars, output format, and reference material, with checklists, examples, and an MIT license. Installation/dependency notes, versioning, changelog, maintenance ownership, update path, troubleshooting, and concrete reference links are largely absent or placeholders, so 7 points are deducted.
The output template, quality pillars, and checklists can support a basic frontend design review and produce a usable report draft. However, the creative-design output contract is unclear, Figma/component-library verification depends on external context, and there is no representative-output or comparative-benefit evidence. Under static calibration it cannot exceed 7, so 10 points are deducted.
The documentation supplies auditable checklists, criteria, and internal references that permit limited source review. It lacks skill-specific tests, fixed input/output fixtures, third-party execution evidence, and cross-source corroboration; nothing was executed in this review. Therefore only 3 points are awarded and 7 are deducted.
- Creative mode lacks a precise input contract, file-change scope, delivery format, and acceptance criteria.
- Figma, Storybook, component libraries, and design collaboration are assumed available, with no fallback or diagnostic path when inaccessible.
- Accessibility requirements use “Grade C/Grade B” rather than a fully defined standard, which may produce inconsistent judgments.
- There is no guidance for Chinese interfaces, Chinese fonts, RTL/localization, or mainland-China network fit.
- Several Figma, design-system, and link fields in the output template are placeholders and require manual completion.
What does this skill do, and when should you use it?
This Agent Skill supports both frontend design review and creative interface creation. It evaluates interfaces through three pillars: frictionless insight-to-action, quality craft, and trustworthy building. Reviews cover design-system alignment, Figma specifications, design tokens, component states, responsive behavior, accessibility, and transparency around AI content and errors. It is intended for frontend and UI work, not backend, database, infrastructure, DevOps, or business logic without a UI.
It reviews an existing UI's user task, action hierarchy, navigation, design-system alignment, Figma fidelity, token usage, component variants and states, responsive reflow, focus indicators, WCAG 2.1 accessibility, AI-generated-content disclaimers, and actionable error messages. For new interfaces, it helps establish the purpose, audience, tone, constraints, and differentiation, then guides typography, color, motion, spatial composition, and background treatment. A review identifies scope, evaluates the three pillars, prioritizes findings as blocking, major, or minor, and provides recommendations.
- A frontend engineer wants a PR review focused on design-system compliance, Figma fidelity, and accessibility.
- A product designer needs to assess whether a page has a clear primary action and supports efficient task completion.
- A team is preparing a feature release and wants to check responsive reflow, focus states, error guidance, and AI transparency.
- A developer is starting a frontend from scratch and wants a distinctive visual direction instead of a generic interface.
- A component maintainer needs to verify that Storybook or the component library's APIs, variants, and usage patterns are followed.
What are this skill's strengths and limitations?
- Provides both a design-review mode and a creative frontend-design mode.
- Combines task completion, visual craft, trust, and accessibility in one review framework.
- Clearly states intended and excluded use cases.
- Covers concrete review signals such as tokens, Figma specifications, component states, and error transparency.
- The skill does not provide a framework-specific implementation or automated inspection tool.
- The referenced review template, review modifiers, checklist, and pattern examples are not included in the supplied material.
- Figma, Storybook, and component-library workflows assume those environments already exist; connection and permission setup are undocumented.
- There is no evidence that the skill includes an independent test suite or automated WCAG scanner.
How do you install this skill?
Run npx skills add microsoft/skills in the project and select the needed skill in the wizard. Skills are installed into the selected agent's directory, such as .github/skills/ for GitHub Copilot, and can be symlinked when multiple agents share them. The source does not provide a dedicated command for installing only frontend-design-review.
How do you use this skill?
With the skill installed, give the agent a concrete frontend request such as: “Review this React page for design-system compliance, WCAG 2.1 AA, responsive reflow, focus states, and AI-content transparency.” For creation, ask: “Design a production-grade editorial dashboard; first define its purpose, users, visual tone, and implementation constraints.” The full review template is referenced at references/review-output-format.md, but its contents are not included in the source material.
How does this skill compare with similar options?
The source only states that its creative frontend guidance was inspired by Anthropic's frontend-design skill; it does not provide a complete comparison of capabilities, scope, or implementation.