PixelPilot: Instructions file for GitHub Copilot

OpenCode UI/UX 2026 — Laravel Integration Skill

This skill provides guidelines and best practices for integrating the OpenCode UI/UX 2026 design system within Laravel applications, specifically focusing on Blade templates and Vite for asset bundling. Adhering to these patterns ensures a consistent, secure, and performant user experience.

1. CSRF Token Protection (@csrf Directive)

Cross-Site Request Forgery (CSRF) protection is a critical security measure in web applications. Laravel makes it easy to protect your forms using the @csrf Blade directive, which generates a hidden input field containing a CSRF token. This token is then verified by Laravel upon form submission.

Step-by-step Instructions

1. Include in all forms: For any HTML form that submits data via POST, PUT, or DELETE methods, ensure the @csrf directive is placed inside the <form> tags.

Code Example

<form method="POST" action="/profile">
    @csrf
    <!-- Other form fields -->
    <input type="text" name="name" value="{{ old("name") }}">
    <button type="submit">Update Profile</button>
</form>

2. Vite Asset Bundling (@vite Directive)

Vite is the recommended build tool for modern Laravel applications, offering a fast development experience and optimized production builds. Laravel provides a convenient @vite Blade directive to include your compiled assets.

Step-by-step Instructions

1. Configure vite.config.js: Ensure your Vite configuration correctly points to your entry points (e.g., resources/js/app.js, resources/css/app.css).
2. Include in Blade Layout: Place the @vite directive in your main Blade layout file, typically within the <head> section for CSS and before the closing </body> tag for JavaScript.

Code Example

<!DOCTYPE html>
<html lang="{{ str_replace("_", "-", app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Laravel App</title>
    @vite(["resources/css/app.css", "resources/js/app.js"])
</head>
<body>
    <div id="app">
        @yield("content")
    </div>
</body>
</html>