web-design-guidelines

Web Design Guidelines

Part of Agent Skills™ by googleadsagent.ai™

Description

Web Design Guidelines encodes 100+ rules covering accessibility, focus states, forms, animation, typography, images, performance, navigation, dark mode, touch targets, and internationalization. The agent applies these rules when generating UI code, reviewing designs, or building new pages, producing interfaces that are accessible, performant, and visually consistent by default.

These guidelines synthesize WCAG 2.2 AA requirements, platform-specific HIG conventions, and empirically validated UX patterns into a single actionable ruleset. Rather than treating accessibility as an afterthought or a compliance checkbox, these rules embed it into the generation process: every component is keyboard-navigable, every image has alt text, every color combination meets contrast ratios, and every interactive element has visible focus indicators.

The rules extend beyond accessibility into comprehensive design quality: responsive typography scales, motion preferences, form validation patterns, image optimization, navigation hierarchy, dark mode implementation, touch-friendly sizing, and RTL/i18n support. The result is production-grade UI code that works for all users across all contexts.

Use When

• Generating new UI components or pages
• Reviewing frontend code for accessibility compliance
• Implementing dark mode or theme switching
• Building forms with validation
• Adding animations or transitions
• Optimizing images and media
• Supporting internationalization or RTL layouts

How It Works

graph TD
    A[UI Code Generation] --> B[Apply Rule Categories]
    B --> C[Accessibility: WCAG 2.2 AA]
    B --> D[Focus States: Visible + Logical]
    B --> E[Forms: Validation + Labels]
    B --> F[Animation: prefers-reduced-motion]
    B --> G[Typography: Fluid Scale]
    B --> H[Images: Responsive + Alt Text]
    B --> I[Performance: Lazy Load + CLS]
    B --> J[Navigation: Keyboard + Hierarchy]
    B --> K[Dark Mode: System Preference]
    B --> L[Touch: 44px Min Target]
    B --> M[i18n: RTL + Locale]
    C --> N[Validated UI Output]
    D --> N
    E --> N
    F --> N
    G --> N
    H --> N
    I --> N
    J --> N
    K --> N
    L --> N
    M --> N