create-route
Create React Router 7 routes with proper type imports, loaders, and actions. Use when adding new pages, API endpoints, layouts, or route files.
Create React Router 7 routes with proper type imports, loaders, and actions. Use when adding new pages, API endpoints, layouts, or route files.
React 18+ development patterns including components, hooks, state management, API integration, and accessibility. Use when: (1) building React components, (2) designing user interfaces, (3) implementing state management, (4) writing frontend tests.
Comprehensive internationalization for Astro.js and Next.js. Handles hreflang, x-default, SEO-optimized routing, translation files, language switcher, and Cloudflare Pages deployment. Zero hardcoded strings, fully static, lightfast.
Implement TanStack Query (React Query) patterns for data fetching, caching, mutations, and optimistic updates. Use when setting up API integration or data fetching strategies.
Use this skill when working with Skeleton UI components in Svelte projects. It provides guidelines for Skeleton's component composition pattern, theme-aware color system, design presets, and layout patterns. Trigger when building UI components, styling elements, creating layouts, or working with Skeleton-specific features in Svelte 5 and SvelteKit 2+ projects.
Next.js SSR hydration patterns and best practices. Use when fixing hydration mismatches, implementing client-only features, or working with localStorage/browser APIs.
shadcn/ui patterns, progressive enhancement, Server Components, Client Components, form handling, Tailwind CSS v4, accessibility. Use when building UI, forms, components, or when user mentions UI/styling/components/forms.
Full stack integration patterns connecting Clojure backend and React frontend
Frontend development and API integration patterns for React, TypeScript, and state management
Design and audit React Server Components (RSC) architecture. Enforces proper Server/Client boundaries, async data fetching patterns, `use` hook for promises, and optimal component composition in Next.js 16 + React 19.
Next.js 15+ development patterns with App Router, Server Components, Client Components, and Convex integration. Use when building React components, pages, layouts, or working with Next.js features in this monorepo.
Next.js data fetching - Server actions, caching, revalidation
This skill should be used when the user asks to "add Google Maps", "integrate maps", "show location on map", "implement place search", "add route calculation", "geocode address", "display markers", "create heatmap", "add Street View", "implement drawing tools", "Google Maps を追加", "地図を表示", "位置情報を表示", "場所検索を実装", "ルート計算", "住所から座標を取得", "マーカーを表示", "ヒートマップを作成", "ストリートビュー", "描画ツールを追加", "@react-google-maps/api の使い方", or needs guidance on Google Maps Platform integration with Next.js App Router, including Places API, Directions API, Geocoding API, visualization features, and performance optimization.
Guide for Fulcro Dynamic Routing including defrouter, route targets, deferred loading, and route navigation. Use when implementing client-side routing, creating route targets, or managing navigation in Fulcro.
Generate Next.js components for the portal app with proper patterns. Use when creating new pages, components, or features in apps/portal.
Use PROACTIVELY when creating new React projects requiring modern tooling and best practices. Provides three modes - sandbox (Vite + React for quick experiments), enterprise (Next.js with testing and CI/CD), and mobile (Expo + React Native). Enforces TypeScript strict mode, Testing Trophy approach, and 80% coverage. Not for non-React projects or modifying existing applications.
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.
Modern JavaScript and TypeScript development patterns
Bootstrap React projects with TanStack Router for type-safe file-based routing. Use when creating React SPAs, modern web applications with routing, or when the user wants type-safe navigation in React.