跳到正文
cccskills
Microsoft 官方免费在 GitHub 公开

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.

中文简介正在准备中。当前显示原文说明。

集成工具Figma
查看安装方法

包含的文件(5)

  • SKILL.md6.0 KB
  • references/pattern-examples.md759 B
  • references/quick-checklist.md1.5 KB
  • references/review-output-format.md2.7 KB
  • references/review-type-modifiers.md1.6 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Frontend Design Review

Review UI implementations against design quality standards and your design system OR create distinctive, production-grade frontend interfaces from scratch.

Two Modes

Mode 1: Design Review

Evaluate existing UI for design system compliance, three quality pillars (Frictionless, Quality Craft, Trustworthy), accessibility, and code quality.

Mode 2: Creative Frontend Design

Create distinctive interfaces that avoid generic "AI slop" aesthetics, have clear conceptual direction, and execute with precision.


Creative Frontend Design

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?

Aesthetics Guidelines

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

AVOID: Overused fonts, cliched color schemes, predictable layouts, cookie-cutter design without context-specific character.

Match implementation complexity to vision. Maximalist = elaborate code. Minimalist = restraint and precision.


Design Review

Design System Workflow

Before implementing:

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

Review Process

  1. Identify user task
  2. Check design system for matching patterns
  3. Evaluate aesthetic direction
  4. Identify scope (component, feature, or flow)
  5. Evaluate each pillar
  6. Score and prioritize issues (blocking/major/minor)
  7. Provide recommendations with design system examples

Core Principles

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

Quality Pillars

1. Frictionless Insight to Action

Evaluate: Task completable in ≤3 interactions? Primary action obvious and singular?

Red flags: Excessive clicks, multiple competing primary buttons, buried actions, dead ends.

2. Quality is Craft

Evaluate:

  • Design system compliance: matches Figma specs, uses design tokens
  • Aesthetic direction: distinctive typography, cohesive colors, intentional motion
  • Accessibility: Grade C minimum (WCAG 2.1 A), Grade B ideal (WCAG 2.1 AA)

Red flags: Generic AI aesthetics, hardcoded values, implementation doesn't match Figma, broken reflow, missing focus indicators.

3. Trustworthy Building

Evaluate:

  • AI transparency: disclaimer on AI-generated content
  • Error transparency: actionable error messages

Red flags: Missing AI disclaimers, opaque errors without guidance.


Review Output Format

See references/review-output-format.md for the full review template.

Review Type Modifiers

See references/review-type-modifiers.md for context-specific review focus areas (PR, Creative, Design, Accessibility).

Quick Checklist

See references/quick-checklist.md for the pre-approval checklist covering design system compliance, aesthetic quality, frictionless, quality craft, and trustworthy pillars.

Pattern Examples

See references/pattern-examples.md for good/bad examples of creative frontend and design system review work.


Acknowledgments

Creative frontend principles inspired by Anthropic's frontend-design skill. Design review principles and quality pillar framework created by @Quirinevwm for systematic UI evaluation.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

agent-framework-azure-ai-py

Microsoft 官方免费

Build Azure AI Foundry agents using the Microsoft Agent Framework Python SDK (agent-framework-azure-ai). Use when creating persistent agents with AzureAIAgentsProvider, using hosted tools (code interpreter, file search, web search), integrating MCP servers, managing conversation threads, or implementing streaming responses. Covers function tools, structured outputs, and multi-tool agents.

中文简介正在准备中。当前显示原文说明。

microsoft/skills31392026年10月22日 更新

airunway-aks-setup

Microsoft 官方免费

Set up AI Runway on AKS — from bare cluster to running model. Covers cluster verification, controller install, GPU assessment, provider setup, and first deployment. WHEN: "setup AI Runway", "onboard AKS cluster", "install AI Runway", "airunway setup", "deploy model to AKS", "GPU inference on AKS", "KAITO setup on AKS", "run LLM on AKS", "vLLM on AKS", "set up model serving on AKS", "AI Runway controller".

中文简介正在准备中。当前显示原文说明。

microsoft/skills31392026年10月22日 更新

aks-gpu-inference

Microsoft 官方免费

Diagnose Day-2 AKS GPU and KAITO incidents using profile-aware, read-only evidence. WHEN: 'Insufficient nvidia.com/gpu', GPU pod Pending, model-load OOM, DCGM/VRAM, KAITO Workspace not ready, or GPU autoscaling. DO NOT USE FOR: setup (airunway-aks-setup), non-GPU incidents (aks-troubleshooting), standalone VM quota (azure-quotas), or generic cost (cost-analysis or cost-optimization from the optional azure-cost plugin).

中文简介正在准备中。当前显示原文说明。

microsoft/skills31392026年10月22日 更新

aks-known-issues

Microsoft 官方免费

Lookup documented AKS fixes only when the prompt includes an exact catalog signature and all of its qualifiers: VMCannotFitEphemeralOSDisk; NodePoolMcVersionIncompatible; 'NodeImageVersion is not accepted'; AKS SkuNotAvailable with size, location, and zone; ZonalAllocationFailed with insufficient zone capacity; OverconstrainedAllocationRequest with listed constraints; nested AKS vmssCSE/CSE VMExtensionError_OutboundConnFail, VMExtensionError_K8SAPIServerConnFail, or VMExtensionError_K8SAPIServerDNSLookupFail; or AllocationFailed with the full cataloged internal-error or insufficient-regional-capacity message. Never use for quota errors, code-only or bare wrappers, generic symptoms, incomplete signatures, or failures outside AKS; use aks-troubleshooting or azure-diagnostics.

中文简介正在准备中。当前显示原文说明。

microsoft/skills31392026年10月22日 更新

aks-network-capture

Microsoft 官方免费

Collects bounded packet captures from AKS nodes and Azure network configuration for wire-level evidence. WHEN: "capture packets on an AKS node", "take a pcap", "run tcpdump on AKS", "prove where packets drop". Use for explicit packet-capture intent after read-only diagnostics, not general AKS connectivity or ingress troubleshooting.

中文简介正在准备中。当前显示原文说明。

microsoft/skills31392026年10月22日 更新

aks-troubleshooting

Microsoft 官方免费

Debug live Azure Kubernetes Service (AKS) incidents with a read-only, evidence-first investigation. WHEN: pod crashes or Pending, CrashLoopBackOff, OOMKilled, ImagePullBackOff, node NotReady, DNS or ingress failure, connectivity timeout, network policy, SNAT exhaustion, node-pool scaling blocked by QuotaExceeded or InsufficientVCPUQuota, upgrade stuck, spot or zone disruption, a bare VMExtensionProvisioningError or AllocationFailed wrapper, an uncataloged capacity symptom, or 'investigate my AKS cluster'. DO NOT USE FOR: packet capture (use aks-network-capture); GPU or model-serving issues (use aks-gpu-inference); cluster creation or provisioning (use azure-kubernetes); cost (use cost-analysis from the optional azure-cost plugin); pod rightsizing (use azure-kubernetes); a fully qualified documented AKS signature with every required nested qualifier (use aks-known-issues); standalone failures on non-AKS Azure resources (use azure-diagnostics). Unqualified errors and open-ended incidents stay here only for AKS.

中文简介正在准备中。当前显示原文说明。

microsoft/skills31392026年10月22日 更新

查看 microsoft 的全部技能

报告此技能的问题