frontend▌

Comprehensive Next.js performance optimization covering Core Web Vitals, modern React patterns, and production-grade techniques. \n \n Covers Core Web Vitals optimization (LCP, INP, CLS), image/font optimization with next/image and next/font , and caching strategies using unstable_cache and revalidateTag \n Guides conversion of Client Components to Server Components, implementation of Suspense streaming for progressive loading, and bundle size reduction through code splitting \n Includes Next.js

Use this skill when:

Korean document style consistency checker that detects tone, terminology, numbering, list formatting, quotation, and date format inconsistencies. \n \n Analyzes seven style categories (tone, terminology, numbers/units, lists, quotation/emphasis, dates/times, links) with priority-based detection \n Applies majority-rule principle to unify repeated expressions within a document or project, with context-aware recommendations based on document type (business, academic, technical, marketing) \n Provi

React and Next.js patterns for component composition, state management, performance, and accessibility. \n \n Covers component patterns including composition, compound components, and render props, plus custom hooks for state, data fetching, and debouncing \n Includes performance optimization techniques: memoization, code splitting with lazy loading, and list virtualization for large datasets \n Provides form handling with validation, error boundaries, and animation patterns using Framer Motion

Review, write, and fix SwiftUI gesture interactions. Apply modern gesture APIs with correct composition, state management, and conflict resolution using Swift 6.3 patterns.

Expert UI/UX designer for design systems, accessibility-first interfaces, and user-centered workflows. \n \n Covers design systems mastery including atomic design, design tokens, component libraries, and multi-brand architecture with governance strategies \n Specializes in accessibility and inclusive design with WCAG 2.1/2.2 compliance, color contrast analysis, and cognitive accessibility principles \n Provides user research methodologies including interviews, usability testing, A/B testing, and

React chat interfaces with Vercel AI SDK v6, covering hooks, message parts, tool approval workflows, and 18 documented UI error solutions. \n \n Three core hooks: useChat for conversational AI, useCompletion for text generation, and useObject for structured output streaming \n Message content now accessed via .parts array (breaking change from v5) with support for text, tool invocations, files, reasoning, and source citations \n Tool approval workflows enable human-in-the-loop confirmation befor

Tailwind CSS component library with 50+ semantic components, 30+ themes, and built-in dark mode. \n \n Provides semantic class names ( btn , card , modal ) instead of utility-only Tailwind, reducing markup verbosity and improving maintainability \n Includes 30+ pre-built themes plus custom theme support, with automatic dark mode detection and localStorage persistence \n Framework-agnostic: works with React, Vue, Svelte, or vanilla HTML without additional dependencies \n Covers navigation, forms,

33 React performance and composition rules across bundle optimization, re-rendering, rendering, hooks, and component patterns. \n \n Covers 6 rule categories: bundle size optimization (barrel imports, conditional loading, preloading), re-render prevention (functional setState, derived state, memoization), rendering performance (content-visibility, hydration, transitions), client patterns (passive listeners, localStorage versioning), hooks best practices (limiting useEffect, named functions), and

Best practices and architectural patterns for Vue 3 and Nuxt 3 projects. \n \n Emphasizes core principles: predictable state with single source of truth, explicit data flow (props down, events up), and small focused components \n Requires Composition API with <script setup lang=\"ts\"> as the default, and mandates following detailed guides for reactivity, SFC structure, and component organization \n Provides a checklist-driven approach covering component splitting, composable extraction, an