frontend-design-review
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.
Target: Design & content creation. Automatically collected · unverified.
Excerpt from the author’s documentation
Extracted from a fixed version of SKILL.md in its original language. This is the author’s documentation; installation, compatibility and runtime results have not been verified by this site.
Read the original English text
Topics in the source
- Frontend Design Review
- Two Modes
- Mode 1: Design Review
- Mode 2: Creative Frontend Design
- Creative Frontend Design
- Aesthetics Guidelines
- Design Review
- Design System Workflow
Review UI implementations against design quality standards and your design system OR create distinctive, production-grade frontend interfaces from scratch. Evaluate existing UI for design system compliance, three quality pillars (Frictionless, Quality Craft, Trustworthy), accessibility, and code quality. Create distinctive interfaces that avoid generic "AI slop" aesthetics, have clear conceptual direction, and execute with precision. -- Before coding, commit to an aesthetic direction: Purpose: What problem does this solve? Who uses it? Tone: minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial, etc. Constraints: Framework, performance, accessibility requirements. Differentiation: What makes this distinctive and context-appropriate? Typography: Distinctive fonts that elevate aesthetics. 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 C
This is an excerpt. Refer to the complete source and its current requirements.
- Source repository
- microsoft/skills
- Source file
- .github/skills/frontend-design-review/SKILL.md
- Fixed revision
- 18e05b845d43e869b5701d796abce6e9a49e57db
Requirements
- Only the author’s Skill metadata is included. Read the full instructions to check dependencies, licensing and conditions of use.
A small first task
先阅读原作者说明，再决定是否在自己的 AI 工具中使用。
Instructions for your AI tool
- Claude Desktop: resource-specific guide not available yet
- Claude Code: resource-specific guide not available yet
- Cursor: resource-specific guide not available yet
- Codex: resource-specific guide not available yet
Author documentation is not live verification by this site. Without evidence, we do not mark a resource as compatible, safe or free.
Sources and evidence
This record was collected automatically. Its documentation, suitability and runtime behavior have not been manually verified.
Author: Microsoft Skills · original repository metadata. Documentation review: Not reviewed. Last source check: 2026-11-10T00:00:24.938Z.
Categories are inferred from names, descriptions and paths. They do not establish compatibility.
License and attribution
MIT. Third-party content and copyright remain with their authors. Refer to the original license and terms.
Original license ↗Synchronization, copying and user-reported success do not mark a resource as runtime-tested.
Limitations and notes
- Collecting metadata does not mean this site has installed, adapted, runtime-tested or security-reviewed the resource.