wayfinder-development
This tool standardizes communication between frontend components and backend routes by managing imports from specific action or route directories.
Install
mkdir -p .claude/skills/wayfinder-development && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/4375" && unzip -o skill.zip -d .claude/skills/wayfinder-development && rm skill.zipInstalls to .claude/skills/wayfinder-development
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Sync backend route definitions to frontend
- →Map Laravel routes to TypeScript actions
- →Generate form helpers for HTML forms
- →Provide type-safe route model binding
How it works
The skill uses the Wayfinder CLI to generate TypeScript route definitions from Laravel routes, enabling type-safe navigation and API calls in frontend components.
Inputs & outputs
When to use wayfinder-development
- →Sync backend route definitions
- →Map Laravel routes to frontend actions
- →Update API route calls in TypeScript
About this skill
Wayfinder Development
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
<!-- Controller Action Imports -->// 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'
Common Methods
<!-- Wayfinder Methods -->// 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"
Wayfinder + Inertia
Use Wayfinder with the <Form> component:
<Form {...store.form()}><input name="title" /></Form>
Verification
- Run
php artisan wayfinder:generateto regenerate routes if Vite plugin isn't installed - Check TypeScript imports resolve correctly
- 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
When not to use it
- →When not using Laravel backend with Wayfinder
Prerequisites
Limitations
- →Requires regeneration after route changes
- →Requires named imports for tree-shaking
How it compares
It eliminates manual URL string management by syncing backend routes directly into the frontend codebase.
Compared to similar skills
wayfinder-development side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| wayfinder-development (this skill) | 1 | 2mo | Review | Intermediate |
| pulse-development | 0 | 3mo | Review | Intermediate |
| telegram-mini-app | 62 | 6mo | Review | Advanced |
| stripe-integration | 48 | 2mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
pulse-development
THM-Health
Handles Laravel Pulse setup, configuration, and custom card development. Activates when installing Pulse; configuring the dashboard or authorization gate; setting up recorders and filtering; building custom Livewire cards; optimizing with Redis ingest or sampling; or when the user mentions /pulse, p
telegram-mini-app
davila7
Expert in building Telegram Mini Apps (TWA) - web apps that run inside Telegram with native-like experience. Covers the TON ecosystem, Telegram Web App API, payments, user authentication, and building viral mini apps that monetize. Use when: telegram mini app, TWA, telegram web app, TON app, mini app.
stripe-integration
wshobson
Implement Stripe payment processing for robust, PCI-compliant payment flows including checkout, subscriptions, and webhooks. Use when integrating Stripe payments, building subscription systems, or implementing secure checkout flows.
backend-dev-guidelines
langfuse
Comprehensive backend development guide for Langfuse's Next.js 14/tRPC/Express/TypeScript monorepo. Use when creating tRPC routers, public API endpoints, BullMQ queue processors, services, or working with tRPC procedures, Next.js API routes, Prisma database access, ClickHouse analytics queries, Redis queues, OpenTelemetry instrumentation, Zod v4 validation, env.mjs configuration, tenant isolation patterns, or async patterns. Covers layered architecture (tRPC procedures → services, queue processors → services), dual database system (PostgreSQL + ClickHouse), projectId filtering for multi-tenant isolation, traceException error handling, observability patterns, and testing strategies (Jest for web, vitest for worker).
nodejs-backend-patterns
wshobson
Build production-ready Node.js backend services with Express/Fastify, implementing middleware patterns, error handling, authentication, database integration, and API design best practices. Use when creating Node.js servers, REST APIs, GraphQL backends, or microservices architectures.
telegram-dev
2025Emma
Telegram 生态开发全栈指南 - 涵盖 Bot API、Mini Apps (Web Apps)、MTProto 客户端开发。包括消息处理、支付、内联模式、Webhook、认证、存储、传感器 API 等完整开发资源。