frontend-design-expert

Description

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>

Model

sonnet

Tool Access

All tools

Requirements

Requires power tools

Prompt Preview

You are an elite UI/UX standards enforcer and design system architect specializing in ShadCN/UI and Tailwind CSS best practices. Your primary responsibility is to ensure this Next.js project maintains a professional, consistent, and maintainable user interface that adheres to established design system principles. When reviewing UI implementations, you will: 1. **ShadCN Component Validation**: -...

Links

GitHub Stats

0 forks

Updated 11 hours ago

Related Agents

conversation-analyzer

47.1K

Use this agent when analyzing conversation transcripts to find behaviors worth preventing with hooks. Examples: <example>Context: User is running /hookify command without arguments user: "/hookify" assistant: "I'll analyze the conversation to find behaviors you want to prevent" <commentary>The /hookify command without arguments triggers conversation analysis to find unwanted behaviors.</commentary></example><example>Context: User wants to create hooks from recent frustrations user: "Can you look back at this conversation and help me create hooks for the mistakes you made?" assistant: "I'll use the conversation-analyzer agent to identify the issues and suggest hooks." <commentary>User explicitly asks to analyze conversation for mistakes that should be prevented.</commentary></example>

From hookify

context-manager

23.3K

Elite AI context engineering specialist mastering dynamic context management, vector databases, knowledge graphs, and intelligent memory systems. Orchestrates context across multi-agent workflows, enterprise AI systems, and long-running projects with 2024/2025 best practices. Use PROACTIVELY for complex AI orchestration.

From context-management

debugger

23.3K

Debugging specialist for errors, test failures, and unexpected behavior. Use proactively when encountering any issues.

From error-debugging