frontend-design

Check code against your design system patterns and web interface guidelines (accessibility, performance, etc).

Critique your build for craft, then rebuild what defaulted.

Extract design patterns from existing code to create a system.md file.

Show current design system state including direction, tokens, and patterns.

Overview of the frontend-design plugin — skills, commands, MCP tools, and design system workflow.

Browser automation with Playwright. For simple tasks (navigate, click, screenshot, check elements), use the Playwright MCP tools directly. For complex automation (multi-viewport testing, loops, network interception, data extraction), write scripts. Use when the user wants to test websites, automate browser interactions, validate web functionality, or perform any browser-based task.

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

This skill is for interface design — dashboards, admin panels, apps, tools, and interactive products. NOT for marketing design (landing pages, marketing sites, campaigns).