plugin-frontend

Commit only the files that were changed in the current session

Review current code changes by delegating to relevant agents

Run tests only for modified files

Integrates APIs with React using react-query for data fetching and React Hook Form + Yup for forms. Use when you need to connect UI with endpoints, handle async states, or create forms with validation.

Creates React components following atomic design with TypeScript and Tailwind. Use when you need to build a new component from scratch with proper typing, styles, and structure.

Optimizes CSS and Tailwind classes by removing redundancies, improving specificity, and applying best practices. Use when CSS is messy or needs cleanup.

Refactors React components by extracting logic into hooks, improving composition, and reducing re-renders. Use when a component is hard to maintain or has performance issues due to poor structure.

Audits frontend performance analyzing Core Web Vitals, bundle size, lazy loading, and images. Use when you need to optimize the performance of a page or component.

Generates tests with React Testing Library and Jest for components, hooks, and user interactions. Use when you need to add or improve test coverage.

Reviews and audits UI/UX design including visual principles, responsive design, and WCAG accessibility. Use when you need to validate that a component or page meets design, responsive, and a11y standards.

Use when applying Atomic Design methodology to organize UI components into quarks, atoms, molecules, organisms, templates, and pages. Core principles and hierarchy.

Applies principles from Robert C. Martin's 'Clean Code'. Use this skill when writing, reviewing, or refactoring code to ensure high quality, readability, and maintainability. Covers naming, functio...

Apply appropriate design patterns (Singleton, Factory, Observer, Strategy, etc.) to solve architectural problems. Use when refactoring code architecture, implementing extensible systems, or following SOLID principles.

Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling

React Hook Form performance optimization for client-side form validation using useForm, useWatch, useController, and useFieldArray. This skill should be used when building client-side controlled forms with React Hook Form library. This skill does NOT cover React 19 Server Actions, useActionState, or server-side form handling (use react-19 skill for those).

React Query v4 (TanStack Query) best practices, patterns, and troubleshooting. Use when working with useQuery, useMutation, query invalidation, caching, WebSocket integration, or any async state management in React. Based on TkDodo's comprehensive blog series.

Guidelines for using React Query for data fetching, caching, and server state synchronization in React applications

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Use when implementing complex type logic, creating reusable type utilities, or ensuring compile-time type safety in TypeScript projects.

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.

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".

2 hooks across 2 events