Tailwind CSS

Modern web development demands highly interactive interfaces without the overhead of complex JavaScript frameworks. Livewire continues to bridge this gap, and its version 4 release introduces refined patterns that streamline the Laravel developer experience. By examining practical implementations, we can see how the framework balances performance with developer happiness. Dynamic Three-Level Dependent Dropdowns A common challenge in UI design is managing cascading data, such as selecting a country, state, and then a city. In Livewire v4, this is handled elegantly through updated hooks and computed properties. When a user selects a parent entity, the `updated` method triggers a refresh of the child datasets. By utilizing `wire:model.live`, the state synchronization occurs in real-time. For terminal nodes that don't trigger further UI changes, standard `wire:model` suffices, reducing unnecessary network requests while maintaining data integrity. Structured Multi-Step Form Logic Complex data entry often requires splitting forms into logical steps to avoid overwhelming the user. Livewire facilitates this by managing the `currentStep` state on the server. Developers can implement custom validation rules for each specific step, ensuring data is clean before the user progresses. The use of Tailwind CSS classes tied to the step state allows for dynamic visual feedback, such as disabling future steps or highlighting completed ones, creating a guided narrative for the end-user. Advanced Invoice Management with Real-Time Totals Building an invoice generator requires handling dynamic arrays of products and synchronized calculations. This pattern involves an `invoiceProducts` array where each entry tracks quantity and price. By leveraging computed properties for subtotal and grand total calculations, the UI stays in sync without manual event listeners. Livewire v4 handles the complex object mapping required to add or remove items from the collection while ensuring taxes and totals are recalculated instantly as inputs change. Component Communication in E-commerce Carts Isolated components often need to talk to one another, such as a product list updating a shopping cart counter. Version 4 utilizes an elegant event dispatching system. When a product is added, a global event is fired, which the cart component "listens" for to trigger a refresh. This decoupling allows developers to build modular, reusable pieces of UI that remain synchronized across the entire page layout. The Power of the Island Function and Autosave One of the most impressive additions is the `island` function, which allows specific parts of a component to refresh independently. For content creators, an autosave feature for drafts is vital. By combining an island with `wire:poll`, developers can trigger a background save every 10 seconds. This ensures that only the necessary draft logic executes, preserving the main input state and providing the user with a "Saved at" timestamp for peace of mind. Mastering these five patterns—cascading logic, multi-step flows, dynamic arrays, inter-component events, and background polling—provides a robust foundation for building high-performance Laravel applications that feel as snappy as a dedicated SPA.

Overview: The Context Gap in AI Development AI agents have changed how we write code, but they often struggle with the nuances of specific frameworks. Standard models like Claude 3.5 Sonnet or GPT-4o possess vast general knowledge but lack the hyper-specific context of your local Laravel project. This lead to hallucinations, outdated syntax, or the AI suggesting patterns that conflict with your application's architecture. Laravel Boost solves this by acting as a bridge. It injects project-specific metadata, documentation, and "skills" directly into your AI agent's reasoning loop. Instead of manually feeding documentation to a chat window, Boost automates the context delivery. Version 2.0 introduces a major shift from a monolithic guideline approach to a modular, "skills-first" architecture. This reduces context bloat, saves on token costs, and makes the AI significantly more accurate by only providing the information it needs at that exact moment. Prerequisites To follow this guide and implement Boost 2.0, you should be comfortable with the following: * **PHP 8.2+:** Boost 2.0 has officially dropped support for PHP 8.1. * **Laravel 11 or 12:** Older versions like Laravel 10 are supported only by legacy versions of Boost (v1.x). * **Composer:** Basic knowledge of managing PHP dependencies. * **AI Coding Agents:** Familiarity with tools like Cursor, Claude Code, GitHub Copilot, or Juni. Key Libraries & Tools * **Laravel Boost:** The core CLI tool and package that manages AI context and skills. * **Laravel MCP:** A package for building Model Context Protocol servers, allowing AI agents to interact with your app's internal state (routes, database schemas, etc.). * **Remotion:** A React-based framework for programmatic video creation, often used as a demonstration of complex AI skill integration. * **Prism:** A Laravel package for working with LLMs, used to demonstrate how documentation can be bundled directly into vendor folders for AI consumption. Code Walkthrough: Installing and Configuring Boost 2.0 Setting up Boost 2.0 is a methodical process. It begins with the Laravel installer and moves into a randomized, aesthetically pleasing configuration CLI. 1. Installation First, ensure your Laravel installer is up to date to access the built-in Boost prompts during new project creation. If you are adding it to an existing project, use Composer: ```bash composer require laravel/boost --dev ``` 2. Initialization Run the install command to start the interactive configuration. ```bash php artisan boost:install ``` This command triggers a CLI interface featuring randomized gradients—a touch of "developer joy" added by Pushpak Chhajed. You will be prompted to select which features to configure: AI Guidelines, Agent Skills, or the MCP server. 3. Selecting Your AI Agent Boost 2.0 simplifies agent selection. Instead of choosing both an IDE and an agent, you now choose the specific agentic tool you use daily, such as Claude Code or Cursor. Boost will then automatically determine the correct file paths for these tools. 4. Automated Skill Syncing To ensure your AI context stays updated as your project evolves, add the update command to your `composer.json` file: ```json "scripts": { "post-update-cmd": [ "@php artisan boost:update" ] } ``` This ensures that every time you update your dependencies, Boost re-scans your `composer.json` and syncs the relevant skills for packages like Inertia, Tailwind CSS, or Livewire. Deep Dive into Skills vs. Guidelines Understanding the distinction between these two features is critical for a clean development workflow. Guidelines: The Global Rules Guidelines are persistent. They contain high-level rules that the AI should *always* know. For example, if you always use Pest for testing or strictly follow an Action-based architecture, these belong in your guidelines. However, shoving every package's documentation into a guideline leads to "context fatigue," where the AI becomes overwhelmed and starts to hallucinate. Skills: The On-Demand Context Skills are modular Markdown files. They aren't loaded into the AI's memory until they are needed. Each skill has a name and a description in its front matter. When you ask the AI to "build a new UI component with Tailwind," the agent sees the keyword "Tailwind," looks at its available skills, and activates the Tailwind CSS skill. This keeps the prompt lean and the output precise. Syntax Notes: Custom Skill Creation Creating a custom skill allows you to automate highly specific tasks, like generating pull request descriptions or adhering to internal API versioning standards. Skills rely on a specific Markdown front matter format. ```markdown --- name: my-custom-skill description: Use this skill when generating API endpoints or PR descriptions. --- My Custom Skill Rules - Always use the `App\Actions` namespace for business logic. - Ensure all API responses are wrapped in a standard `JsonResource`. - Pull Request descriptions must include a 'Breaking Changes' section. ``` When you save this in a local `.boost/skills` directory and run `php artisan boost:update`, Boost replicates this file into the hidden configuration folders of your chosen AI agents (e.g., `.cursor/rules` or `.claudecode/skills`). Practical Examples Automating Pull Requests You can create a skill that teaches an agent how to use the GitHub CLI. By invoking the skill with a slash command (e.g., `/create-pr`), the AI can analyze your staged changes, write a formatted description, and execute the CLI command to open the PR. Package-Specific Intelligence If you build a project using Filament, you don't want the AI thinking about Filament when you are just debugging a console command. By using a Filament skill, the AI only accesses those specific layout and component rules when you are actively working on the admin panel. Tips & Gotchas * **Git Management:** Never commit the auto-generated agent folders (like `.cursor/rules`) to your repository. These are local mirrors. Only commit the `.boost` folder and your `boost.json` file. This allows your teammates to run `boost:install` and get the exact same AI behavior on their machines. * **Hallucination Prevention:** If your AI starts ignoring your project structure, check your guideline length. If it exceeds 500 lines, move package-specific rules into individual skills. * **Legacy Projects:** Do not attempt to use Boost 2.0 on Laravel 10 projects. The dependency tree for the new MCP features and skills requires the modern internals found in Laravel 11 and up. * **Manual Invocation:** If an agent fails to auto-detect a skill, you can usually force it by using a slash command in the chat interface. Most modern agents support `/` to list and select active skills.

Overview: Why Your AI Agent Needs a Boost AI models like Claude and GPT-4 are powerful, but they arrive at your codebase as strangers. They possess a massive, static library of internet-scale training data, but they lack the specific, real-time context of your unique Laravel application. This gap often leads to what developers call "hallucinations"—code that looks correct but fails to follow your team's conventions or uses deprecated patterns. Laravel Boost is designed to solve this context deficiency. It acts as a bridge, packaging your application's routes, configuration, and coding standards into a format that AI agents can ingest and act upon. With the release of Boost 2.0, the focus has shifted from merely providing static instructions to implementing dynamic **Skills** and the **Model Context Protocol (MCP)**. This evolution allows developers to manage the "Context Window"—the finite memory of an AI model—with surgical precision, ensuring the agent only sees what it needs to see to complete a specific task. Prerequisites: Setting the Stage To effectively implement Laravel Boost 2.0, you should have a baseline understanding of the following: * **Modern PHP & Laravel**: Familiarity with PHP 8.2 and Laravel 12 is essential, as Boost 2.0 has moved away from supporting older versions to utilize the latest framework features. * **AI Coding Tools**: You should be using an AI-capable editor or agent such as Claude Dev, Cursor, GitHub Copilot, or Windsurf. * **Command Line Basics**: You will need to interact with the terminal to run Artisan commands for installation and synchronization. Key Libraries & Tools * **Laravel Boost**: The core package that manages guidelines, skills, and the MCP server for AI integration. * **Laravel MCP**: A foundational package that implements the Model Context Protocol, allowing external systems (like your app) to communicate with AI models. * **Composer**: Used for managing dependencies and third-party AI skills. * **MCP Inspector**: A utility for debugging the connection between your editor and the MCP server. Code Walkthrough: Installation and Configuration Setting up Laravel Boost 2.0 is a methodical process. It begins with a standard installation and moves into configuring how the AI interacts with your files. Step 1: Installation Run the following command in your project root: ```bash composer require laravel/boost --dev php artisan boost:install ``` During installation, the CLI will prompt you to select which AI agents you are using (e.g., Cursor, Claude). This is critical because each agent looks for context in different locations—Cursor uses `.cursorrules`, while others might look for `agents.md`. Step 2: Synchronizing Skills and Guidelines Whenever you update your configuration or add custom rules, you must run the update command to rebuild the context files that the AI reads: ```bash php artisan boost:update ``` This command scans your `AI/guidelines` and `AI/skills` directories, composing a unified markdown file (like `claudedev.md`) that represents the current state of your project's rules. Step 3: Customizing Business Logic One of the most powerful features of Boost 2.0 is the ability to inject custom business context. You can publish the configuration file to unlock this: ```bash php artisan vendor:publish --tag=boost-config ``` Inside `config/boost.php`, you can add a `purpose` key. This is where you tell the AI exactly what the app does—for example, "This project is a logistics platform for tracking international shipping containers." ```php return [ 'purpose' => 'A financial dashboard for tracking cryptocurrency tax compliance.', 'coding_style' => 'Spatie', // ... other config ]; ``` Syntax Notes: The Architecture of a Skill A **Skill** in Boost 2.0 is a specialized markdown file that the AI can "invoke" only when needed. This prevents the context window from being cluttered with irrelevant information. The syntax follows a specific pattern: ```markdown Name: Inertia Vue Development Description: Use this skill when building or modifying Vue components within the Inertia.js stack. Implementation Guidelines - Always use the <script setup> syntax. - Utilize Tailwind CSS for all styling. - Ensure all components are stored in the resources/js/Pages directory. ``` The AI reads the `# Description` to decide if the skill is relevant to your current prompt. If you ask to fix a CSS bug, it will pull in the **Tailwind Skill** but ignore the **Database Skill**, saving thousands of tokens. Practical Examples: Real-World Agent Workflows Automated Refactoring with Verification Don't just ask an AI to refactor code; ask it to verify its work using the tools provided by Laravel Boost. A high-level prompt might look like this: "Refactor the `OrderController@store` method to use a Form Request. Use the **Laravel Skill** for validation patterns. Once completed, use the **Tinker Tool** via MCP to create a test order and ensure the database record is created correctly." Documentation Ingestion If you are using a new package that the AI hasn't been trained on, you can use the `search_docs` tool provided by the Boost MCP server. The agent can query the latest Laravel documentation in real-time to find the correct syntax for Laravel 12 features like Pest integration or the newest Inertia helpers. Tips & Gotchas: Navigating the AI Frontier * **The Context Trap**: Be careful not to put too much in your `guidelines`. If your `agents.md` file becomes 10,000 lines long, the AI will lose the thread of your conversation. Move specific package logic into **Skills** so they are only loaded on demand. * **Plan Mode First**: Always use "Plan Mode" in your AI editor before letting it write code. This allows the agent to outline its approach based on the Boost guidelines before it commits to a file structure. * **Sync Often**: If you change a route name or a config value, run `php artisan boost:update`. If you don't, the AI will be working from a "ghost" version of your app's previous state. * **Override Wisely**: Boost comes with sensible defaults for Tailwind and Pest. However, if your team has a unique way of writing tests, create a custom file in `AI/skills/pest.md` to override the default Laravel Boost behavior.

Overview Laravel Notify by Arthur%20Mone streamlines the implementation of toast notifications within the Laravel ecosystem. Version 3 introduces refined animations and a variety of visual presets that move beyond standard success or error alerts. It serves as a bridge between backend logic and frontend user feedback, allowing developers to trigger high-quality UI components directly from controllers or components. Prerequisites To implement this package effectively, you should possess a working knowledge of the PHP language and the Laravel framework. Familiarity with Tailwind CSS is necessary for styling, and basic understanding of Blade templates or Livewire will help you place the notification components correctly. Key Libraries & Tools - **Laravel Notify**: The primary package for flash notifications. - **Composer**: The dependency manager used for installation. - **Tailwind CSS**: Utility-first CSS framework required for the notification styles. - **Livewire**: Optional full-stack framework for dynamic interfaces. Code Walkthrough Begin by installing the package via Composer and publishing the configuration assets: ```bash composer require mckenziearts/laravel-notify php artisan vendor:publish --provider="Mckenziearts\Notify\LaravelNotifyServiceProvider" ``` Next, integrate the notification component into your main layout or sidebar within your Blade templates. This component acts as the container for all incoming alerts: ```blade {{-- resources/views/layouts/app.blade.php --}} <x-notify-messages /> @notifyJs ``` To trigger a notification from a controller, use the provided helper methods. The `notify()` function allows you to chain a status and a `send()` call to finalize the action: ```php public function store(Request $request) { // Logic to save data notify()->success('Feedback submitted successfully', 'Success'); return redirect()->back(); } ``` Syntax Notes The package utilizes a fluent API for notification construction. You can swap `.success()` for `.error()`, `.info()`, or `.warning()`. For specialized layouts, use the `connectify` or `emotify` methods which change the visual structure and icon set used in the toast. Practical Examples Beyond simple success messages, Laravel Notify supports "Drakify," which uses specific imagery for internal systems, and "Smiley" notifications for a more friendly user experience. These are particularly useful in administrative dashboards where you want to distinguish between system logs and user-facing feedback. Tips & Gotchas Ensure your Tailwind CSS configuration includes the package's view paths. If the notifications appear unstyled, check that you have imported the `@notifyCss` and `@notifyJs` directives in your layout. Always remember to call `->send()` at the end of your chain to ensure the flash data persists for the next request.

Overview Building modern web interfaces often feels like a forced march toward JavaScript frameworks. Many developers just want the power of Laravel Blade templates without the overhead of React or Vue. The FlyonUI Starter Kit fills this gap. It provides a pre-configured environment that merges the elegance of Tailwind CSS with a robust set of FlyonUI components. This allows for a rich, interactive dashboard experience while keeping the backend logic strictly within PHP. Prerequisites To effectively use this kit, you should have a solid grasp of: - **Laravel 12**: Familiarity with routing, controllers, and Blade syntax. - **Tailwind CSS**: Understanding utility-first styling. - **Composer & NPM**: Essential for managing PHP dependencies and asset bundling. Key Libraries & Tools - **Laravel 12**: The core framework providing the application skeleton. - **FlyonUI**: A headless UI component library that uses Tailwind CSS classes to deliver components like modals, accordions, and tables. - **Tailwind CSS**: The underlying styling engine. - **Vite/NPM**: Handles the compilation of assets and integration of JavaScript functionality. Code Walkthrough Installation You can spin up a new project using the Laravel installer by targeting the specific repository. Use the following terminal command: ```bash laravel new my-app --github="LaravelDaily/flyonui-starter-kit" ``` The Frontend Architecture In the `resources/views/layouts/app.blade.php` file, you will notice that FlyonUI components are integrated directly via standard HTML classes. Unlike Headless UI, these feel more like Bootstrap in their simplicity. ```html <!-- Example of a FlyonUI Button in a Blade file --> <button class="btn btn-primary"> Click Me </button> ``` In the `dashboard.blade.php` file, the kit implements a multi-level navigation system using standard Blade directives and FlyonUI classes to handle state and visibility without custom JS scripts. Syntax Notes FlyonUI relies heavily on specific utility classes that resemble traditional CSS frameworks. For example, using `btn` and `btn-primary` triggers complex Tailwind CSS layers under the hood. It also utilizes a CDN-based JavaScript approach for interactive components by default, though you can migrate this to an NPM-managed workflow within `app.js`. Practical Examples This kit is perfect for **Internal Admin Panels** where developer speed is more critical than complex client-side state management. It is also an excellent choice for **SaaS MVPs** that need a professional look immediately upon registration without the complexity of an Inertia.js stack. Tips & Gotchas Be mindful of the JavaScript dependencies. While the CSS is pure Tailwind, some components like dropdowns require the FlyonUI JS script to function. If you notice UI elements not responding, check that the script is properly linked in your main layout file. Always refer to the FlyonUI documentation when extending the kit, as certain components require specific nested HTML structures to render correctly.

Overview: The Context Gap in AI Development Standard AI models often stumble when working with Laravel because they lack two critical components: up-to-date documentation and framework-specific context. Generic agents rely on static training data, which means they are unaware of the latest features like request batching in Laravel 12. Laravel Boost bridges this gap by providing Model Context Protocol (MCP) servers and tailored guidelines directly to your AI agent, transforming it from a general coder into a framework expert. Prerequisites To follow this guide, you should be comfortable with the Artisan CLI and have a basic understanding of Composer package management. You will also need an AI-capable code editor such as Cursor or Claude Code. Key Libraries & Tools - **Laravel Boost**: The core package that provides tools and context to AI agents. - **Claude Code**: A command-line AI agent from Anthropic that integrates with MCP servers. - **Pest**: A testing framework for PHP included in the automated guidelines. - **Tailwind CSS**: A utility-first CSS framework supported by Boost's styling guidelines. Installation and Configuration After adding the package via Composer, you initialize the environment using a specialized Artisan command. This process generates specific guidelines by scanning your `composer.json` to see exactly which versions of tools like PHP or Alpine.js you are using. ```bash php artisan boost:install ``` During setup, you select your preferred editor and agent. Boost then injects best practices into your workspace, ensuring the AI adheres to the latest community standards and version-specific syntax. The Power of MCP Tools Once connected to the Model Context Protocol server, your agent gains "superpowers" through specialized tools: - **Search Docs**: Allows the AI to query the live Laravel documentation for brand-new features. - **Database Query**: Enables the agent to check record counts or table structures directly. - **Tinker**: Lets the AI run Laravel Tinker commands to test logic without creating temporary files. - **Browser Logs**: Helps the agent read error logs to debug issues autonomously. Syntax Notes & Best Practices Boost focuses on **version-aware syntax**. If your project uses Laravel 12, the AI will prioritize new hooks and features over deprecated Laravel 11 patterns. It also enforces strict testing standards for Pest, ensuring your generated tests are modern and readable. Tips & Gotchas Always ensure your MCP server is actually connected in your editor settings. If the AI claims it doesn't know about a feature, check if the `search_docs` tool is active. Using the **Tinker tool** is significantly safer than letting an AI create random PHP scripts, as it prevents leftover "junk" files from cluttering your production-ready codebase.

Overview Modern development often involves leveraging automation to generate boilerplate code, but the real skill lies in identifying which patterns offer the best long-term maintenance. This guide explores the architectural differences in Laravel CRUD implementation, focusing on routing strategy, controller logic, and Blade template reusability. By comparing different approaches to the same task, developers can learn to write cleaner, more idiomatic code. Prerequisites To follow this guide, you should have a baseline understanding of PHP and the Laravel framework. Familiarity with Tailwind CSS, RESTful routing, and basic Blade syntax is recommended. Key Libraries & Tools * **Laravel**: The primary PHP framework used for routing and MVC structure. * **Blade**: The templating engine for creating reusable UI components. * **Tailwind CSS**: A utility-first CSS framework for styling components. Code Walkthrough Strategic Routing Groups When adding new controllers, don't just append routes to the bottom of your file. Group them by middleware to prevent repetition. ```php Route::middleware(['auth'])->group(function () { Route::get('/dashboard', [DashboardController::class, 'index'])->name('dashboard'); Route::resource('cars', CarController::class); }); ``` This approach ensures that all related authenticated routes share the same security layer, making future changes to access levels easier to manage. Reusable Controller Data Instead of creating temporary variables in both `create` and `edit` methods, use a private helper method to build your data arrays. ```php private function formOptions(): array { return [ 'brands' => Brand::orderBy('name')->pluck('name', 'id'), 'categories' => Category::orderBy('name')->pluck('name', 'id'), ]; } public function create() { return view('cars.create', $this->formOptions()); } ``` The ForElse Directive Handle empty states elegantly within your Blade tables using `@forelse`. This combines a loop and a conditional check for empty collections. ```blade @forelse ($cars as $car) <tr><td>{{ $car->name }}</td></tr> @empty <tr><td>No records found. <a href="{{ route('cars.create') }}">Add one?</a></td></tr> @endforelse ``` Syntax Notes Laravel provides a `@class` directive that simplifies conditional styling. Instead of clunky `if/else` blocks inside your HTML tags, you can pass an array where the key is the CSS class and the value is the boolean condition. Practical Examples These patterns are highly effective when building administrative dashboards or internal management tools where multiple entities require identical form fields for both creation and modification. Using partial forms and shared controller methods reduces the surface area for bugs. Tips & Gotchas While merging `create` and `edit` forms into a single partial sounds efficient, it often leads to a "messy middle" where you have too many `@if` statements to handle subtle differences like password fields or unique IDs. Only use partials if the forms are nearly identical. For dynamic styling, the PHP `match` statement is often more readable than a long `@class` directive when dealing with complex logic.