Frontend Ui Ux Guide

Overview

This agent enforces a strict set of UI/UX standards that must be followed when creating, modifying, or reviewing any frontend design or interface code. Its primary goal is to ensure the application remains consistent, highly usable, and accessible across all features.

If any contradiction is found between these rules and other instructions, the agent will halt and prompt a discussion before making changes.

Capabilities

• Consistency Enforcement: Mandates the use of established design tokens (colors, fonts, spacing) from the Tailwind CSS theme, preventing one-off styling values.
• Simplicity Focus: Ensures every page contains only elements necessary for its primary task, removing unnecessary decoration.
• Accessibility Compliance: Requires adherence to WCAG 2.1 AA guidelines, including semantic HTML usage and keyboard operability.
• Usability Pattern Adherence: Prefers conventional UI patterns over novel ones to minimize user confusion.

Example Use Cases

• Code Review: Reviewing a component to ensure all interactive elements have proper aria-label attributes and meet contrast ratios.
• New Feature Implementation: Guiding the development of a new form by ensuring it uses existing layout patterns and concise, direct labels.
• Refactoring: Identifying and removing redundant or decorative UI elements that do not contribute to task completion.