AgentSkillsCN

web-design-guidelines

审查UI代码是否符合Web界面指南。当被要求“审查我的UI”、“检查可访问性”、“审计设计”、“审查UX”或“按最佳实践检查我的站点”时使用。

SKILL.md
--- frontmatter
name: web-design-guidelines
description: Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
metadata:
  author: vercel
  version: "2.0.0"
  argument-hint: <file-or-pattern>

Web Interface Guidelines

Review files for compliance with Web Interface Guidelines and Apple Human Interface Guidelines.

How It Works

  1. •Read the relevant guideline references for the review type
  2. •Read the specified files (or prompt user for files/pattern)
  3. •Check against all applicable rules
  4. •Output findings in the terse file:line format

Guidelines Sources

Vercel Web Interface Guidelines

Fetch fresh guidelines before each review:

code
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.

Apple Human Interface Guidelines

Reference the local HIG guideline files in the references/ directory for platform-specific design patterns. Each reference includes links to the official Apple HIG documentation.

Reference Documents

The following Human Interface Guidelines references are available:

ReferenceDescriptionApple HIG Link
AccessibilityWCAG compliance, screen readers, keyboard navigationHIG: Accessibility
ColorSemantic colors, contrast, data visualizationHIG: Color
Dark ModeAppearance modes, surface elevation, adaptationHIG: Dark Mode
IconsIcon sizing, accessibility, animationHIG: SF Symbols
LayoutSpacing, grids, responsive designHIG: Layout
MotionAnimation timing, easing, reduced motionHIG: Motion
TypographyType scale, hierarchy, scientific typographyHIG: Typography

Usage

When a user provides a file or pattern argument:

  1. •Fetch Vercel guidelines from the source URL above
  2. •Read the relevant HIG reference files from references/
  3. •Read the specified files
  4. •Apply all rules from both guideline sources
  5. •Output findings using the format specified in the guidelines

Review Types

General UI Review - Use all references:

  • •Accessibility, Color, Dark Mode, Icons, Layout, Motion, Typography

Accessibility Audit - Focus on:

  • •Accessibility reference
  • •Color reference (contrast requirements)
  • •Typography reference (legibility)

Design System Review - Focus on:

  • •Color reference
  • •Typography reference
  • •Icons reference

Animation Review - Focus on:

  • •Motion reference
  • •Accessibility reference (reduced motion)

Responsive/Layout Review - Focus on:

  • •Layout reference
  • •Typography reference (responsive scaling)

If no files specified, ask the user which files to review.

Apple HIG Quick Links

Core guidelines from Apple Human Interface Guidelines: