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.