AgentSkillsCN

wayfinder-development

每当在前端组件中引用后端路由时，该技能便会自动激活。当您从 @/actions 或 @/routes 导入模块、在 TypeScript 中调用 Laravel 路由，或使用 Wayfinder 路由函数时，此技能将助您事半功倍。

SKILL.md
--- frontmatter
name: wayfinder-development
description: >-
  Activates whenever referencing backend routes in frontend components. Use when
  importing from @/actions or @/routes, calling Laravel routes from TypeScript,
  or working with Wayfinder route functions.

Wayfinder Development

When to Apply

Activate whenever referencing backend routes in frontend components:

  • •Importing from @/actions/ or @/routes/
  • •Calling Laravel routes from TypeScript/JavaScript
  • •Creating links or navigation to backend endpoints

Documentation

Use search-docs for detailed Wayfinder patterns and documentation.

Quick Reference

Generate Routes

Run after route changes if Vite plugin isn't installed:

php artisan wayfinder:generate --no-interaction

For form helpers, use --with-form flag:

php artisan wayfinder:generate --with-form --no-interaction

Import Patterns

<code-snippet name="Controller Action Imports" lang="typescript">

// Named imports for tree-shaking (preferred)... import { show, store, update } from '@/actions/App/Http/Controllers/PostController'

// Named route imports... import { show as postShow } from '@/routes/post'

</code-snippet>

Common Methods

<code-snippet name="Wayfinder Methods" lang="typescript">

// Get route object... show(1) // { url: "/posts/1", method: "get" }

// Get URL string... show.url(1) // "/posts/1"

// Specific HTTP methods... show.get(1) store.post() update.patch(1) destroy.delete(1)

// Form attributes for HTML forms... store.form() // { action: "/posts", method: "post" }

// Query parameters... show(1, { query: { page: 1 } }) // "/posts/1?page=1"

</code-snippet>

Wayfinder + Inertia

Use Wayfinder with useForm:

<code-snippet name="Wayfinder useForm" lang="typescript">

import { store } from "@/actions/App/Http/Controllers/ExampleController";

const form = useForm({ name: "My Big Post" }); form.submit(store());

</code-snippet>

Verification

  1. •Run php artisan wayfinder:generate to regenerate routes if Vite plugin isn't installed
  2. •Check TypeScript imports resolve correctly
  3. •Verify route URLs match expected paths

Common Pitfalls

  • •Using default imports instead of named imports (breaks tree-shaking)
  • •Forgetting to regenerate after route changes
  • •Not using type-safe parameter objects for route model binding