本文へ移動
cccskills
無料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.

インストール方法を見る

含まれるファイル(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(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

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/skills3,1072026年10月13日 更新

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/skills3,1072026年10月13日 更新

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/skills3,1072026年10月13日 更新

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/skills3,1072026年10月13日 更新

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/skills3,1072026年10月13日 更新

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/skills3,1072026年10月13日 更新

microsoft のスキルをすべて見る

このスキルの問題を報告する