Livewire Material 2.0.0 aligns every component with Material 3 Expressive and carries no Tailwind anywhere, so SealShare drops tailwindcss and its Vite plugin and writes its views in the package's vocabulary: layout components (<x-pane>, <x-stack>, <x-row>, <x-grid>, <x-form>) with M3's spacing tokens, the md-type-*/md-ink-* text classes, and --md-sys-* tokens in its own small stylesheet. - resources/css/app.css opens with the package's layer order, imports foundation.css and the stylesheet of each component the views render, then the scheme, regenerated with the 2025 colour rules at M3's three contrast levels. The app's own rules follow, one section per view, on tokens and on M3's breakpoints (600/840/1200/1600px) only. - Every view is rewritten in that vocabulary while SealShare keeps the shape it had: the admin table, the admin settings, the recovery codes, the share options and the download page are cards, and their fields fill them rather than stopping at the 40rem bound a card already bounds. The user settings pages became cards too, to match the admin's, each with the sections that stand apart from its one subject — deleting the account, the recovery codes — in a card beside it. Material 3 decides how a component behaves, not whether a container survives: buttons keep their label's width, a form's actions end it, and each heading level keeps one type role. - The layouts clear the floating toolbar by the --material-bottom-toolbar the package publishes, and the snackbar clears it by itself. - The two-factor setup QR code comes from QrCodeService, so it keeps a white field and quiet zone in the dark theme and still scans. - Browse Files is a real button that opens the file input, reachable and visibly focused from the keyboard. - Tests: the design test scans views, JS, CSS and app/ and checks the CSS entry both ways (no missing, no unused import). New Chromium suites cover the frame, settings and admin, the share flow, and every page at M3's breakpoint edges (599/600, 839/840, 1199/1200, 1600px). The package's renamed data-md-* hooks replace the 1.x ones. - Boost's update brings the material-3 guideline and skill and drops the Tailwind skill. composer.json requires nonameweb/livewire-material ^2.0 from the Gitea repository, resolved at the 2.0.0 tag. The CHANGELOG records the move as 2.1.0. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
20 KiB
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 --directto list direct dependencies with versions, orcomposer show <vendor/package>for a single package. - JS packages: check
package.jsonfor 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, notdiscount(). - 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, orcomposer 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-queryto run read-only queries against the database instead of writing raw SQL in tinker. - Use
database-schemato inspect table structure before writing migrations or models. - Use
get-absolute-urlto resolve the correct scheme, domain, and port for project URLs. Always use this before sharing a URL with the user. - Use
browser-logsto read browser logs, errors, and exceptions. Only recent logs are useful, ignore old entries.
Searching Documentation (IMPORTANT)
- Use
search-docsbefore 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
packagesarray 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, notfilament 4 test resource table.
Search Syntax
- Use words for auto-stemmed AND logic:
rate limitmatches both "rate" AND "limit". - Use
"quoted phrases"for exact position matching:"infinite scroll"requires adjacent words in order. - Combine words and phrases for mixed queries:
middleware "rate limit". - Use multiple queries for OR logic:
queries=["authentication", "middleware"].
Project Rules
- This project contains committed, area-grouped rules in
.ai/ruleswhen 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 rungrep -rin 'keyword' .ai/rulesto catch what a path match alone misses. Do not write code until you have read and are following every matching rule. If.ai/rulesdoes not exist, continue without it. - Record durable rules with
record-ruleso the next agent or teammate inherits them instead of working them out again. Pass aglob(e.g.app/Http/Controllers/**), a shorttitle, and a few-linenote. Always userecord-rule, never your native memory or notes tool — native memory is personal and session-scoped; only.ai/rulesis shared with the team and persists in the repo.
Artisan
- Run Artisan commands directly via the command line (e.g.,
php artisan route:list). Usephp artisan listto discover available commands andphp artisan [command] --helpto 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 theconfig/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();'
- Double quotes for PHP strings inside:
=== 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 - Use TitleCase for Enum keys:
FavoritePerson,BestLake,Monthly. - 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, which is the fastest way to deploy and scale production Laravel applications.
- Activate the
deploying-to-cloudskill whenever deploying to Laravel Cloud, configuring Cloud environments or resources, using the Cloud CLI, or troubleshooting Cloud deployments.
=== tests rules ===
Test Enforcement
- Test every code change by adding or updating a test.
- Run the affected tests and ensure they pass.
- Test the changed behavior and its important failure modes, but do not add tests beyond them.
- Read the
testing-best-practicesskill before writing tests.
=== 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 usingphp artisan listand check their parameters withphp artisan [command] --help. - If you're creating a generic PHP class, use
php artisan make:class. - Pass
--no-interactionto all Artisan commands to ensure they work without user input. You should also pass the correct--optionsto ensure correct behavior.
Model Creation
- When creating new models, create useful factories and seeders for them too. Ask the user if they need any other things, using
php artisan make:model --helpto check the available options.
APIs & Eloquent Resources
- For APIs, default to using Eloquent API Resources and API versioning unless existing API routes do not, then you should follow existing application convention.
URL Generation
- When generating links to other pages, prefer named routes and the
route()function.
Testing
- When creating models for tests, use the factories for the models. Check if the factory has custom states that can be used before manually setting up the model.
- Faker: Use methods such as
$this->faker->word()orfake()->randomDigit(). Follow existing conventions whether to use$this->fakerorfake(). - When creating tests, make use of
php artisan make:test [options] {name}to create a feature test, and pass--unitto create a unit test. Most tests should be feature tests.
Vite Error
- If you receive an "Illuminate\Foundation\ViteException: Unable to locate file in Vite manifest" error, you can run
npm run buildor ask the user to runnpm run devorcomposer run dev.
=== laravel-octane/core rules ===
Laravel Octane
This application uses Laravel Octane, a long-running PHP server. The application bootstraps once and handles many requests within the same process.
- Never store request-specific state in singletons or static properties, because it can leak across requests.
- Use
config('octane.server')to detect the active driver (swoole,roadrunner, orfrankenphp). - Prefer scoped bindings (
$this->app->scoped()) over singletons for per-request services.
When working on Octane-specific features (concurrency, shared tables, memory, driver configuration, testing), invoke octane-development for detailed rules.
=== livewire/core rules ===
Livewire
- Livewire allows you to build dynamic, reactive interfaces in PHP without writing JavaScript.
- You can use Alpine.js for client-side interactions instead of JavaScript frameworks.
- Keep state server-side so the UI reflects it. Validate and authorize in actions as you would in HTTP requests.
=== pint/core rules ===
Laravel Pint Code Formatter
- If you have modified any PHP files, you must run
vendor/bin/pint --dirty --format agentbefore finalizing changes to ensure your code matches the project's expected style. - Do not run
vendor/bin/pint --test --format agent, simply runvendor/bin/pint --format agentto fix any formatting issues.
=== pest/core rules ===
Pest
- This project uses Pest. Create tests with
php artisan make:test --pest {name}. - Do not include the test suite directory in
{name}. UseSomeFeatureTest, notFeature/SomeFeatureTest. - Read the
testing-best-practicesskill for guidance on coverage, naming, structure, dependency isolation, and review. - Do not delete tests or test files without approval. They are part of the application.
Running Tests
- Run the narrowest set of tests that covers the change. Pass a file path or
--filter=testNametophp artisan test --compact. - Rerun a test after each change to it.
- Run
vendor/bin/pestto call the test runner directly. It accepts the same file path and--filter=testNamearguments. - After the feature tests pass, ask the user to run the complete suite with
php artisan test --compact.
=== nonameweb/livewire-material/core rules ===
Livewire Material
This application uses nonameweb/livewire-material: Material 3 Expressive components for Laravel and Livewire, built on Tailwind CSS. It replaces UI kits such as maryUI, daisyUI and Flux in this application.
- Components are anonymous Blade components, unprefixed unless
config/livewire-material.phpsets aprefix. Before writing or changing a view that uses them, activate thelivewire-material-developmentskill for the props, slots and traps of each component. - Never write maryUI tags (
<x-mary-*>) or daisyUI classes (btn,card,badge,bg-base-200,text-base-content…). They compile to nothing and fail silently. - Every layout includes
<x-theme-script />in<head>before@vite. The colour scheme is generated withphp artisan material:scheme— never editresources/css/material-scheme.cssby hand. With colour profiles (livewire-material.profiles), run it without a seed after changing them; the active profile comes fromScheme::resolveProfileUsing(). - While the application runs locally, every token and component renders in the application's own scheme at
/material(the showcase). - HTTP error pages and the Markdown mail theme come from the package. Change error wording by publishing
--tag=livewire-material-errors; select the mail theme withMAIL_MARKDOWN_THEME=livewire-material::mail.theme.
=== nonameweb/livewire-material/material-3 rules ===
Material 3
Every view in this application is Material 3 Expressive (m3.material.io), through nonameweb/livewire-material. These rules decide what to write; the material-3-design skill carries the tables, the numbers and Google's source pages behind each one — activate it before designing a screen.
Colour
- A colour is always a role:
bg-primary,text-on-surface-variant,border-outline-variant. Never a hex, an arbitrary value, a palette tone or an opacity; Tailwind's palette does not compile. - Pair a role only with its
on-partner:bg-primary text-on-primary,bg-secondary-container text-on-secondary-container. That pair is the one whose contrast is guaranteed at every contrast level; mixing pairs (bg-primary-container text-on-surface) is not. primaryis the one key action on a screen (a filled button; the FAB inprimary-container).secondary-containeris the quiet fill (tonal buttons, selected navigation, selected chips).tertiaryis a contrasting accent, used rarely.error,success,warning,infomean state and nothing else: the-containerfor a tinted panel, the role itself for its text and icon.- Ink is
text-on-surface; lower emphasis istext-on-surface-variant(text-body,text-meta); decoration istext-outline(text-quiet). Never dim ink with an opacity: 38% means disabled. border-outlineis a boundary that must be read (a text field, the edge of a target).border-outline-variant(border-divider,border-structure,border-chrome) is a divider or a card edge. Neveroutlineon a divider.- Fixed and dim roles (
primary-fixed,surface-dim, …) are for a colour that must not change with the theme; if unsure, don't. Inverse roles only on an inverse surface (the snackbar). - A link is
text-primaryand underlined (link); colour alone signals nothing. - Contrast: 4.5:1 for text, 3:1 for large text, icons and grouped controls; disabled is exempt. Three contrast levels exist (
<html data-contrast>: standard, medium, high) and every role changes with them — which is why only roles are allowed.
Surfaces and elevation
- The page is
bg-surface. Panels separate by tone first:surface-container-lowest…surface-container-highestis a hierarchy of emphasis, not of height. Navigation chrome issurface-container; a dialog, a menu, the search bar aresurface-container-high; a modal sheet issurface-container-low; a filled card issurface-container-highest. A region keeps its role at every width. - Shadows (
shadow-elevation-1…5) are for what floats or lifts: 1 for elevated cards, buttons and modal sheets; 2 for menus, the navigation bar, a scrolled app bar; 3 for the FAB, dialogs, pickers and search; one level more on hover; nothing rests above 3. Fewer shadows carry more meaning. - A scrim is
bg-scrim/32.
Shape
- Corners come from the scale
rounded-corner-{none|xs|sm|md|lg|lg-increased|xl|xl-increased|xxl|full}; Tailwind'srounded-*does not compile. - By family:
fullbuttons, icon buttons, chips' avatars, badges, switches, sliders, the search bar, navigation indicators;xstext fields, menus, snackbars, plain tooltips;smchips;mdcards, rich tooltips;lgthe FAB and a side sheet's inner corners;xldialogs, bottom sheets, the search view, pickers, carousel items;xxllarge hero containers. - Nested shapes: inner radius = outer radius − padding; never the same radius inside and out.
- A press squares a round shape (the components do it; nothing morphs on hover). The 35
<x-shape>s are decoration, never meaning, used sparingly.
Type
- Every text element carries one
type-*style:displayfor hero figures and short marketing lines;headlinefor page and section titles;titlefor card, dialog and list-section titles;bodyfor paragraphs (body-lgfor reading);labelinside components (buttons, chips, tabs, captions). Nevertext-sm,font-medium,leading-*,tracking-*— they do not compile. type-emphasized-*is opt-in: a selected item, a primary action, a headline, a badge — not decoration.- 40–60 characters per line;
tabular-numson figures that change; text must scale to 200% without loss (containers grow, rows wrap, no fixed heights on text, no ellipsis without a way to read the rest).
Motion
- Position, size and shape move on the spatial springs (they overshoot):
transition-transform duration-(--md-sys-motion-spatial-default-duration) ease-spatial-default—fastfor small elements,slowfor large ones. Colour and opacity move on the effects springs (ease-effects-*), which never overshoot. Always pair an easing with its duration. - Entering decelerates, a permanent exit accelerates, a temporary exit (a sheet, a drawer) takes the emphasized curve; exits are shorter than entrances.
- Everything that moves goes through these tokens, so reduced motion makes it instant; a literal duration is a bug.
States and targets
- Interactive elements carry
state-layer focus-ring: hover 8%, focus 10%, pressed 10%, dragged 16% (data-dragged) of the content colour; disabled isdisabled:text-on-surface/38 disabled:bg-on-surface/12and has no hover. Every state shows two indicators: colour plus a shape, an outline, an icon or a word. - Every target is at least 48×48px with 8px between targets (
touch-targeton anything drawn smaller); a denser layout is an opt-in prop, never a default. - Keyboard: Tab between components, arrows within one, Enter and Space activate, Escape dismisses; a dialog takes focus and gives it back to what opened it.
Layout and breakpoints
- Widths are M3's window size classes, the only variants that compile: compact below 600px (the default),
medium:600,expanded:840,large:1200,extra-large:1600, andmax-medium:… for "below". In scripts,from()andupTo()fromresources/js/breakpoints.js. - What changes per class: compact — navigation bar, one pane, full-screen dialogs, a bottom sheet for choices; medium — collapsed rail, one pane; expanded — rail (collapsible), two panes, menus and basic dialogs; large and extra-large — the rail expanded, two panes, a third only at extra-large as a side sheet.
<x-scaffold>does this; content lives in panes (<x-pane>,<x-list-detail>for a list's second pane), never beside the rail by hand. - Margins are 16px below
mediumand 24px from it; spacing sits on the 4px grid, as padding and gaps on the parent, with margins only between layout regions. A fixed pane is 360px (expanded) or 412px (large); a side sheet at most 400px. - Write logical properties (
ps-*,me-*,start-*,text-start); directional icons mirror in RTL; charts and media controls stay LTR. Keep controls inside the safe area (--material-safe-*).
Accessibility
- Native elements first (
<button>,<dialog>,<input>), then ARIA. Onemain, onebanner, onecontentinfo; every repeatednavlabelled, without the word "navigation". - Headings in order from a single H1; the level is structure, the
type-*style is appearance. - An icon-only control has an accessible name that does not include its role; decorative icons are hidden; an error is announced and tied to its field (
aria-describedby); a toast uses a polite live region and never takes focus. A single-key shortcut needs a modifier or a focused component.
Icons
<x-icon name="…">is a Material Symbol Rounded:filledmeans active or selected,optical="20"when drawn at 20px or less, one weight per group, the size and colour of the text beside it.
Don'ts
- No icon in a snackbar; no disabled FAB (hide it); no horizontal radio rows; no hover morph on cards; no
outlineon dividers; no hex colours; no Tailwind breakpoints or scales; no segmented buttons, navigation drawer or bottom app bar — use<x-button-group connected>, the expanded rail and<x-toolbar>.