Frontend

> **Not synced from upstream.** Local supplement kept outside `SKILL.md` /

> **Not synced from upstream.** This file is a local supplement kept outside

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.

> **Additional context needed**: target platforms/devices and usage contexts.

> **Additional context needed**: performance constraints.

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, load frontend:impeccable with argument audit for accessibility, and load frontend:impeccable with argument clarify 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>

Precise, shared design vocabulary for articulating design decisions, critiques, and reviews — "say precisely what you mean." Covers ~188 terms across 12 domains (typography, color, iconography, layout, interaction, motion, accessibility, information architecture, copywriting, tools, analysis, components). Use when naming a UI or design property precisely, writing or sharpening design critique / review / handoff copy, describing a visual or interaction issue, or when the exact term is unclear.

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 the impeccable sub-commands (colorize/typeset/audit/critique), web-design-guidelines, and shadcn.

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.

Provides guidance on using the next-devtools MCP server. Use when working with Next.js projects that have the MCP server configured, when the user encounters connection issues, or when needing help with error detection, route inspection, Server Action tracing, or Cache Components migration.

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

1 hook across 1 event