القائمة
Vue Router - official router for Vue.js. Use when building single-page applications with routing, navigation guards, nested routes, or programmatic navigation.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
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).
| name | vue-router |
| description | Vue Router - official router for Vue.js. Use when building single-page applications with routing, navigation guards, nested routes, or programmatic navigation. |
| metadata | {"author":"Anthony Fu","version":"2026.1.31","source":"Generated from https://github.com/vuejs/router, scripts located at https://github.com/antfu/skills"} |
The skill is based on Vue Router v5.0.1, generated at 2026-01-31.
Vue Router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Features include nested routes mapping, dynamic routing, modular component-based router configuration, route params, query, wildcards, view transition effects, fine-grained navigation control, links with automatic active CSS classes, HTML5 history mode or hash mode, customizable scroll behavior, and proper encoding for URLs.
| Topic | Description | Reference |
|---|---|---|
| Router Setup | Create router instance, register plugin, access router/route | core-router-setup |
| Navigation | Programmatic navigation with push, replace, go methods | core-navigation |
| RouterView & RouterLink | Components for rendering routes and creating navigation links | core-router-view-link |
| Topic | Description | Reference |
|---|---|---|
| Dynamic Matching | Dynamic route segments with params, accessing route.params | essentials-dynamic-matching |
| Nested Routes | Nested route configuration with children option | essentials-nested-routes |
| Named Routes | Named routes for navigation without hardcoded URLs | essentials-named-routes |
| Named Views | Multiple RouterView components for complex layouts | essentials-named-views |
| History Mode | HTML5 history, hash mode, memory mode, server configuration | essentials-history-mode |
| Route Matching Syntax | Custom regex, repeatable params, optional params | essentials-route-matching-syntax |
| Active Links | Active link CSS classes, router-link-active vs exact-active | essentials-active-links |
| Passing Props | Pass route params as component props | essentials-passing-props |
| Redirect & Alias | Route redirects and aliases for URL mapping | essentials-redirect-alias |
| Topic | Description | Reference |
|---|---|---|
| Navigation Guards | Global guards, per-route guards, in-component guards | advanced-navigation-guards |
| Navigation Failures | Detecting aborted/cancelled/duplicated navigations | advanced-navigation-failures |
| Topic | Description | Reference |
|---|---|---|
| Composition API | useRouter, useRoute, navigation guards, useLink | advanced-composition-api |
| Typed Routes | TypeScript typed routes for autocomplete and type safety | advanced-typed-routes |
| Topic | Description | Reference |
|---|---|---|
| Transitions | Route transitions using RouterView slot | advanced-transitions |
| Scroll Behavior | Custom scroll behavior on navigation | advanced-scroll-behavior |
| Meta Fields | Route meta fields for custom data | advanced-meta |
| Lazy Loading | Lazy loading route components with dynamic imports | advanced-lazy-loading |
| Dynamic Routing | Adding and removing routes at runtime | advanced-dynamic-routing |
| RouterView Slot | Advanced RouterView slot API for custom rendering | advanced-router-view-slot |
