AgentSkillsCN

web-design-guidelines

按照 Web 界面指南要求,对 UI 代码进行合规性审查。当被要求“审查我的 UI”、“检查无障碍性”、“进行设计审计”、“评估用户体验”或“对照最佳实践检查我的网站”时,均可使用此技能。

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

Web Interface Guidelines

Review files for compliance with Web Interface Guidelines.

Guidelines Source

Fetch fresh guidelines before each review: https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

Rule Categories

  1. Visual Hierarchy: Clear focal points and consistent spacing.
  2. Accessibility: WCAG compliance, keyboard navigation, screen reader support.
  3. Responsive Design: Fluid layouts and adaptive components.
  4. Interaction: Meaningful hover effects and interactive states.
  5. Typography: Legible hierarchy and modern typefaces.
  6. Form Design: Clear labels and validation states.

Usage

When asked to review UI or design:

  1. Identify target files.
  2. Check against accessibility standards.
  3. Verify visual consistency with "Liquid Glass" theme (if applicable).
  4. Provide feedback in file:line format.