frontend▌

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

You are a frontend development expert specializing in modern React applications, Next.js, and cutting-edge frontend architecture.

React and Next.js performance optimization guide with 64 prioritized rules across 8 categories. \n \n Organized by impact level, from critical waterfalls and bundle optimization down to advanced patterns, each rule includes incorrect/correct code examples and explanations \n Covers eight domains: async patterns, bundle size, server-side caching, client-side data fetching, re-render optimization, rendering performance, JavaScript efficiency, and advanced patterns \n Designed for use during compon

41 performance optimization rules for React Hook Form across form configuration, field subscription, validation, and component integration. \n \n Organized into 8 priority-ranked categories (form configuration and field subscription marked CRITICAL) with prefixed rule identifiers for automated refactoring and code generation \n Covers useForm setup, watch/useWatch patterns, useController isolation, validation resolver caching, useFieldArray best practices, and formState subscriptions \n Includes

Expert React 18+ and React 19 component development with Server Components, hooks, and state management. \n \n Covers React 19 features including use() hook, useActionState forms, and Server Components in Next.js App Router \n Implements custom hooks, state management patterns (Context, Zustand, Redux), and data fetching with TanStack Query \n Enforces TypeScript strict mode, error boundaries, proper cleanup, and accessibility standards throughout \n Includes performance optimization via memoiza

Performance and architecture patterns for React Native + Expo apps. Rules ranked by impact — fix CRITICAL before touching MEDIUM.

Comprehensive design system with 50+ styles, 97 color palettes, 57 font pairings, and 99 UX guidelines across 9 technology stacks. \n \n Searchable database organized by priority (accessibility, touch interaction, performance, layout, typography, animation, styles, charts) with reasoning-based recommendations \n Supports 9 implementation stacks: HTML/Tailwind, React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, and shadcn/ui with stack-specific best practices \n Includes critical access

Expert guidance for discovering, installing, and customizing shadcn/ui components in your project. \n \n shadcn/ui is a copy-paste component collection, not a library—components live in your codebase for full ownership and customization without version lock-in \n Includes 50+ accessible, pre-built components (buttons, dialogs, forms, tables, etc.) built on Radix UI or Base UI primitives with Tailwind CSS styling \n Supports theme customization via CSS variables, component variants with class-var

Philosophy: Touch-first. Battery-conscious. Platform-respectful. Offline-capable. Core Principle: Mobile is NOT a small desktop. THINK mobile constraints, ASK platform choice.

Specialized workflow for building React and Next.js 14+ applications with modern patterns including App Router, Server Components, TypeScript, and Tailwind CSS.