Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

fusengine/laravel-vite

Name: laravel-vite
Author: fusengine

plugins/laravel-expert/skills/laravel-vite/SKILL.md

npx skillsauth add fusengine/agents laravel-vite

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

Laravel Vite

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

fuse-ai-pilot:explore-codebase - Check existing vite.config.js, package.json
fuse-ai-pilot:research-expert - Verify latest Vite docs via Context7
mcp__context7__query-docs - Query specific patterns (SSR, Inertia)

After implementation, run fuse-ai-pilot:sniper for validation.

Overview

Vite is Laravel's default frontend build tool. It provides fast HMR in development and optimized builds for production.

| Feature | Purpose | |---------|---------| | HMR | Instant updates during development | | Bundling | Optimized production assets | | SSR | Server-side rendering support | | Frameworks | Vue, React, Svelte integration |

Critical Rules

Always use laravel-vite-plugin - Never raw Vite config
VITE_ prefix for env vars - Only exposed to frontend
Use @vite directive - Not manual script tags
Build before deploy - npm run build in CI/CD
Configure HMR for Docker - Set server.host: '0.0.0.0'

Decision Guide

Stack Selection

Using Tailwind CSS?
├── YES → v4? @tailwindcss/vite plugin
│         v3? PostCSS config
└── NO → Just laravel-vite-plugin

Using JavaScript framework?
├── Vue → @vitejs/plugin-vue
├── React → @vitejs/plugin-react
├── Svelte → @sveltejs/vite-plugin-svelte
└── None → Plain JS/CSS only

SSR Decision

Need SEO/fast first paint?
├── YES → Using Inertia?
│   ├── YES → Inertia SSR
│   └── NO → Consider Inertia or Livewire
└── NO → Client-side only

Reference Guide

Concepts (WHY & Architecture)

| Topic | Reference | When to Consult | |-------|-----------|-----------------| | Setup | setup.md | Initial configuration | | Entry Points | entry-points.md | Multiple bundles | | Preprocessors | preprocessors.md | Sass, Less, PostCSS | | Assets | assets.md | Images, fonts, static | | Environment | environment.md | VITE_ variables | | Dev Server | dev-server.md | HMR, Docker, HTTPS | | Build | build-optimization.md | Chunks, minification | | SSR | ssr.md | Server-side rendering | | Inertia | inertia.md | SPA without API | | Frameworks | frameworks.md | Vue, React, Svelte | | Security | security.md | CSP nonce | | Deployment | deployment.md | Production, CDN |

Templates (Complete Code)

| Template | When to Use | |----------|-------------| | ViteConfig.js.md | Standard setup | | ViteConfigAdvanced.js.md | Full optimization | | InertiaSetup.md | Inertia + Vue/React | | SSRSetup.md | SSR configuration |

Quick Reference

Basic Setup

// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Blade Directive

<!DOCTYPE html>
<head>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

Commands

| Command | Purpose | |---------|---------| | npm run dev | Start dev server | | npm run build | Production build | | npm run preview | Preview build |

Best Practices

DO

Use refresh: true for Blade HMR
Configure aliases for clean imports
Split vendors into separate chunks
Use VITE_ prefix for frontend env vars
Test Docker/Sail config locally

DON'T

Expose sensitive data via VITE_ vars
Forget to build before deploying
Use absolute paths for assets
Skip source maps in staging
Ignore chunk size warnings

Laravel 13 Notes

laravel/vite-plugin reste compatible Laravel 13 + Vite 6. Adaptations :

Le helper @vite() Blade fonctionne sans changement
Pour Inertia 2 + React 19 : utiliser le preset @vitejs/plugin-react v4+
HMR via WebSocket : Reverb 1.4 et Vite peuvent cohabiter sur des ports distincts en dev
Build production : ajouter build.target: 'es2023' pour profiter de PHP 8.3 côté serveur

fusengine/laravel-vite

plugins/laravel-expert/skills/laravel-vite/SKILL.md

Complete Vite bundling for Laravel - assets, HMR, SSR, frameworks, optimization. Use when configuring frontend build pipeline.

12 stars

development

Updated May 17, 2026

$ install --global

skillsauth

npx skillsauth add fusengine/agents laravel-vite

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: May 17, 2026, 2:49 AM154.6s17 files scanned

SKILL.md

name:: laravel-vite
description:: Complete Vite bundling for Laravel - assets, HMR, SSR, frameworks, optimization. Use when configuring frontend build pipeline.
laravel:: 13.0
vite:: 6.x
php:: 8.3
user-invocable:: true
references:: references/setup.md, references/entry-points.md, references/preprocessors.md, references/assets.md, references/environment.md, references/dev-server.md, references/build-optimization.md, references/ssr.md, references/inertia.md, references/frameworks.md, references/security.md, references/deployment.md, references/templates/ViteConfig.js.md, references/templates/ViteConfigAdvanced.js.md, references/templates/InertiaSetup.md, references/templates/SSRSetup.md
related-skills:: laravel-blade, laravel-livewire, fusecore

Laravel Vite

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

fuse-ai-pilot:explore-codebase - Check existing vite.config.js, package.json
fuse-ai-pilot:research-expert - Verify latest Vite docs via Context7
mcp__context7__query-docs - Query specific patterns (SSR, Inertia)

After implementation, run fuse-ai-pilot:sniper for validation.

Overview

Vite is Laravel's default frontend build tool. It provides fast HMR in development and optimized builds for production.

Critical Rules

Always use laravel-vite-plugin - Never raw Vite config
VITE_ prefix for env vars - Only exposed to frontend
Use @vite directive - Not manual script tags
Build before deploy - npm run build in CI/CD
Configure HMR for Docker - Set server.host: '0.0.0.0'

Decision Guide

Stack Selection

Using Tailwind CSS?
├── YES → v4? @tailwindcss/vite plugin
│         v3? PostCSS config
└── NO → Just laravel-vite-plugin

Using JavaScript framework?
├── Vue → @vitejs/plugin-vue
├── React → @vitejs/plugin-react
├── Svelte → @sveltejs/vite-plugin-svelte
└── None → Plain JS/CSS only

SSR Decision

Need SEO/fast first paint?
├── YES → Using Inertia?
│   ├── YES → Inertia SSR
│   └── NO → Consider Inertia or Livewire
└── NO → Client-side only

Reference Guide

Concepts (WHY & Architecture)

Templates (Complete Code)

Quick Reference

Basic Setup

// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Blade Directive

<!DOCTYPE html>
<head>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

Commands

| Command | Purpose | |---------|---------| | npm run dev | Start dev server | | npm run build | Production build | | npm run preview | Preview build |

Best Practices

DO

Use refresh: true for Blade HMR
Configure aliases for clean imports
Split vendors into separate chunks
Use VITE_ prefix for frontend env vars
Test Docker/Sail config locally

DON'T

Expose sensitive data via VITE_ vars
Forget to build before deploying
Use absolute paths for assets
Skip source maps in staging
Ignore chunk size warnings

Laravel 13 Notes

laravel/vite-plugin reste compatible Laravel 13 + Vite 6. Adaptations :

Le helper @vite() Blade fonctionne sans changement
Pour Inertia 2 + React 19 : utiliser le preset @vitejs/plugin-react v4+
HMR via WebSocket : Reverb 1.4 et Vite peuvent cohabiter sur des ports distincts en dev
Build production : ajouter build.target: 'es2023' pour profiter de PHP 8.3 côté serveur

Related Skills

fusengine/ux-copy

testing

VerifiedTrustedCommunity

Copy self-audit and ban-lists — filler verbs/hype adjectives, slop placeholder names, fake-precise numbers, Title Case headlines, humor in error copy ('Oops!'), em-dash crutch, one copy register per page.

20SKILL.mdUpdated Jul 15, 2026

fusengine/design-webapp

development

VerifiedTrustedCommunity

Logged-in web apps — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Register `product`: density and glance-speed over marketing polish, no hero/CTA-tricks, every data surface covers empty/loading/error explicitly, tables and dataviz follow preattentive-processing rules.

20SKILL.mdUpdated Jul 15, 2026

fusengine/design-webapp

fusengine/design-web

development

VerifiedTrustedCommunity

Marketing sites, landing pages, campaign pages — register `brand` (design IS the product). Structure comes from the register's POV + a macrostructure pick, never from copying an inspiration site's section flow. Hero discipline, deviated section order, asymmetric grids, and a silhouette lookalike-test gate before ship.

20SKILL.mdUpdated Jul 15, 2026

fusengine/design-system

development

VerifiedTrustedCommunity

Token-strategy core — OKLCH color rules, neutral tinting, accent-commitment levels, type scale, 8pt spacing grid, touch targets, and the canonical output format of design-system.md (the file the harness gates on). This is routing step 1 of design-method/SKILL.md — read it before design-web/design-webapp/design-ios/design-android, before picking or auditing a single color/type/spacing value.

20SKILL.mdUpdated Jul 13, 2026

fusengine/design-system

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/fusengine/agents.git

# Copy into Claude Code skills folder (global)
cp -r agents/plugins/laravel-expert/skills/laravel-vite ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

fusengine/agents

12 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT