skills.rest
designbycode
designbycodeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

wayfinder-development

Generates type-safe Laravel route functions for TypeScript frontend components using Wayfinder.

Updated Mar 20, 2026
Search Tags:#type safety#typescript#code generation#laravel#routes#inertia#wayfinder
One-click install
npx skills add https://github.com/designbycode/uidesign --skill wayfinder-development-designbycode
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wayfinder-development
Source: https://github.com/designbycode/uidesign/tree/main/.junie/skills/wayfinder-development
Command: npx skills add https://github.com/designbycode/uidesign --skill wayfinder-development-designbycode

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Calling Laravel backend routes from TypeScript frontend code often leads to hardcoded URL strings, broken links after route changes, and no type safety. This Skill provides guidance for using Laravel Wayfinder to generate typed route functions that stay synchronized with your backend routes. ## Core Features & Use Cases - Route Generation: Run php artisan wayfinder:generate to regenerate TypeScript route functions after backend route changes, with an optional --with-form flag for form helpers. - Type-Safe Imports: Import named controller actions and routes from @/actions and @/routes for tree-shaking and compile-time safety. - Inertia Integration: Combine Wayfinder route functions with Inertia's useForm to submit forms directly to typed controller endpoints. - Use Case: When building a React or Vue page that posts to a Laravel controller, import store from the generated actions file and call form.submit(store()) instead of hardcoding the endpoint URL. ## Quick Start Ask the assistant to generate Wayfinder routes and show how to import a controller action into your TypeScript component.

Frequently Asked Questions about wayfinder-development

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I call Laravel routes from TypeScript with Wayfinder?▼

Run php artisan wayfinder:generate to create typed route functions, then import them from @/actions or @/routes in your TypeScript components. Call the function with route parameters to get a URL string or route object.

How to use Wayfinder with Inertia useForm?▼

Import the controller action, such as store, from @/actions and pass its result to form.submit(). Wayfinder returns the correct URL and HTTP method, so useForm posts directly to the typed Laravel endpoint.

Does Wayfinder support form helpers for HTML forms?▼

Yes, run php artisan wayfinder:generate with the --with-form flag to generate form helpers. You can then call methods like store.form() to get action and method attributes for plain HTML forms.

Why do my Wayfinder imports break after changing routes?▼

Generated route files become stale when backend routes change and the Vite plugin is not installed. Regenerate them with php artisan wayfinder:generate --no-interaction and verify the TypeScript imports resolve.

Should I use default or named imports with Wayfinder?▼

Use named imports, such as importing show and store from the controller module. Default imports break tree-shaking, which increases bundle size by including unused route functions.

Related Skills

Explore More Software Engineering Skills→
alimarchalalimarchal

wayfinder-development

Generate typed frontend route helpers for Laravel Wayfinder.

Community
Intermediate
markhamsquareventuresmarkhamsquareventures

inertia

Integrate Link and Form components for React-based Laravel Inertia navigation and handling.

Official
Intermediate
SivanwolSivanwol

laravel:form-requests

Move Laravel validation and authorization into dedicated Form Request classes.

Community
Intermediate
coleYabcoleYab

wayfinder-development

Generates typed TypeScript functions for Laravel routes and controller actions.

Community
Basic