Web Design & Interface Guidelines Skill

This skill provides a framework for reviewing and implementing high-quality web interfaces. It focuses on the intersection of aesthetics, usability, and technical performance.

Design Framework

1. Information Hierarchy

• F-Pattern: Align critical information and navigation along the F-shaped scanning pattern.
• Emphasis: Use font weight, scale, and color depth to guide the user's eye to the Primary Action.
• Proximity: Group related elements closely to signal relationship (Law of Proximity).

2. Form Design & Interaction

• Feedback: Provide inline validation as the user types (debounce). Use distinct "Success" and "Error" states.
• Aids: Use appropriate input types (tel, email, number) and autocomplete attributes to assist the user.
• Labels: Always use <label> tags. Never rely on placeholders alone for accessibility.

3. Interactive Feedback

• Affordance: Buttons must look clickable. Links must be distinguishable from body text.
• Stateful UI: Every interactive element must reflect its current state (Initial, Loading, Success, Error).