chore: add laravel/boost and AI agent configuration files
This commit is contained in:
128
.junie/skills/developing-with-fortify/SKILL.md
Normal file
128
.junie/skills/developing-with-fortify/SKILL.md
Normal file
@@ -0,0 +1,128 @@
|
||||
---
|
||||
name: developing-with-fortify
|
||||
description: Laravel Fortify headless authentication backend development. Activate when implementing authentication features including login, registration, password reset, email verification, two-factor authentication (2FA/TOTP), profile updates, headless auth, authentication scaffolding, or auth guards in Laravel applications.
|
||||
---
|
||||
|
||||
# Laravel Fortify Development
|
||||
|
||||
Fortify is a headless authentication backend that provides authentication routes and controllers for Laravel applications.
|
||||
|
||||
## Documentation
|
||||
|
||||
Use `search-docs` for detailed Laravel Fortify patterns and documentation.
|
||||
|
||||
## Usage
|
||||
|
||||
- **Routes**: Use `list-routes` with `only_vendor: true` and `action: "Fortify"` to see all registered endpoints
|
||||
- **Actions**: Check `app/Actions/Fortify/` for customizable business logic (user creation, password validation, etc.)
|
||||
- **Config**: See `config/fortify.php` for all options including features, guards, rate limiters, and username field
|
||||
- **Contracts**: Look in `Laravel\Fortify\Contracts\` for overridable response classes (`LoginResponse`, `LogoutResponse`, etc.)
|
||||
- **Views**: All view callbacks are set in `FortifyServiceProvider::boot()` using `Fortify::loginView()`, `Fortify::registerView()`, etc.
|
||||
|
||||
## Available Features
|
||||
|
||||
Enable in `config/fortify.php` features array:
|
||||
|
||||
- `Features::registration()` - User registration
|
||||
- `Features::resetPasswords()` - Password reset via email
|
||||
- `Features::emailVerification()` - Requires User to implement `MustVerifyEmail`
|
||||
- `Features::updateProfileInformation()` - Profile updates
|
||||
- `Features::updatePasswords()` - Password changes
|
||||
- `Features::twoFactorAuthentication()` - 2FA with QR codes and recovery codes
|
||||
|
||||
> Use `search-docs` for feature configuration options and customization patterns.
|
||||
|
||||
## Setup Workflows
|
||||
|
||||
### Two-Factor Authentication Setup
|
||||
|
||||
```
|
||||
- [ ] Add TwoFactorAuthenticatable trait to User model
|
||||
- [ ] Enable feature in config/fortify.php
|
||||
- [ ] If the `*_add_two_factor_columns_to_users_table.php` migration is missing, publish via `php artisan vendor:publish --tag=fortify-migrations` and migrate
|
||||
- [ ] Set up view callbacks in FortifyServiceProvider
|
||||
- [ ] Create 2FA management UI
|
||||
- [ ] Test QR code and recovery codes
|
||||
```
|
||||
|
||||
> Use `search-docs` for TOTP implementation and recovery code handling patterns.
|
||||
|
||||
### Email Verification Setup
|
||||
|
||||
```
|
||||
- [ ] Enable emailVerification feature in config
|
||||
- [ ] Implement MustVerifyEmail interface on User model
|
||||
- [ ] Set up verifyEmailView callback
|
||||
- [ ] Add verified middleware to protected routes
|
||||
- [ ] Test verification email flow
|
||||
```
|
||||
|
||||
> Use `search-docs` for MustVerifyEmail implementation patterns.
|
||||
|
||||
### Password Reset Setup
|
||||
|
||||
```
|
||||
- [ ] Enable resetPasswords feature in config
|
||||
- [ ] Set up requestPasswordResetLinkView callback
|
||||
- [ ] Set up resetPasswordView callback
|
||||
- [ ] Define password.reset named route (if views disabled)
|
||||
- [ ] Test reset email and link flow
|
||||
```
|
||||
|
||||
> Use `search-docs` for custom password reset flow patterns.
|
||||
|
||||
### SPA Authentication Setup
|
||||
|
||||
```
|
||||
- [ ] Set 'views' => false in config/fortify.php
|
||||
- [ ] Install and configure Laravel Sanctum for session-based SPA authentication
|
||||
- [ ] Use the 'web' guard in config/fortify.php (required for session-based authentication)
|
||||
- [ ] Set up CSRF token handling
|
||||
- [ ] Test XHR authentication flows
|
||||
```
|
||||
|
||||
> Use `search-docs` for integration and SPA authentication patterns.
|
||||
|
||||
#### Two-Factor Authentication in SPA Mode
|
||||
|
||||
When `views` is set to `false`, Fortify returns JSON responses instead of redirects.
|
||||
|
||||
If a user attempts to log in and two-factor authentication is enabled, the login request will return a JSON response indicating that a two-factor challenge is required:
|
||||
|
||||
```json
|
||||
{
|
||||
"two_factor": true
|
||||
}
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Custom Authentication Logic
|
||||
|
||||
Override authentication behavior using `Fortify::authenticateUsing()` for custom user retrieval or `Fortify::authenticateThrough()` to customize the authentication pipeline. Override response contracts in `AppServiceProvider` for custom redirects.
|
||||
|
||||
### Registration Customization
|
||||
|
||||
Modify `app/Actions/Fortify/CreateNewUser.php` to customize user creation logic, validation rules, and additional fields.
|
||||
|
||||
### Rate Limiting
|
||||
|
||||
Configure via `fortify.limiters.login` in config. Default configuration throttles by username + IP combination.
|
||||
|
||||
## Key Endpoints
|
||||
|
||||
| Feature | Method | Endpoint |
|
||||
|------------------------|----------|---------------------------------------------|
|
||||
| Login | POST | `/login` |
|
||||
| Logout | POST | `/logout` |
|
||||
| Register | POST | `/register` |
|
||||
| Password Reset Request | POST | `/forgot-password` |
|
||||
| Password Reset | POST | `/reset-password` |
|
||||
| Email Verify Notice | GET | `/email/verify` |
|
||||
| Resend Verification | POST | `/email/verification-notification` |
|
||||
| Password Confirm | POST | `/user/confirm-password` |
|
||||
| Enable 2FA | POST | `/user/two-factor-authentication` |
|
||||
| Confirm 2FA | POST | `/user/confirmed-two-factor-authentication` |
|
||||
| 2FA Challenge | POST | `/two-factor-challenge` |
|
||||
| Get QR Code | GET | `/user/two-factor-qr-code` |
|
||||
| Recovery Codes | GET/POST | `/user/two-factor-recovery-codes` |
|
||||
124
.junie/skills/filament-db-config/SKILL.md
Normal file
124
.junie/skills/filament-db-config/SKILL.md
Normal file
@@ -0,0 +1,124 @@
|
||||
---
|
||||
name: filament-db-config
|
||||
description: >-
|
||||
Creates database-backed settings pages and config pages with filament-db-config or db-config package.
|
||||
Activates when creating settings page, config page, configuration page, or when user mentions db-config,
|
||||
db_config, DbConfig, database settings, dynamic configuration, runtime config, storing settings in database.
|
||||
ALWAYS use php artisan make:db-config command to scaffold. NEVER create files manually. NEVER create tests.
|
||||
---
|
||||
|
||||
# Filament DB Config
|
||||
|
||||
## When to Apply
|
||||
|
||||
Activate this skill when:
|
||||
|
||||
- Creating settings pages or config pages
|
||||
- Working with db-config, db_config(), DbConfig
|
||||
- User mentions database settings, dynamic configuration
|
||||
- User asks to store configuration in database
|
||||
|
||||
## Documentation
|
||||
|
||||
Use `search-docs` for Filament form components and patterns. Do NOT rely on training data — always check the installed Filament version documentation.
|
||||
|
||||
## Critical Workflow
|
||||
|
||||
STEP 1: Always scaffold with artisan command first:
|
||||
|
||||
```bash
|
||||
php artisan make:db-config HomeSeo --no-interaction
|
||||
```
|
||||
|
||||
IMPORTANT: Only pass the Name. NEVER add a second argument like "admin" or "panel". The command only takes one argument.
|
||||
This generates `app/Filament/Pages/{Name}Settings.php`. The generator automatically adds "Settings" suffix.
|
||||
|
||||
STEP 2: Edit the generated file to add your fields in the `form()` method.
|
||||
|
||||
NEVER create files manually.
|
||||
|
||||
NEVER create tests. Tests are NOT needed for settings pages.
|
||||
|
||||
## After Scaffolding
|
||||
|
||||
Edit the generated page class to customize the `form()` method:
|
||||
|
||||
<code-snippet name="Settings Page Form Example" lang="php">
|
||||
use Filament\Forms\Components\TextInput;
|
||||
use Filament\Forms\Components\Toggle;
|
||||
use Filament\Schemas\Schema;
|
||||
|
||||
public function form(Schema $schema): Schema
|
||||
{
|
||||
return $schema
|
||||
->components([
|
||||
TextInput::make('site_name')->label('Site Name'),
|
||||
TextInput::make('contact_email')->label('Contact Email'),
|
||||
Toggle::make('maintenance_mode')->label('Maintenance Mode'),
|
||||
])
|
||||
->statePath('data');
|
||||
}
|
||||
</code-snippet>
|
||||
|
||||
## Default Values
|
||||
|
||||
Override `getDefaultData()` to pre-fill the form:
|
||||
|
||||
<code-snippet name="Default Values Example" lang="php">
|
||||
public function getDefaultData(): array
|
||||
{
|
||||
return [
|
||||
'posts_per_page' => 10,
|
||||
'allow_comments' => true,
|
||||
];
|
||||
}
|
||||
</code-snippet>
|
||||
|
||||
## Reading Values
|
||||
|
||||
<code-snippet name="Reading db_config Values" lang="php">
|
||||
// Standard helper
|
||||
$siteName = db_config('website.site_name', 'Default');
|
||||
|
||||
// Safe helper (for early boot, migrations, service providers)
|
||||
$siteName = safe_db_config('website.site_name', 'Default');
|
||||
</code-snippet>
|
||||
|
||||
Blade directive:
|
||||
|
||||
<code-snippet name="Blade Directive" lang="blade">
|
||||
<h1>@db_config('website.site_name', 'Default')</h1>
|
||||
</code-snippet>
|
||||
|
||||
## Writing Values
|
||||
|
||||
<code-snippet name="Writing Values Programmatically" lang="php">
|
||||
use Inerba\DbConfig\DbConfig;
|
||||
|
||||
DbConfig::set('website.site_name', 'Acme Inc.');
|
||||
$group = DbConfig::getGroup('website');
|
||||
</code-snippet>
|
||||
|
||||
## IMPORTANT: Do NOT Create Tests
|
||||
|
||||
Do NOT create any test files for db-config settings pages. Tests are NOT needed and NOT wanted unless the user explicitly asks for them.
|
||||
|
||||
## Filament Property Types
|
||||
|
||||
When setting Filament page properties, always use the correct union types:
|
||||
|
||||
<code-snippet name="Correct Property Types" lang="php">
|
||||
protected static string | BackedEnum | null $navigationIcon = 'heroicon-o-cog';
|
||||
protected static ?string $navigationGroup = 'Settings';
|
||||
protected static ?int $navigationSort = 10;
|
||||
</code-snippet>
|
||||
|
||||
NEVER write `protected static string $navigationIcon` — always include `| BackedEnum | null`.
|
||||
|
||||
## Common Mistakes
|
||||
|
||||
- NEVER create files manually — always run `php artisan make:db-config` first
|
||||
- NEVER create tests — no tests for settings pages unless explicitly requested
|
||||
- NEVER use `config()` — always use `db_config()` helper
|
||||
- NEVER forget `statePath('data')` — forms must have `->statePath('data')`
|
||||
- NEVER forget union types — navigationIcon must be `string | BackedEnum | null`
|
||||
89
.junie/skills/fluxui-development/SKILL.md
Normal file
89
.junie/skills/fluxui-development/SKILL.md
Normal file
@@ -0,0 +1,89 @@
|
||||
---
|
||||
name: fluxui-development
|
||||
description: "Develops UIs with Flux UI Free components. Activates when creating buttons, forms, modals, inputs, dropdowns, checkboxes, or UI components; replacing HTML form elements with Flux; working with flux: components; or when the user mentions Flux, component library, UI components, form fields, or asks about available Flux components."
|
||||
license: MIT
|
||||
metadata:
|
||||
author: laravel
|
||||
---
|
||||
|
||||
# Flux UI Development
|
||||
|
||||
## When to Apply
|
||||
|
||||
Activate this skill when:
|
||||
|
||||
- Creating UI components or pages
|
||||
- Working with forms, modals, or interactive elements
|
||||
- Checking available Flux components
|
||||
|
||||
## Documentation
|
||||
|
||||
Use `search-docs` for detailed Flux UI patterns and documentation.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
This project uses the free edition of Flux UI, which includes all free components and variants but not Pro components.
|
||||
|
||||
Flux UI is a component library for Livewire built with Tailwind CSS. It provides components that are easy to use and customize.
|
||||
|
||||
Use Flux UI components when available. Fall back to standard Blade components when no Flux component exists for your needs.
|
||||
|
||||
<!-- Basic Button -->
|
||||
```blade
|
||||
<flux:button variant="primary">Click me</flux:button>
|
||||
```
|
||||
|
||||
## Available Components (Free Edition)
|
||||
|
||||
Available: avatar, badge, brand, breadcrumbs, button, callout, checkbox, dropdown, field, heading, icon, input, modal, navbar, otp-input, profile, radio, select, separator, skeleton, switch, text, textarea, tooltip
|
||||
|
||||
## Icons
|
||||
|
||||
Flux includes [Heroicons](https://heroicons.com/) as its default icon set. Search for exact icon names on the Heroicons site - do not guess or invent icon names.
|
||||
|
||||
<!-- Icon Button -->
|
||||
```blade
|
||||
<flux:button icon="arrow-down-tray">Export</flux:button>
|
||||
```
|
||||
|
||||
For icons not available in Heroicons, use [Lucide](https://lucide.dev/). Import the icons you need with the Artisan command:
|
||||
|
||||
```bash
|
||||
php artisan flux:icon crown grip-vertical github
|
||||
```
|
||||
|
||||
## Common Patterns
|
||||
|
||||
### Form Fields
|
||||
|
||||
<!-- Form Field -->
|
||||
```blade
|
||||
<flux:field>
|
||||
<flux:label>Email</flux:label>
|
||||
<flux:input type="email" wire:model="email" />
|
||||
<flux:error name="email" />
|
||||
</flux:field>
|
||||
```
|
||||
|
||||
### Modals
|
||||
|
||||
<!-- Modal -->
|
||||
```blade
|
||||
<flux:modal wire:model="showModal">
|
||||
<flux:heading>Title</flux:heading>
|
||||
<p>Content</p>
|
||||
</flux:modal>
|
||||
```
|
||||
|
||||
## Verification
|
||||
|
||||
1. Check component renders correctly
|
||||
2. Test interactive states
|
||||
3. Verify mobile responsiveness
|
||||
|
||||
## Common Pitfalls
|
||||
|
||||
- Trying to use Pro-only components in the free edition
|
||||
- Not checking if a Flux component exists before creating custom implementations
|
||||
- Forgetting to use the `search-docs` tool for component-specific documentation
|
||||
- Not following existing project patterns for Flux usage
|
||||
117
.junie/skills/pest-testing/SKILL.md
Normal file
117
.junie/skills/pest-testing/SKILL.md
Normal file
@@ -0,0 +1,117 @@
|
||||
---
|
||||
name: pest-testing
|
||||
description: "Tests applications using the Pest 3 PHP framework. Activates when writing tests, creating unit or feature tests, adding assertions, testing Livewire components, architecture testing, debugging test failures, working with datasets or mocking; or when the user mentions test, spec, TDD, expects, assertion, coverage, or needs to verify functionality works."
|
||||
license: MIT
|
||||
metadata:
|
||||
author: laravel
|
||||
---
|
||||
|
||||
# Pest Testing 3
|
||||
|
||||
## When to Apply
|
||||
|
||||
Activate this skill when:
|
||||
- Creating new tests (unit or feature)
|
||||
- Modifying existing tests
|
||||
- Debugging test failures
|
||||
- Working with datasets, mocking, or test organization
|
||||
- Writing architecture tests
|
||||
|
||||
## Documentation
|
||||
|
||||
Use `search-docs` for detailed Pest 3 patterns and documentation.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
### Creating Tests
|
||||
|
||||
All tests must be written using Pest. Use `php artisan make:test --pest {name}`.
|
||||
|
||||
### Test Organization
|
||||
|
||||
- Tests live in the `tests/Feature` and `tests/Unit` directories.
|
||||
- Do NOT remove tests without approval - these are core application code.
|
||||
- Test happy paths, failure paths, and edge cases.
|
||||
|
||||
### Basic Test Structure
|
||||
|
||||
<!-- Basic Pest Test Example -->
|
||||
```php
|
||||
it('is true', function () {
|
||||
expect(true)->toBeTrue();
|
||||
});
|
||||
```
|
||||
|
||||
### Running Tests
|
||||
|
||||
- Run minimal tests with filter before finalizing: `php artisan test --compact --filter=testName`.
|
||||
- Run all tests: `php artisan test --compact`.
|
||||
- Run file: `php artisan test --compact tests/Feature/ExampleTest.php`.
|
||||
|
||||
## Assertions
|
||||
|
||||
Use specific assertions (`assertSuccessful()`, `assertNotFound()`) instead of `assertStatus()`:
|
||||
|
||||
<!-- Pest Response Assertion -->
|
||||
```php
|
||||
it('returns all', function () {
|
||||
$this->postJson('/api/docs', [])->assertSuccessful();
|
||||
});
|
||||
```
|
||||
|
||||
| Use | Instead of |
|
||||
|-----|------------|
|
||||
| `assertSuccessful()` | `assertStatus(200)` |
|
||||
| `assertNotFound()` | `assertStatus(404)` |
|
||||
| `assertForbidden()` | `assertStatus(403)` |
|
||||
|
||||
## Mocking
|
||||
|
||||
Import mock function before use: `use function Pest\Laravel\mock;`
|
||||
|
||||
## Datasets
|
||||
|
||||
Use datasets for repetitive tests (validation rules, etc.):
|
||||
|
||||
<!-- Pest Dataset Example -->
|
||||
```php
|
||||
it('has emails', function (string $email) {
|
||||
expect($email)->not->toBeEmpty();
|
||||
})->with([
|
||||
'james' => 'james@laravel.com',
|
||||
'taylor' => 'taylor@laravel.com',
|
||||
]);
|
||||
```
|
||||
|
||||
## Pest 3 Features
|
||||
|
||||
### Architecture Testing
|
||||
|
||||
Pest 3 includes architecture testing to enforce code conventions:
|
||||
|
||||
<!-- Architecture Test Example -->
|
||||
```php
|
||||
arch('controllers')
|
||||
->expect('App\Http\Controllers')
|
||||
->toExtendNothing()
|
||||
->toHaveSuffix('Controller');
|
||||
|
||||
arch('models')
|
||||
->expect('App\Models')
|
||||
->toExtend('Illuminate\Database\Eloquent\Model');
|
||||
|
||||
arch('no debugging')
|
||||
->expect(['dd', 'dump', 'ray'])
|
||||
->not->toBeUsed();
|
||||
```
|
||||
|
||||
### Type Coverage
|
||||
|
||||
Pest 3 provides improved type coverage analysis. Run with `--type-coverage` flag.
|
||||
|
||||
## Common Pitfalls
|
||||
|
||||
- Not importing `use function Pest\Laravel\mock;` before using mock
|
||||
- Using `assertStatus(200)` instead of `assertSuccessful()`
|
||||
- Forgetting datasets for repetitive validation tests
|
||||
- Deleting tests without approval
|
||||
129
.junie/skills/tailwindcss-development/SKILL.md
Normal file
129
.junie/skills/tailwindcss-development/SKILL.md
Normal file
@@ -0,0 +1,129 @@
|
||||
---
|
||||
name: tailwindcss-development
|
||||
description: "Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes."
|
||||
license: MIT
|
||||
metadata:
|
||||
author: laravel
|
||||
---
|
||||
|
||||
# Tailwind CSS Development
|
||||
|
||||
## When to Apply
|
||||
|
||||
Activate this skill when:
|
||||
|
||||
- Adding styles to components or pages
|
||||
- Working with responsive design
|
||||
- Implementing dark mode
|
||||
- Extracting repeated patterns into components
|
||||
- Debugging spacing or layout issues
|
||||
|
||||
## Documentation
|
||||
|
||||
Use `search-docs` for detailed Tailwind CSS v4 patterns and documentation.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
- Use Tailwind CSS classes to style HTML. Check and follow existing Tailwind conventions in the project before introducing new patterns.
|
||||
- Offer to extract repeated patterns into components that match the project's conventions (e.g., Blade, JSX, Vue).
|
||||
- Consider class placement, order, priority, and defaults. Remove redundant classes, add classes to parent or child elements carefully to reduce repetition, and group elements logically.
|
||||
|
||||
## Tailwind CSS v4 Specifics
|
||||
|
||||
- Always use Tailwind CSS v4 and avoid deprecated utilities.
|
||||
- `corePlugins` is not supported in Tailwind v4.
|
||||
|
||||
### CSS-First Configuration
|
||||
|
||||
In Tailwind v4, configuration is CSS-first using the `@theme` directive — no separate `tailwind.config.js` file is needed:
|
||||
|
||||
<!-- CSS-First Config -->
|
||||
```css
|
||||
@theme {
|
||||
--color-brand: oklch(0.72 0.11 178);
|
||||
}
|
||||
```
|
||||
|
||||
### Import Syntax
|
||||
|
||||
In Tailwind v4, import Tailwind with a regular CSS `@import` statement instead of the `@tailwind` directives used in v3:
|
||||
|
||||
<!-- v4 Import Syntax -->
|
||||
```diff
|
||||
- @tailwind base;
|
||||
- @tailwind components;
|
||||
- @tailwind utilities;
|
||||
+ @import "tailwindcss";
|
||||
```
|
||||
|
||||
### Replaced Utilities
|
||||
|
||||
Tailwind v4 removed deprecated utilities. Use the replacements shown below. Opacity values remain numeric.
|
||||
|
||||
| Deprecated | Replacement |
|
||||
|------------|-------------|
|
||||
| bg-opacity-* | bg-black/* |
|
||||
| text-opacity-* | text-black/* |
|
||||
| border-opacity-* | border-black/* |
|
||||
| divide-opacity-* | divide-black/* |
|
||||
| ring-opacity-* | ring-black/* |
|
||||
| placeholder-opacity-* | placeholder-black/* |
|
||||
| flex-shrink-* | shrink-* |
|
||||
| flex-grow-* | grow-* |
|
||||
| overflow-ellipsis | text-ellipsis |
|
||||
| decoration-slice | box-decoration-slice |
|
||||
| decoration-clone | box-decoration-clone |
|
||||
|
||||
## Spacing
|
||||
|
||||
Use `gap` utilities instead of margins for spacing between siblings:
|
||||
|
||||
<!-- Gap Utilities -->
|
||||
```html
|
||||
<div class="flex gap-8">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Dark Mode
|
||||
|
||||
If existing pages and components support dark mode, new pages and components must support it the same way, typically using the `dark:` variant:
|
||||
|
||||
<!-- Dark Mode -->
|
||||
```html
|
||||
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
|
||||
Content adapts to color scheme
|
||||
</div>
|
||||
```
|
||||
|
||||
## Common Patterns
|
||||
|
||||
### Flexbox Layout
|
||||
|
||||
<!-- Flexbox Layout -->
|
||||
```html
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<div>Left content</div>
|
||||
<div>Right content</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Grid Layout
|
||||
|
||||
<!-- Grid Layout -->
|
||||
```html
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div>Card 1</div>
|
||||
<div>Card 2</div>
|
||||
<div>Card 3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Common Pitfalls
|
||||
|
||||
- Using deprecated v3 utilities (bg-opacity-*, flex-shrink-*, etc.)
|
||||
- Using `@tailwind` directives instead of `@import "tailwindcss"`
|
||||
- Trying to use `tailwind.config.js` instead of CSS `@theme` directive
|
||||
- Using margins for spacing between siblings instead of gap utilities
|
||||
- Forgetting to add dark mode variants when the project uses dark mode
|
||||
96
.junie/skills/volt-development/SKILL.md
Normal file
96
.junie/skills/volt-development/SKILL.md
Normal file
@@ -0,0 +1,96 @@
|
||||
---
|
||||
name: volt-development
|
||||
description: "Develops single-file Livewire components with Volt. Activates when creating Volt components, converting Livewire to Volt, working with @volt directive, functional or class-based Volt APIs; or when the user mentions Volt, single-file components, functional Livewire, or inline component logic in Blade files."
|
||||
license: MIT
|
||||
metadata:
|
||||
author: laravel
|
||||
---
|
||||
|
||||
# Volt Development
|
||||
|
||||
## When to Apply
|
||||
|
||||
Activate this skill when:
|
||||
|
||||
- Creating Volt single-file components
|
||||
- Converting traditional Livewire components to Volt
|
||||
- Testing Volt components
|
||||
|
||||
## Documentation
|
||||
|
||||
Use `search-docs` for detailed Volt patterns and documentation.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
Create components with `php artisan make:volt [name] [--test] [--pest]`.
|
||||
|
||||
Important: Check existing Volt components to determine if they use functional or class-based style before creating new ones.
|
||||
|
||||
### Functional Components
|
||||
|
||||
<!-- Volt Functional Component -->
|
||||
```php
|
||||
@@volt
|
||||
<?php
|
||||
use function Livewire\Volt\{state, computed};
|
||||
|
||||
state(['count' => 0]);
|
||||
|
||||
$increment = fn () => $this->count++;
|
||||
$double = computed(fn () => $this->count * 2);
|
||||
?>
|
||||
|
||||
<div>
|
||||
<h1>Count: @{{ $count }} (Double: @{{ $this->double }})</h1>
|
||||
<button wire:click="increment">+</button>
|
||||
</div>
|
||||
@@endvolt
|
||||
```
|
||||
|
||||
### Class-Based Components
|
||||
|
||||
<!-- Volt Class-based Component -->
|
||||
```php
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new class extends Component {
|
||||
public int $count = 0;
|
||||
|
||||
public function increment(): void
|
||||
{
|
||||
$this->count++;
|
||||
}
|
||||
} ?>
|
||||
|
||||
<div>
|
||||
<h1>@{{ $count }}</h1>
|
||||
<button wire:click="increment">+</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Testing
|
||||
|
||||
Tests go in existing Volt test directory or `tests/Feature/Volt`:
|
||||
|
||||
<!-- Volt Test Example -->
|
||||
```php
|
||||
use Livewire\Volt\Volt;
|
||||
|
||||
test('counter increments', function () {
|
||||
Volt::test('counter')
|
||||
->assertSee('Count: 0')
|
||||
->call('increment')
|
||||
->assertSee('Count: 1');
|
||||
});
|
||||
```
|
||||
|
||||
## Verification
|
||||
|
||||
1. Check existing components for functional vs class-based style
|
||||
2. Test component with `Volt::test()`
|
||||
|
||||
## Common Pitfalls
|
||||
|
||||
- Not checking existing style (functional vs class-based) before creating
|
||||
- Forgetting `@volt` directive wrapper
|
||||
- Missing `--test` or `--pest` flag when tests are needed
|
||||
Reference in New Issue
Block a user