nextjs-app-router-fundamentals
Next.js App Router (13+). Migrating from Pages, file conventions (layout, page, loading, error), routing patterns, metadata, generateStaticParams.
Next.js App Router (13+). Migrating from Pages, file conventions (layout, page, loading, error), routing patterns, metadata, generateStaticParams.
Zustand for Next.js App Router - Client Components only, hydration handling, persist middleware. Use when implementing global state in Next.js.
Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.
Angular UI components with Material Design, SCSS design system, and responsive layouts. Use when: Creating new UI components, styling pages, implementing responsive layouts, adding animations, or maintaining visual consistency across admin/customer frontends.
Build secure, performant React components in Next.js systems with TypeScript, security-first patterns, and enterprise-grade UX. Use when creating UI components, forms, providers, error boundaries, and interactive elements.
React and frontend development patterns. Use when working with React components, hooks, state management, or frontend architecture.
Create new React components following project patterns and best practices. Includes proper typing, testing, and documentation.
React Loading Skeleton v3.5.0 usage and patterns. Use when implementing loading skeletons in React/Next.js components, choosing props/theme, or troubleshooting sizing/layout issues.
Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.
Rails frontend development guidelines using Hotwire (Turbo + Stimulus), Tailwind CSS, and ViewComponent. Modern patterns for server-rendered HTML with progressive enhancement, zero-build frontend architecture, and Rails conventions. Use when creating views, components, Stimulus controllers, partials, or working with frontend code.
Create atomic components (atoms) - basic, reusable UI building blocks following React/TypeScript best practices with Tailwind v4 styling. Use when creating fundamental UI elements like buttons, inputs, labels, icons, or other single-responsibility components. Triggers on requests like "create a button component", "add an input atom", "build a reusable icon wrapper", or "create atomic UI elements".
Implémente Suspense et Streaming pour progressive rendering. MANDATORY pour async Server Components. À utiliser lors de async data, loading states, ou quand l'utilisateur mentionne "suspense", "streaming", "loading", "skeleton".
Next.js App Router frontend stack workflow: Server Components-first, Prisma server-only (Node runtime), Tailwind + shadcn/ui, TanStack Query, React Hook Form + Zod, and conventions for work under frontend/. Use when implementing or refactoring UI, routes, data fetching, mutations, or forms in this stack.
Manages server state with TanStack Query (React Query) including data fetching, caching, mutations, and optimistic updates. Use when fetching API data, caching responses, handling loading states, or syncing server state.
Create Vendure Admin UI extensions with React components, route registration, navigation menus, and GraphQL integration. Handles useQuery, useMutation, useInjector patterns. Use when building Admin UI features for Vendure plugins.
Guide for implementing navigation in Next.js Server Components using Link component and redirect() function. Covers the difference between server and client navigation methods. Use when adding links, redirects, or navigation logic in server components without converting them to client components unnecessarily.
A conceptual skill for integrating Better Auth with Next.js App Router
Create React components following project standards. Use when building new UI components, creating reusable components, or implementing designs.
React 19 + Next.js App Router performance and best practices for this codebase (TypeScript + Tailwind CSS 4). Use when writing/reviewing/refactoring components, deciding server vs client boundaries, building forms with server actions, preventing re-renders, and keeping the client bundle small.
React 18+ with Vite patterns - use for Mini App frontend development, component structure, hooks, and TypeScript setup