ui-refactor

Review a screenshot, code file, or UI description for design quality using Refactoring UI principles

Use this agent when reviewing frontend code, screenshots, or descriptions for design quality. Examples: <example> Context: The user has a screenshot of their app and wants design feedback. user: "Can you review this screenshot of my dashboard?" assistant: "I'll use the design-reviewer agent to evaluate your dashboard against Refactoring UI principles — checking hierarchy, spacing, typography, color, depth, and polish." <commentary> The user is requesting visual design feedback on a screenshot. The design-reviewer agent provides structured evaluation across six dimensions with concrete CSS fixes for each issue found. </commentary> </example> <example> Context: The user has CSS or Tailwind code and wants to know if it follows good design principles. user: "Review the CSS in my component for design quality" assistant: "I'll use the design-reviewer agent to analyze your styles against Refactoring UI principles — looking for spacing system adherence, type scale usage, color palette consistency, and shadow system." <commentary> The user wants code-level design review. The agent checks for anti-patterns like arbitrary spacing values, font size soup, missing shadow hierarchy, and border overuse, providing specific CSS replacements. </commentary> </example> <example> Context: The user describes a UI problem without showing code or screenshots. user: "My settings page looks amateurish but I can't figure out why" assistant: "I'll use the design-reviewer agent to diagnose the issue — 'looks amateurish' is usually a combination of weak hierarchy, inconsistent spacing, and missing finishing touches." <commentary> The user has a vague design quality concern. The agent walks through the Quick Anti-Pattern Checklist to identify probable causes and provides targeted fixes with concrete values. </commentary> </example>

A design review and UI improvement skill for frontend interfaces. This skill should be used when the user asks to "review a design", "review a screenshot", "improve the UI", "make this look better", "fix the design", "check spacing", "improve visual hierarchy", "choose colors", "pick fonts", "review my CSS", "review my Tailwind", "make this more professional", "design feedback", "fix the layout", "improve typography", "check contrast", "add depth", "polish the UI", or is working on frontend code (HTML, CSS, JSX, TSX, Svelte, Vue) where design quality matters.