laravel-fullstack_skill

Overview

This skill provides focused full-stack guidance for Laravel Blade views integrated with Alpine.js, optional Vue.js, TailwindCSS v4 styling, and Vite asset handling. It targets UI concerns in resources/views, Blade components, frontend forms, modals, dropdowns, and general layout issues. The skill helps diagnose common rendering, interactivity, styling, and asset-loading problems and offers practical fixes and patterns.

How this skill works

It inspects Blade templates, anonymous and class components, layout files, Alpine.js directives, and Tailwind utility usage to surface likely causes of UI failures. It checks common issues with Vite asset registration, HMR, CSS class conflicts, Alpine state and event bindings, and Vue integration points. The skill recommends code patterns, small reproductions, and configuration checks to resolve problems quickly.

When to use it

• Editing or debugging files under resources/views/ or Blade components
• Frontend forms that fail to submit or show loading states
• Interactive UI elements: modals, dropdowns, toggles, menus
• Styling issues: Tailwind classes, dark mode, responsive layout problems
• Asset problems: images or JS not loading, Vite/HMR failures
• JavaScript errors that break Alpine or Vue behavior

Best practices

• Keep Blade components small and reusable; use props for configuration
• Prefer Alpine for light interactivity and Vue for complex client-side apps
• Register Vite inputs in layouts via @vite(['resources/css/app.css','resources/js/app.js'])
• Use Tailwind utility classes and dark: variants consistently; test responsive breakpoints
• Guard Alpine state with x-data defaults and use @click.away for dropdowns and modals
• Log and inspect console errors and network requests for asset-related problems

Example use cases

• Modal not opening: check x-data, x-show, transition classes and z-index/backdrop ordering
• Form submit not working: ensure @submit.prevent usage, CSRF token present, and loading logic calls $el.submit() correctly
• Button or click not working: confirm event binding (Alpine @click vs Vue @click) and no overlapping elements blocking clicks
• Image not loading: verify asset path via Vite, run npm run dev and check network tab for 404s
• Dark mode styling inconsistent: ensure dark class on body/layout and use dark: utilities on elements