菜单
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
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).
Keep JavaScript/TypeScript dependencies fresh with safety rails and monorepo support.
| 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 |
