Frontend

Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' for shape-then-build, 'teach' for design context setup, or 'extract' to pull reusable components and tokens into the design system.

**Stop using HSL.** Use OKLCH (or LCH) instead. It's perceptually uniform, meaning equal steps in lightness *look* equal—unlike HSL where 50% lightness in yellow looks bright while 50% in blue looks dark.

Build a feature with impeccable UX and UI quality through a structured process: shape the design, load the right references, then build and iterate visually until the result is delightful.

Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse.

Every interactive element needs these states designed:

Use this agent when the user needs guidance on which frontend skill to use, wants a comprehensive frontend review, or needs help navigating the full frontend toolkit. Acts as a coordinator across all frontend plugin skills. <example> Context: User is starting a new Next.js project with shadcn/ui user: "I'm building a new dashboard with Next.js and shadcn, what should I know?" assistant: "I'll launch the frontend-expert agent to provide a comprehensive onboarding guide covering shadcn component setup, Next.js DevTools configuration, React best practices, and design quality standards." <commentary> New project setup requires guidance across multiple skills. The expert agent coordinates. </commentary> </example> <example> Context: User wants a full frontend review of their application user: "Do a complete frontend review of this app" assistant: "I'll launch the frontend-expert agent to coordinate a comprehensive review covering component quality (shadcn), performance (React best practices), design quality (impeccable), anti-patterns detection, and Supabase integration if applicable." <commentary> Comprehensive review requires orchestrating multiple specialized skills. </commentary> </example> <example> Context: User is unsure which skill or approach to use user: "My UI looks generic, how can I improve it?" assistant: "I'll launch the frontend-expert agent to assess the current state and recommend the right combination of design skills: impeccable for direction, critique for evaluation, and specific skills like colorize, typeset, or bolder for targeted improvements." <commentary> Vague design improvement request needs triage before applying specific skills. </commentary> </example> <example> Context: User needs help with a specific frontend problem user: "The forms in our app are inconsistent and hard to use" assistant: "I'll launch the frontend-expert agent to diagnose the form issues, then apply the shadcn forms rules, audit for accessibility, and use the clarify skill for UX copy improvements." <commentary> Specific problem maps to multiple skills. Expert agent identifies the right combination. </commentary> </example>

Use this agent when the user asks to detect UI anti-patterns, review frontend code for design quality issues, check for AI-generated "slop" patterns, or audit visual design implementation against impeccable standards. <example> Context: User wants to check a component for common UI anti-patterns user: "Check this page for UI anti-patterns" assistant: "I'll launch the frontend-anti-patterns agent to scan the specified files for design anti-patterns including AI slop patterns, accessibility issues, and visual quality problems." <commentary> Generic anti-pattern scan request covers both slop and quality categories. </commentary> </example> <example> Context: User suspects AI-generated design patterns in their codebase user: "Does this look like AI slop? Review the landing page components" assistant: "I'll launch the frontend-anti-patterns agent to evaluate the landing page components against known AI-generated design tells like gradient text, icon-tile stacks, purple gradients, and thick side borders." <commentary> Focused on slop category detection. Agent checks against the curated list of AI tells. </commentary> </example> <example> Context: User wants a design quality audit before shipping user: "Audit the design quality of our dashboard components" assistant: "I'll launch the frontend-anti-patterns agent to review dashboard components for quality issues including contrast, typography, spacing, and composition patterns." <commentary> Quality category audit. Agent checks WCAG compliance, line length, heading hierarchy, and layout patterns. </commentary> </example>

Author, consume, and enforce a DESIGN.md design system spec (Google Labs open format, package @google/design.md). This skill should be used when the project has a DESIGN.md at the root or under docs/, when the user mentions "design tokens", "design system spec", "DESIGN.md", "tokens.json", needs to translate a design system into Tailwind theme config, export tokens to DTCG, lint token consistency, diff design system revisions, or check WCAG contrast on component color pairs. Acts as the upstream source of truth for impeccable-colorize, impeccable-typeset, impeccable-audit, impeccable-critique, web-design-guidelines, and shadcn.

Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.

Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.

Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.

Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.