wayfinder-development_skill

Overview

This skill integrates Wayfinder route helpers into frontend TypeScript workflows. It activates whenever you reference backend routes from components, imports from @/actions or @/routes, or call Laravel routes from JavaScript/TypeScript. The skill enforces correct import patterns, route generation checks, and practical usage of route helper methods.

How this skill works

It inspects imports and calls that reference Wayfinder-generated modules (e.g., imports from @/actions or @/routes) and validates usage patterns in components. It flags incorrect default imports, missing route regeneration steps, and unsafe parameter usage, and it reminds you of commands to regenerate TypeScript route definitions. The skill also surfaces common method patterns like .url(), .get/.post, and .form() for easier developer use.

When to use it

• When importing controller actions or route helpers from @/actions or @/routes
• When generating links or navigation that call Laravel routes from TypeScript/JS
• When building forms or submitting to backend endpoints from the frontend
• When changing backend routes and needing to regenerate TypeScript route definitions
• When using Wayfinder with frameworks like Inertia or client-side form helpers

Best practices

• Prefer named imports for tree-shaking and correct resolution (avoid default imports)
• Run php artisan wayfinder:generate after route changes if Vite plugin is not present
• Use the provided .url() helper for URL strings and .form() for HTML form attributes where available
• Pass typed parameter objects for route-model binding instead of loose primitives
• Verify TypeScript imports resolve during CI or preflight checks to catch generation issues early

Example use cases

• Generate a link: import { show as postShow } from '@/routes/post' and use postShow.url(1) to render an anchor href
• Submit a form with Inertia: <Form {...store.form()}><input name="title"/></Form> using the store.form() helper
• Call controller actions in frontend code by importing named action functions from @/actions and invoking show(1) or store.post()
• Run php artisan wayfinder:generate --with-form after adding form helpers on the backend to keep TypeScript helpers in sync
• Add query parameters: use show(1, { query: { page: 1 } }) to generate a URL with query string