designer

This skill acts as a senior product designer with over 20 years of experience, specializing in bridging the gap between high-fidelity visual design and practical React engineering. It is designed for developers and product teams who want to elevate their interfaces to the standards of world-class platforms like Linear, Stripe, and Apple. By analyzing your existing codebase, design tokens, and components, it offers an uncompromising critique of your UI, focusing on visual hierarchy, typography, information density, and interactive feedback.

The agent leverages Playwright for visual inspection and accessibility tree analysis, ensuring that your application is not only beautiful but also performant and inclusive. It applies rigorous design tenets such as 'Documentation is a failure state' and 'Clear thinking made visible,' pushing you to refine your layout, simplify your navigation, and improve overall component quality.

• Performs automated visual inspection using Playwright to evaluate responsiveness and component rendering at multiple breakpoints.

• Conducts a systematic design critique across ten key dimensions, including visual hierarchy, color accessibility, motion, and spacing rhythm.

• Provides actionable, code-level recommendations using Tailwind CSS utilities and shadcn/ui component configurations.

• Offers architectural guidance for building and maintaining scalable design systems using semantic color tokens and consistent typography scales.

• Evaluates accessibility (WCAG AA) and provides specific fixes to ensure your UI is usable by everyone.

• Ensure your repository contains a consistent structure for design files, such as data/design/design_system.json or tech_stack.json, to allow the agent to provide context-aware suggestions.

• Use this tool when you are at the polish phase of a feature, during a design review meeting, or when you need to resolve technical debt related to front-end styling and component consistency.

• When prompted, provide the specific URL or relevant UI component code snippet you want the agent to evaluate.

• Focus on actionable implementation: expect specific Tailwind class refactors and shadcn/ui pattern adjustments rather than generic stylistic advice.