skills.rest
gab3mioni
gab3mioniCOMMUNITY
Explore all skills by this author →
GitHub

laravel-frontend

Configures Vite and generates Wayfinder-typed routes for Laravel 12 front-ends.

Updated Apr 15, 2026
Search Tags:#typescript#frontend#laravel#vite#inertia#wayfinder
One-click install
npx skills add https://github.com/gab3mioni/laravel-claudecode-toolkit --skill laravel-frontend-gab3mioni
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: laravel-frontend
Source: https://github.com/gab3mioni/laravel-claudecode-toolkit/tree/main/skills/laravel-frontend
Command: npx skills add https://github.com/gab3mioni/laravel-claudecode-toolkit --skill laravel-frontend-gab3mioni

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill resolves the complexity of managing the bridge between Laravel 12 and modern frontend stacks, specifically handling Vite configuration, asset pipelines, and typed route generation.

Core Features & Use Cases

  • Vite & Asset Management: Standardizes Vite configuration, HMR troubleshooting, and manifest resolution for production builds.
  • Wayfinder Integration: Automates the generation of typed TypeScript functions for Laravel routes and controller actions, preventing broken links.
  • Project Structure: Enforces consistent layouts for resources/js, ensuring clean separation between components, pages, and build artifacts.

Quick Start

Use the laravel-frontend skill to audit the current vite configuration and verify that all Wayfinder routes are correctly synchronized with the backend.

Frequently Asked Questions about laravel-frontend

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

FAQPage Schema
How do I configure Vite for a Laravel 12 frontend with Inertia.js?▼

Configuring Vite for Laravel 12 involves standardizing the asset pipeline and managing the bridge to Inertia.js. This approach ensures consistent build artifacts, HMR stability, and proper manifest resolution for production builds.

What is Wayfinder integration for Laravel routes?▼

Wayfinder integration is the automated generation of typed TypeScript functions for Laravel routes and controller actions. It provides type-safe routing and prevents broken links by synchronizing frontend code with backend endpoints.

Can I use TypeScript with Laravel 12 Vite asset management?▼

Yes, you can use TypeScript with Laravel 12 Vite asset management. The workflow enforces a consistent project structure within resources/js, ensuring clean separation between TypeScript components, pages, and build artifacts.

Why does HMR break in my Laravel Vite setup?▼

HMR breaks in Laravel Vite setups due to misconfigured asset pipelines or incorrect project structure. Standardizing the Vite configuration and verifying the resources/js layout resolves HMR stability issues and ensures efficient asset bundling.

What's the best way to generate typed route helpers for Laravel controllers?▼

The best way to generate typed route helpers is by using Wayfinder integration to automate TypeScript function creation for controller actions. This prevents broken links and ensures automated route synchronization across your full-stack application.

Related Skills

Explore More Software Engineering Skills→
trypostittrypostit
483

wayfinder-development

Generate typed Laravel route helpers for React, Vue, Svelte, or Inertia frontends.

Official
Advanced
Eng0AIEng0AI
15

mantis-react-admin

Generate a React 19 admin dashboard scaffold with Material UI v7 and Vite 7.

Official
Advanced
cofincofin
15

inertia

Bridge server-side routing with client-side rendering using Inertia.js.

Community
Intermediate
JaguarJackJaguarJack
928

routes

Generate Laravel route configurations for CatchAdmin modules with CRUD and auxiliary routes.

Community
Basic