Can it generate UI from scratch?

Yes, it features a Creative Mode that builds distinctive, production-grade interfaces by defining clear aesthetic directions like brutalist, minimal, or editorial.

Does it support accessibility testing?

Yes, it evaluates components against WCAG 2.1 standards, identifying red flags like missing focus indicators or broken reflow.

Is it useful for backend code?

No, this skill is specifically optimized for frontend interfaces and UI/UX logic; it should not be used for API, database, or infrastructure reviews.

How does this skill help with design systems?

It checks code against your specific design tokens, Storybook components, and Figma specs to ensure consistency and prevent hardcoded values.

Frontend Design Review & Creator

Name: Frontend Design Review & Creator
Author: microsoft

bymicrosoft

•

1,816

•

Herramientas de Diseño

Reviews and builds production-grade frontend interfaces focused on design system compliance, accessibility, and high-quality craft.

This skill empowers developers to bridge the gap between design and implementation by providing comprehensive UI reviews and creative frontend generation. It evaluates code against three core pillars—Frictionless Insight-to-Action, Quality Craft, and Trustworthy Building—ensuring that interfaces are not only functional but also aesthetically distinctive and accessible. Whether auditing existing pull requests for design system compliance or generating unique, non-generic UI components from scratch, this skill automates the nuance of high-end frontend development and helps maintain a professional aesthetic standard.

Características Principales

01Comprehensive UI reviews based on Frictionless, Quality Craft, and Trustworthy pillars

02Automated design system compliance checks using tokens and Storybook integration

03Creative frontend generation that avoids 'AI slop' through distinctive typography and spatial composition

04Deep Figma integration for verifying implementation against design specifications

051,816 GitHub stars

06Accessibility auditing (WCAG 2.1) to ensure inclusive user experiences

Casos de Uso

01Generating distinctive, high-end landing pages or dashboards with custom aesthetic directions

02Automating design reviews during the PR process to ensure Figma spec and token compliance

03Performing accessibility audits and design token verification for existing component libraries

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microsoft/skills frontend-design-review

For use in Claude.ai and ChatGPT

Download Skill