frontend-design-review

The frontend-design-review skill enables AI coding agents to evaluate and craft UI components that balance technical excellence with high-fidelity aesthetics. It operates through two primary modes: Design Review and Creative Frontend Design. In Design Review mode, the agent systematically audits code against established design systems, verifying token usage, layout specifications, and variant consistency to ensure the implementation matches Figma design handoffs. It applies three core pillars: Frictionless Insight-to-Action, which assesses task flow efficiency; Quality is Craft, which validates accessibility (WCAG 2.1), aesthetic cohesion, and code quality; and Trustworthy Building, which ensures transparency and error handling. Creative Frontend Design mode empowers agents to generate distinctive, non-generic interfaces by defining clear aesthetic directions—such as minimalist, brutalist, or editorial styles—and executing them with CSS variables, refined typography, and intentional motion, moving beyond boilerplate code.

• Perform rigorous accessibility audits (WCAG 2.1 A/AA) and identify design system deviations.

• Automate UI code reviews for PRs, component library compliance, and responsive design stability.

• Generate production-grade frontend code from design specifications, ensuring semantic HTML and CSS/Tailwind architecture.

• Apply quality pillars to prioritize UI improvements based on user task completion and action hierarchy.

• Collaborate on aesthetic direction to prevent generic 'AI slop' and maintain brand-specific visual integrity.

• Use this skill for design system compliance checks, UI code reviews, and building distinct frontend features.

• Provide the agent with links to Figma designs, Storybook documentation, or existing token files for optimal accuracy.

• Ideal for software engineers, UX engineers, and frontend developers managing complex component libraries.

• Ensure input context includes specific framework constraints (e.g., React, Vue, Svelte) to receive framework-appropriate code generation.

• Do not use this skill for backend API logic, infrastructure/DevOps workflows, or database schema management; scope it strictly to frontend presentation and client-side logic.