القائمة
React Router - multi-strategy router for React bridging React 18 to React 19. Use when building React applications with routing, data loading, SSR, or SPA architectures.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | react-router |
| description | React Router - multi-strategy router for React bridging React 18 to React 19. Use when building React applications with routing, data loading, SSR, or SPA architectures. |
| metadata | {"author":"Hairyf","version":"2026.1.31","source":"Generated from https://github.com/remix-run/react-router, scripts located at https://github.com/hairyf/skills"} |
The skill is based on React Router v7.13.0, generated at 2026-01-31.
React Router is a multi-strategy router for React bridging the gap from React 18 to React 19. You can use it maximally as a React framework or as minimally as you want. It supports three modes: Declarative (basic routing), Data (with loaders/actions), and Framework (full-featured with type safety and code splitting).
| Topic | Description | Reference |
|---|---|---|
| Modes | Three usage modes: Framework, Data, and Declarative - choosing the right approach | core-modes |
| Routing | Route configuration, path patterns, nested routes, layout routes, and route matching | core-routing |
| Navigation | Navigation components and hooks: Link, NavLink, Form, useNavigate, redirect | core-navigation |
| Data Loading | Loading data with loaders and clientLoaders in route modules | core-data-loading |
| Actions | Data mutations with actions and clientActions in route modules | core-actions |
| Route Module | Route module API: component, loader, action, error boundary, headers, meta, and more | core-route-module |
| Hooks | Essential React Router hooks: useNavigation, useLocation, useParams, useMatches, and more | core-hooks |
| Topic | Description | Reference |
|---|---|---|
| Fetchers | Using fetchers for concurrent data interactions without navigation | features-fetchers |
| Error Handling | Error boundaries, error handling, and error responses | features-error-handling |
| Middleware | Middleware for authentication, logging, and request processing | features-middleware |
| Topic | Description | Reference |
|---|---|---|
| Form Validation | Form validation patterns, error handling, and user feedback | features-form-validation |
| File Uploads | Handling file uploads with multipart form data and file storage | features-file-uploads |
| Search Params | Working with URL search parameters using useSearchParams hook | features-search-params |
| Topic | Description | Reference |
|---|---|---|
| View Transitions | Smooth page transitions using View Transitions API | features-view-transitions |
| Navigation Blocking | Blocking navigation with useBlocker for unsaved form data | features-navigation-blocking |
| Topic | Description | Reference |
|---|---|---|
| Type Safety | Type safety with Route types, automatic type inference, and type generation | best-practices-type-safety |
| Topic | Description | Reference |
|---|---|---|
| Streaming | Streaming with Suspense, deferring non-critical data, and React Suspense integration | advanced-streaming |
| Pre-rendering | Pre-rendering static pages at build time for faster page loads | advanced-pre-rendering |
| SPA Mode | Single Page App mode with SSR disabled and client-side routing | advanced-spa-mode |
Migrate a React Native project from NativeWind to Uniwind. Use when the user wants to replace NativeWind with Uniwind, upgrade from NativeWind, switch to Uniwind, or mentions NativeWind-to-Uniwind migration. Handles package removal, config migration, Tailwind 4 upgrade, cssInterop removal, theme conversion, and all breaking changes.
Uniwind — Tailwind CSS v4 styling for React Native. Use when adding, building, or debugging components in a React Native project that uses Uniwind classNames. Covers setup, Metro config, global.css, theming, className props, accent-* color props, platform/data/state/responsive variants, CSS variables, custom utilities, withUniwind for third-party components, cn/tailwind-merge, tailwind-variants, safe area utilities, gradients, fonts, React Navigation, UI kits, diagnostics, troubleshooting, and Uniwind Pro features. Does not cover NativeWind migration.
Turborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI optimization, environment variables, internal packages, monorepo structure/best practices, and boundaries. Use when user: configures tasks/workflows/pipelines, creates packages, sets up monorepo, shares code between apps, runs changed/affected packages, debugs cache, or has apps/packages directories.
Use Tailwind CSS to style React Native components across web and native
Build and maintain React Native apps with Expo SDK, EAS Build, EAS Update, and Continuous Native Generation. Use when configuring Expo projects, adding native modules, building binaries, or shipping over-the-air updates.
End-to-end testing patterns with Playwright for full-stack Python/React applications. Use when writing E2E tests for complete user workflows (login, CRUD, navigation), critical path regression tests, or cross-browser validation. Covers test structure, page object model, selector strategy (data-testid > role > label), wait strategies, auth state reuse, test data management, and CI integration. Does NOT cover unit tests or component tests (use pytest-patterns or react-testing-patterns).
