How to work effectively with Laravel Wayfinder, always use when developing frontend features
/plugin marketplace add markhamsquareventures/essentials/plugin install essentials@mksq-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Wayfinder generates TypeScript functions and types for Laravel controllers and routes which you can import into your client side code. It provides type safety and automatic synchronization between backend routes and frontend code.
import { show } from '@/actions/...')php artisan wayfinder:generate after route changes if there are any errors.form() with --with-form flag for HTML form attributes — <form {...store.form()}> → action="/posts" method="post".get(), .post(), .patch(), .put(), .delete() for specific methods — show.head(1) → { url: "/posts/1", method: "head" }import StorePost from '@/actions/.../StorePostController'; StorePost()@/routes/ for non-controller routes. For example, import { show } from '@/routes/post'; show(1) for route name post.show{post:slug}) and accepts matching object properties — show("my-post") or show({ slug: "my-post" })mergeQuery to merge with window.location.search, set values to null to remove — show(1, { mergeQuery: { page: 2, sort: null } }){ query: {...} } in options to append params — show(1, { query: { page: 1 } }) → "/posts/1?page=1"{ url, method } shaped objects — show(1) → { url: "/posts/1", method: "get" }.url() to get URL string — show.url(1) → "/posts/1"// Get route object with URL and method...
show(1) // { url: "/posts/1", method: "get" }
// Get just the URL...
show.url(1) // "/posts/1"
// Use specific HTTP methods...
show.get(1) // { url: "/posts/1", method: "get" }
show.head(1) // { url: "/posts/1", method: "head" }
// Import named routes...
import { show as postShow } from '@/routes/post' // For route name 'post.show'
postShow(1) // { url: "/posts/1", method: "get" }
</code-snippet>
If your application uses the <Form> component from Inertia, you can use Wayfinder to generate form action and method automatically.
<code-snippet name="Wayfinder Form Component (React)" lang="typescript">
This skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.