AgentSkillsCN

ui-ux-pro-max

高端Web应用的高级UI/UX原则。无障碍、交互、性能。

SKILL.md
--- frontmatter
name: ui-ux-pro-max
description: Advanced UI/UX principles for premium web apps. Accessibility, Interaction, Performance.

UI/UX Pro Max

Standard rules for world-class user interfaces.

1. Accessibility (CRITICAL)

  • •Contrast: Minimum 4.5:1 for normal text.
  • •Touch Targets: Minimum 44x44px for buttons on mobile.
  • •Aria Labels: Required for icon-only buttons.
  • •Keyboard: Visible focus rings for all interactive elements.

2. Interaction Design

  • •Loading States: Disable buttons during async operations.
  • •Feedback: Provide immediate visual/haptic feedback on interaction.
  • •Empty States: Always design for "no data" scenarios.

3. Performance

  • •Cumulative Layout Shift (CLS): Reserve space for images and ads.
  • •Images: Use WebP/AVIF and proper sizes attribute.
  • •Animations: Use transform and opacity to avoid layout thrashing.

4. Typography

  • •Hierarchy: Clear distinction between H1, H2, and body.
  • •Readability: 16px minimum font size for mobile inputs.
  • •Line Height: 1.5 - 1.6 for body text.