frontend-design

Use this agent when UI-related code has been written or modified to ensure adherence to the project's design system and component standards. Specifically invoke this agent: - After implementing any new UI components or pages - When modifying existing UI elements or layouts - After adding styling or theme-related changes - When a code review is requested for frontend work - Proactively after completing any feature that includes user-facing interface elements Examples: <example> Context: User has just implemented a custom modal component user: "I've created a new modal for the settings page" assistant: "Let me review that implementation using the ui-expert agent to ensure it follows our UI standards." <uses Agent tool to launch ui-expert> </example> <example> Context: User has added a new dashboard page with custom styling user: "Here's the new analytics dashboard I built" assistant: "I'll have the ui-expert agent review this to make sure we're using ShadCN components appropriately and following our styling guidelines." <uses Agent tool to launch ui-expert> </example> <example> Context: User has modified button styling with inline custom colors user: "I updated the button colors to match the brand" assistant: "Let me use the ui-expert agent to verify this follows our Tailwind color token standards and dark mode compatibility." <uses Agent tool to launch ui-expert> </example> <example> Context: Proactive review after assistant implements a feature with UI components assistant: "I've implemented the user profile card component. Now let me use the ui-expert agent to review it for compliance with our UI standards." <uses Agent tool to launch ui-expert> </example>