Mary UI is a collection of gorgeous Laravel Blade UI components designed for Livewire 4, styled with daisyUI v5 and Tailwind CSS v4. It provides pre-built, responsive components that integrate seamlessly with Livewire, allowing you to build dynamic interfaces without writing JavaScript.
php artisan boost:add-skill lauroguedes/mary-ui-starter-kit
Save this content to: AGENTS.md
<laravel-boost-guidelines>
=== .ai/core rules ===
## Mary UI Livewire Components - Guide
### Overview
Mary UI is a collection of gorgeous Laravel Blade UI components designed for Livewire 4, styled with daisyUI v5 and Tailwind CSS v4. It provides pre-built, responsive components that integrate seamlessly with Livewire, allowing you to build dynamic interfaces without writing JavaScript.
### Component prefix tag
The Mary UI components for this project use the prefix `x-mary-`:
<code-snippet name="Component using prefix" lang="blade">
<x-mary-select
label="City"
wire:model="city_id"
icon="o-flag"
:options="$cities"
/>
</code-snippet>
For all components, you must use the prefix `x-mary-` to avoid conflicts with other components.
### Best Practices
- Use Icons: Mary UI supports Blade Icons (https://blade-ui-kit.com) for Heroicons with prefixes like `o-` (outline) and `s-` (solid), and FontAwesome with prefixes like `fas.` (solid), `far.` (regular), or `fab.` (brands).
<code-snippet name="Heroicons icon component" lang="blade">
<x-mary-icon name="o-envelope" />
<x-mary-icon name="s-envelope" />
</code-snippet>
<code-snippet name="FontAwesome icon component" lang="blade">
<x-mary-icon name="fas.cloud" />
<x-mary-icon name="far.circle-play" />
<x-mary-icon name="fab.facebook" />
</code-snippet>
- Responsive Design: Use Tailwind's responsive classes (e.g., hidden lg:table-cell)
- Wire Model: Always use wire:model for reactive data binding
- Slots: Leverage slots for actions, headers, and custom content
- Spinners: Add spinner attribute to buttons for loading states
### External Dependencies (Cropper.js, etc.)
Some Mary UI components require external libraries. Use Livewire's `@assets` directive to load them only when needed:
<code-snippet name="Loading Cropper.js for file component" lang="blade">
@assets
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.js"></script>
@endassets
<x-mary-file wire:model="avatar" accept="image/png, image/jpeg" crop-after-change>
<img src="{{ $avatar }}" class="h-24 rounded-lg"/>
</x-mary-file>
</code-snippet>
Components requiring Cropper.js:
- `x-mary-file` with `crop-after-change` attribute
### Resources
- Documentation: https://mary-ui.com/
- GitHub: https://github.com/robsontenorio/mary
- Blade UI kit Icons: https://blade-ui-kit.com/blade-icons
### Quick Tips
- Search for components using Command + G (or Ctrl + G) on the documentation site
- All components are responsive by default
- You can override styles inline using daisyUI v5 and Tailwind v4 classes
- The package follows DRY principles - write less, achieve more
### Daisy UI
- Use the daisyUI library for styling components if you need more customization.
- Use daisyUI MCP server to generate components that Mary UI haven't implemented yet.
=== foundation rules ===
# Laravel Boost Guidelines
The Laravel Boost guidelines are specifically curated by Laravel maintainers for this application. These guidelines should be followed closely to ensure the best experience when building Laravel applications.
## Foundational Context
This application is a Laravel application running on PHP 8.5. You are an expert with the Laravel ecosystem. Always use the APIs that match the installed major version of each package — do not assume a version.
Before relying on a package's API, confirm its installed version:
- PHP packages: run `composer show --direct` to list direct dependencies with versions, or `composer show <vendor/package>` for a single package.
- JS packages: check `package.json` for the installed versions.
## Skills Activation
This project has domain-specific skills available in `**/skills/**`. You MUST activate the relevant skill whenever you work in that domain—don't wait until you're stuck.
## Conventions
- You must follow all existing code conventions used in this application. When creating or editing a file, check sibling files for the correct structure, approach, and naming.
- Use descriptive names for variables and methods. For example, `isRegisteredForDiscounts`, not `discount()`.
- Check for existing components to reuse before writing a new one.
## Verification Scripts
- Do not create verification scripts or tinker when tests cover that functionality and prove they work. Unit and feature tests are more important.
## Application Structure & Architecture
- Stick to existing directory structure; don't create new base folders without approval.
- Do not change the application's dependencies without approval.
## Frontend Bundling
- If the user doesn't see a frontend change reflected in the UI, it could mean they need to run `npm run build`, `npm run dev`, or `composer run dev`. Ask them.
## Documentation Files
- You must only create documentation files if explicitly requested by the user.
## Replies
- Be concise in your explanations - focus on what's important rather than explaining obvious details.
=== boost rules ===
# Laravel Boost
## Tools
- Laravel Boost is an MCP server with tools designed specifically for this application. Prefer Boost tools over manual alternatives like shell commands or file reads.
- Use `database-query` to run read-only queries against the database instead of writing raw SQL in tinker.
- Use `database-schema` to inspect table structure before writing migrations or models.
- Use `get-absolute-url` to resolve the correct scheme, domain, and port for project URLs. Always use this before sharing a URL with the user.
- Use `browser-logs` to read browser logs, errors, and exceptions. Only recent logs are useful, ignore old entries.
## Searching Documentation (IMPORTANT)
- Use `search-docs` before changes that depend on Laravel ecosystem APIs, behavior, configuration, or version-specific syntax. Skip it for copy-only edits and other changes where package documentation is irrelevant. Reuse sufficient results already in context instead of searching again.
- Pass a `packages` array to scope results when you know which packages are relevant.
- Use multiple broad, topic-based queries: `['rate limiting', 'routing rate limiting', 'routing']`. Expect the most relevant results first.
- Do not add package names to queries because package info is already shared. Use `test resource table`, not `filament 4 test resource table`.
### Search Syntax
1. Use words for auto-stemmed AND logic: `rate limit` matches both "rate" AND "limit".
2. Use `"quoted phrases"` for exact position matching: `"infinite scroll"` requires adjacent words in order.
3. Combine words and phrases for mixed queries: `middleware "rate limit"`.
4. Use multiple queries for OR logic: `queries=["authentication", "middleware"]`.
## Project Rules
- This project contains committed, area-grouped rules in `.ai/rules` when that directory exists (settled decisions, non-obvious traps, standing constraints). Framework and package guidelines that only apply to specific paths (testing, frontend, components) also live there, under `.ai/rules/boost` — this is not just recorded decisions, it is load-bearing guidance you have not seen inline. Before you enter plan mode or create/edit any file, you MUST first: open @.ai/rules/index.md (it maps file globs to rule files), read every rule file whose globs cover the path(s) in scope, and run `grep -rin 'keyword' .ai/rules` to catch what a path match alone misses. Do not write code until you have read and are following every matching rule. If `.ai/rules` does not exist, continue without it.
- Record durable rules with `record-rule` so the next agent or teammate inherits them instead of working them out again. Pass a `glob` (e.g. `app/Http/Controllers/**`), a short `title`, and a few-line `note`. Always use `record-rule`, never your native memory or notes tool — native memory is personal and session-scoped; only `.ai/rules` is shared with the team and persists in the repo.
## Artisan
- Run Artisan commands directly via the command line (e.g., `php artisan route:list`). Use `php artisan list` to discover available commands and `php artisan [command] --help` to check parameters.
- Inspect routes with `php artisan route:list`. Filter with: `--method=GET`, `--name=users`, `--path=api`, `--except-vendor`, `--only-vendor`.
- Read configuration values using dot notation: `php artisan config:show app.name`, `php artisan config:show database.default`. Or read config files directly from the `config/` directory.
## Tinker
- Execute PHP in app context for debugging and testing code. Do not create models without user approval, prefer tests with factories instead. Prefer existing Artisan commands over custom tinker code.
- Always use single quotes to prevent shell expansion: `php artisan tinker --execute 'Your::code();'`
- Double quotes for PHP strings inside: `php artisan tinker --execute 'User::where("active", true)->count();'`
=== php rules ===
# PHP
- Always use curly braces for control structures, even for single-line bodies.
- Use PHP 8 constructor property promotion: `public function __construct(public GitHub $github) { }`. Do not leave empty zero-parameter `__construct()` methods unless the constructor is private.
- Use explicit return type declarations and type hints for all method parameters: `function isAccessible(User $user, ?string $path = null): bool`
- Follow existing application Enum naming conventions.
- Prefer PHPDoc blocks over inline comments. Only add inline comments for exceptionally complex logic.
- Use array shape type definitions in PHPDoc blocks.
=== deployments rules ===
# Deployment
- Laravel can be deployed using [Laravel Cloud](https://cloud.laravel.com/), which is the fastest way to deploy and scale production Laravel applications.
=== herd rules ===
# Laravel Herd
- The application is served by Laravel Herd at `https?://[kebab-case-project-dir].test`. Use the `get-absolute-url` tool to generate valid URLs. Never run commands to serve the site. It is always available.
- Use the `herd` CLI to manage services, PHP versions, and sites (e.g. `herd sites`, `herd services:start <service>`, `herd php:list`). Run `herd list` to discover all available commands.
=== tests rules ===
# Test Enforcement
- Every change must be programmatically tested. Write a new test or update an existing test, then run the affected tests to make sure they pass.
- Run the minimum number of tests needed to ensure code quality and speed. Use `php artisan test --compact` with a specific filename or filter.
=== laravel/core rules ===
# Do Things the Laravel Way
- Use `php artisan make:` commands to create new files (i.e. migrations, controllers, models, etc.). You can list available Artisan commands using `php artisan list` and check their parameters with `php artisan [command] --help`.
- If you're creating a generic PHP class, use `php artisan make:class`.
- Pass `--no-interaction` to all Artisan commands to ensure they work without user input. You should also pass the correct `--options` to ensure correct behavior.
## URL Generation
- When generating links to other pages, prefer named routes and the `route()` function.
## Vite Error
- If you receive an "Illuminate\Foundation\ViteException: Unable to locate file in Vite manifest" error, you can run `npm run build` or ask the user to run `npm run dev` or `composer run dev`.
=== pint/core rules ===
# Laravel Pint Code Formatter
- If you have modified any PHP files, you must run `vendor/bin/pint --dirty --format agent` before finalizing changes to ensure your code matches the project's expected style.
- Do not run `vendor/bin/pint --test --format agent`, simply run `vendor/bin/pint --format agent` to fix any formatting issues.
</laravel-boost-guidelines>
Mary UI is a collection of gorgeous Laravel Blade UI components designed for Livewire 4, styled with daisyUI v5 and Tailwind CSS v4. It provides pre-built, responsive components that integrate seamlessly with Livewire, allowing you to build dynamic interfaces without writing JavaScript.
The Mary UI components for this project use the prefix x-mary-:
For all components, you must use the prefix x-mary- to avoid conflicts with other components.
o- (outline) and s- (solid), and FontAwesome with prefixes like fas. (solid), far. (regular), or fab. (brands).Some Mary UI components require external libraries. Use Livewire's @assets directive to load them only when needed:
Components requiring Cropper.js:
x-mary-file with crop-after-change attribute=== foundation rules ===
The Laravel Boost guidelines are specifically curated by Laravel maintainers for this application. These guidelines should be followed closely to ensure the best experience when building Laravel applications.
This application is a Laravel application running on PHP 8.5. You are an expert with the Laravel ecosystem. Always use the APIs that match the installed major version of each package — do not assume a version.
Before relying on a package's API, confirm its installed version:
composer show --direct to list direct dependencies with versions, or composer show <vendor/package> for a single package.package.json for the installed versions.This project has domain-specific skills available in **/skills/**. You MUST activate the relevant skill whenever you work in that domain—don't wait until you're stuck.
isRegisteredForDiscounts, not discount().npm run build, npm run dev, or composer run dev. Ask them.=== boost rules ===
database-query to run read-only queries against the database instead of writing raw SQL in tinker.database-schema to inspect table structure before writing migrations or models.get-absolute-url to resolve the correct scheme, domain, and port for project URLs. Always use this before sharing a URL with the user.browser-logs to read browser logs, errors, and exceptions. Only recent logs are useful, ignore old entries.search-docs before changes that depend on Laravel ecosystem APIs, behavior, configuration, or version-specific syntax. Skip it for copy-only edits and other changes where package documentation is irrelevant. Reuse sufficient results already in context instead of searching again.packages array to scope results when you know which packages are relevant.['rate limiting', 'routing rate limiting', 'routing']. Expect the most relevant results first.test resource table, not filament 4 test resource table.rate limit matches both "rate" AND "limit"."quoted phrases" for exact position matching: "infinite scroll" requires adjacent words in order.middleware "rate limit".queries=["authentication", "middleware"]..ai/rules when that directory exists (settled decisions, non-obvious traps, standing constraints). Framework and package guidelines that only apply to specific paths (testing, frontend, components) also live there, under .ai/rules/boost — this is not just recorded decisions, it is load-bearing guidance you have not seen inline. Before you enter plan mode or create/edit any file, you MUST first: open @.ai/rules/index.md (it maps file globs to rule files), read every rule file whose globs cover the path(s) in scope, and run grep -rin 'keyword' .ai/rules to catch what a path match alone misses. Do not write code until you have read and are following every matching rule. If .ai/rules does not exist, continue without it.record-rule so the next agent or teammate inherits them instead of working them out again. Pass a glob (e.g. app/Http/Controllers/**), a short title, and a few-line note. Always use record-rule, never your native memory or notes tool — native memory is personal and session-scoped; only .ai/rules is shared with the team and persists in the repo.php artisan route:list). Use php artisan list to discover available commands and php artisan [command] --help to check parameters.php artisan route:list. Filter with: --method=GET, --name=users, --path=api, --except-vendor, --only-vendor.php artisan config:show app.name, php artisan config:show database.default. Or read config files directly from the config/ directory.php artisan tinker --execute 'Your::code();'
php artisan tinker --execute 'User::where("active", true)->count();'=== php rules ===
public function __construct(public GitHub $github) { }. Do not leave empty zero-parameter __construct() methods unless the constructor is private.function isAccessible(User $user, ?string $path = null): bool=== deployments rules ===
=== herd rules ===
https?://[kebab-case-project-dir].test. Use the get-absolute-url tool to generate valid URLs. Never run commands to serve the site. It is always available.herd CLI to manage services, PHP versions, and sites (e.g. herd sites, herd services:start <service>, herd php:list). Run herd list to discover all available commands.=== tests rules ===
php artisan test --compact with a specific filename or filter.=== laravel/core rules ===
php artisan make: commands to create new files (i.e. migrations, controllers, models, etc.). You can list available Artisan commands using php artisan list and check their parameters with php artisan [command] --help.php artisan make:class.--no-interaction to all Artisan commands to ensure they work without user input. You should also pass the correct --options to ensure correct behavior.route() function.npm run build or ask the user to run npm run dev or composer run dev.=== pint/core rules ===
vendor/bin/pint --dirty --format agent before finalizing changes to ensure your code matches the project's expected style.vendor/bin/pint --test --format agent, simply run vendor/bin/pint --format agent to fix any formatting issues.How can I help you explore Laravel packages today?