mirror of
https://github.com/tiennm99/coolify.git
synced 2026-04-17 15:20:40 +00:00
cleanup AI instructions
This commit is contained in:
Andras Bacsai
@@ -0,0 +1,414 @@
|
||||
---
|
||||
name: debugging-output-and-previewing-html-using-ray
|
||||
description: Use when user says "send to Ray," "show in Ray," "debug in Ray," "log to Ray," "display in Ray," or wants to visualize data, debug output, or show diagrams in the Ray desktop application.
|
||||
metadata:
|
||||
author: Spatie
|
||||
tags:
|
||||
- debugging
|
||||
- logging
|
||||
- visualization
|
||||
- ray
|
||||
---
|
||||
|
||||
# Ray Skill
|
||||
|
||||
## Overview
|
||||
|
||||
Ray is Spatie's desktop debugging application for developers. Send data directly to Ray by making HTTP requests to its local server.
|
||||
|
||||
This can be useful for debugging applications, or to preview design, logos, or other visual content.
|
||||
|
||||
This is what the `ray()` PHP function does under the hood.
|
||||
|
||||
## Connection Details
|
||||
|
||||
| Setting | Default | Environment Variable |
|
||||
|---------|---------|---------------------|
|
||||
| Host | `localhost` | `RAY_HOST` |
|
||||
| Port | `23517` | `RAY_PORT` |
|
||||
| URL | `http://localhost:23517/` | - |
|
||||
|
||||
## Request Format
|
||||
|
||||
**Method:** POST
|
||||
**Content-Type:** `application/json`
|
||||
**User-Agent:** `Ray 1.0`
|
||||
|
||||
### Basic Request Structure
|
||||
|
||||
```json
|
||||
{
|
||||
"uuid": "unique-identifier-for-this-ray-instance",
|
||||
"payloads": [
|
||||
{
|
||||
"type": "log",
|
||||
"content": { },
|
||||
"origin": {
|
||||
"file": "/path/to/file.php",
|
||||
"line_number": 42,
|
||||
"hostname": "my-machine"
|
||||
}
|
||||
}
|
||||
],
|
||||
"meta": {
|
||||
"ray_package_version": "1.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Fields
|
||||
|
||||
| Field | Type | Description |
|
||||
|-------|------|-------------|
|
||||
| `uuid` | string | Unique identifier for this Ray instance. Reuse the same UUID to update an existing entry. |
|
||||
| `payloads` | array | Array of payload objects to send |
|
||||
| `meta` | object | Optional metadata (ray_package_version, project_name, php_version) |
|
||||
|
||||
### Origin Object
|
||||
|
||||
Every payload includes origin information:
|
||||
|
||||
```json
|
||||
{
|
||||
"file": "/Users/dev/project/app/Controller.php",
|
||||
"line_number": 42,
|
||||
"hostname": "dev-machine"
|
||||
}
|
||||
```
|
||||
|
||||
## Payload Types
|
||||
|
||||
### Log (Send Values)
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "log",
|
||||
"content": {
|
||||
"values": ["Hello World", 42, {"key": "value"}]
|
||||
},
|
||||
"origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
|
||||
}
|
||||
```
|
||||
|
||||
### Custom (HTML/Text Content)
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "custom",
|
||||
"content": {
|
||||
"content": "<h1>HTML Content</h1><p>With formatting</p>",
|
||||
"label": "My Label"
|
||||
},
|
||||
"origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
|
||||
}
|
||||
```
|
||||
|
||||
### Table
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "table",
|
||||
"content": {
|
||||
"values": {"name": "John", "email": "john@example.com", "age": 30},
|
||||
"label": "User Data"
|
||||
},
|
||||
"origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
|
||||
}
|
||||
```
|
||||
|
||||
### Color
|
||||
|
||||
Set the color of the preceding log entry:
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "color",
|
||||
"content": {
|
||||
"color": "green"
|
||||
},
|
||||
"origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
|
||||
}
|
||||
```
|
||||
|
||||
**Available colors:** `green`, `orange`, `red`, `purple`, `blue`, `gray`
|
||||
|
||||
### Screen Color
|
||||
|
||||
Set the background color of the screen:
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "screen_color",
|
||||
"content": {
|
||||
"color": "green"
|
||||
},
|
||||
"origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
|
||||
}
|
||||
```
|
||||
|
||||
### Label
|
||||
|
||||
Add a label to the entry:
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "label",
|
||||
"content": {
|
||||
"label": "Important"
|
||||
},
|
||||
"origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
|
||||
}
|
||||
```
|
||||
|
||||
### Size
|
||||
|
||||
Set the size of the entry:
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "size",
|
||||
"content": {
|
||||
"size": "lg"
|
||||
},
|
||||
"origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
|
||||
}
|
||||
```
|
||||
|
||||
**Available sizes:** `sm`, `lg`
|
||||
|
||||
### Notify (Desktop Notification)
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "notify",
|
||||
"content": {
|
||||
"value": "Task completed!"
|
||||
},
|
||||
"origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
|
||||
}
|
||||
```
|
||||
|
||||
### New Screen
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "new_screen",
|
||||
"content": {
|
||||
"name": "Debug Session"
|
||||
},
|
||||
"origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
|
||||
}
|
||||
```
|
||||
|
||||
### Measure (Timing)
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "measure",
|
||||
"content": {
|
||||
"name": "my-timer",
|
||||
"is_new_timer": true,
|
||||
"total_time": 0,
|
||||
"time_since_last_call": 0,
|
||||
"max_memory_usage_during_total_time": 0,
|
||||
"max_memory_usage_since_last_call": 0
|
||||
},
|
||||
"origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
|
||||
}
|
||||
```
|
||||
|
||||
For subsequent measurements, set `is_new_timer: false` and provide actual timing values.
|
||||
|
||||
### Simple Payloads (No Content)
|
||||
|
||||
These payloads only need a `type` and empty `content`:
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "separator",
|
||||
"content": {},
|
||||
"origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
|
||||
}
|
||||
```
|
||||
|
||||
| Type | Purpose |
|
||||
|------|---------|
|
||||
| `separator` | Add visual divider |
|
||||
| `clear_all` | Clear all entries |
|
||||
| `hide` | Hide this entry |
|
||||
| `remove` | Remove this entry |
|
||||
| `confetti` | Show confetti animation |
|
||||
| `show_app` | Bring Ray to foreground |
|
||||
| `hide_app` | Hide Ray window |
|
||||
|
||||
## Combining Multiple Payloads
|
||||
|
||||
Send multiple payloads in one request. Use the same `uuid` to apply modifiers (color, label, size) to a log entry:
|
||||
|
||||
```json
|
||||
{
|
||||
"uuid": "abc-123",
|
||||
"payloads": [
|
||||
{
|
||||
"type": "log",
|
||||
"content": { "values": ["Important message"] },
|
||||
"origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
|
||||
},
|
||||
{
|
||||
"type": "color",
|
||||
"content": { "color": "red" },
|
||||
"origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"content": { "label": "ERROR" },
|
||||
"origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
|
||||
},
|
||||
{
|
||||
"type": "size",
|
||||
"content": { "size": "lg" },
|
||||
"origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
|
||||
}
|
||||
],
|
||||
"meta": {}
|
||||
}
|
||||
```
|
||||
|
||||
## Example: Complete Request
|
||||
|
||||
Send a green, labeled log message:
|
||||
|
||||
```bash
|
||||
curl -X POST http://localhost:23517/ \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "User-Agent: Ray 1.0" \
|
||||
-d '{
|
||||
"uuid": "my-unique-id-123",
|
||||
"payloads": [
|
||||
{
|
||||
"type": "log",
|
||||
"content": {
|
||||
"values": ["User logged in", {"user_id": 42, "name": "John"}]
|
||||
},
|
||||
"origin": {
|
||||
"file": "/app/AuthController.php",
|
||||
"line_number": 55,
|
||||
"hostname": "dev-server"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "color",
|
||||
"content": { "color": "green" },
|
||||
"origin": { "file": "/app/AuthController.php", "line_number": 55, "hostname": "dev-server" }
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"content": { "label": "Auth" },
|
||||
"origin": { "file": "/app/AuthController.php", "line_number": 55, "hostname": "dev-server" }
|
||||
}
|
||||
],
|
||||
"meta": {
|
||||
"project_name": "my-app"
|
||||
}
|
||||
}'
|
||||
```
|
||||
|
||||
## Availability Check
|
||||
|
||||
Before sending data, you can check if Ray is running:
|
||||
|
||||
```
|
||||
GET http://localhost:23517/_availability_check
|
||||
```
|
||||
|
||||
Ray responds with HTTP 404 when available (the endpoint doesn't exist, but the server is running).
|
||||
|
||||
## Getting Ray Information
|
||||
|
||||
### Get Windows
|
||||
|
||||
Retrieve information about all open Ray windows:
|
||||
|
||||
```
|
||||
GET http://localhost:23517/windows
|
||||
```
|
||||
|
||||
Returns an array of window objects with their IDs and names:
|
||||
|
||||
```json
|
||||
[
|
||||
{"id": 1, "name": "Window 1"},
|
||||
{"id": 2, "name": "Debug Session"}
|
||||
]
|
||||
```
|
||||
|
||||
### Get Theme Colors
|
||||
|
||||
Retrieve the current theme colors being used by Ray:
|
||||
|
||||
```
|
||||
GET http://localhost:23517/theme
|
||||
```
|
||||
|
||||
Returns the theme information including color palette:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "Dark",
|
||||
"colors": {
|
||||
"primary": "#000000",
|
||||
"secondary": "#1a1a1a",
|
||||
"accent": "#3b82f6"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Use Case:** When sending custom HTML content to Ray, use these theme colors to ensure your content matches Ray's current theme and looks visually integrated.
|
||||
|
||||
**Example:** Send HTML with matching colors:
|
||||
|
||||
```bash
|
||||
|
||||
# First, get the theme
|
||||
|
||||
THEME=$(curl -s http://localhost:23517/theme)
|
||||
PRIMARY_COLOR=$(echo $THEME | jq -r '.colors.primary')
|
||||
|
||||
# Then send HTML using those colors
|
||||
|
||||
curl -X POST http://localhost:23517/ \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"uuid": "theme-matched-html",
|
||||
"payloads": [{
|
||||
"type": "custom",
|
||||
"content": {
|
||||
"content": "<div style=\"background: '"$PRIMARY_COLOR"'; padding: 20px;\"><h1>Themed Content</h1></div>",
|
||||
"label": "Themed HTML"
|
||||
},
|
||||
"origin": {"file": "script.sh", "line_number": 1, "hostname": "localhost"}
|
||||
}]
|
||||
}'
|
||||
```
|
||||
|
||||
## Payload Type Reference
|
||||
|
||||
| Type | Content Fields | Purpose |
|
||||
|------|----------------|---------|
|
||||
| `log` | `values` (array) | Send values to Ray |
|
||||
| `custom` | `content`, `label` | HTML or text content |
|
||||
| `table` | `values`, `label` | Display as table |
|
||||
| `color` | `color` | Set entry color |
|
||||
| `screen_color` | `color` | Set screen background |
|
||||
| `label` | `label` | Add label to entry |
|
||||
| `size` | `size` | Set entry size (sm/lg) |
|
||||
| `notify` | `value` | Desktop notification |
|
||||
| `new_screen` | `name` | Create new screen |
|
||||
| `measure` | `name`, `is_new_timer`, timing fields | Performance timing |
|
||||
| `separator` | (empty) | Visual divider |
|
||||
| `clear_all` | (empty) | Clear all entries |
|
||||
| `hide` | (empty) | Hide entry |
|
||||
| `remove` | (empty) | Remove entry |
|
||||
| `confetti` | (empty) | Confetti animation |
|
||||
| `show_app` | (empty) | Show Ray window |
|
||||
| `hide_app` | (empty) | Hide Ray window |
|
||||
116
.claude/skills/developing-with-fortify/SKILL.md
Normal file
116
.claude/skills/developing-with-fortify/SKILL.md
Normal file
@@ -0,0 +1,116 @@
|
||||
---
|
||||
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
|
||||
- [ ] Run migrations for 2FA columns
|
||||
- [ ] 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
|
||||
- [ ] Use 'web' guard in fortify config
|
||||
- [ ] Set up CSRF token handling
|
||||
- [ ] Test XHR authentication flows
|
||||
```
|
||||
|
||||
> Use `search-docs` for integration and SPA authentication patterns.
|
||||
|
||||
## 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` |
|
||||
131
.claude/skills/livewire-development/SKILL.md
Normal file
131
.claude/skills/livewire-development/SKILL.md
Normal file
@@ -0,0 +1,131 @@
|
||||
---
|
||||
name: livewire-development
|
||||
description: >-
|
||||
Develops reactive Livewire 3 components. Activates when creating, updating, or modifying
|
||||
Livewire components; working with wire:model, wire:click, wire:loading, or any wire: directives;
|
||||
adding real-time updates, loading states, or reactivity; debugging component behavior;
|
||||
writing Livewire tests; or when the user mentions Livewire, component, counter, or reactive UI.
|
||||
---
|
||||
|
||||
# Livewire Development
|
||||
|
||||
## When to Apply
|
||||
|
||||
Activate this skill when:
|
||||
- Creating new Livewire components
|
||||
- Modifying existing component state or behavior
|
||||
- Debugging reactivity or lifecycle issues
|
||||
- Writing Livewire component tests
|
||||
- Adding Alpine.js interactivity to components
|
||||
- Working with wire: directives
|
||||
|
||||
## Documentation
|
||||
|
||||
Use `search-docs` for detailed Livewire 3 patterns and documentation.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
### Creating Components
|
||||
|
||||
Use the `php artisan make:livewire [Posts\CreatePost]` Artisan command to create new components.
|
||||
|
||||
### Fundamental Concepts
|
||||
|
||||
- State should live on the server, with the UI reflecting it.
|
||||
- All Livewire requests hit the Laravel backend; they're like regular HTTP requests. Always validate form data and run authorization checks in Livewire actions.
|
||||
|
||||
## Livewire 3 Specifics
|
||||
|
||||
### Key Changes From Livewire 2
|
||||
|
||||
These things changed in Livewire 3, but may not have been updated in this application. Verify this application's setup to ensure you follow existing conventions.
|
||||
- Use `wire:model.live` for real-time updates, `wire:model` is now deferred by default.
|
||||
- Components now use the `App\Livewire` namespace (not `App\Http\Livewire`).
|
||||
- Use `$this->dispatch()` to dispatch events (not `emit` or `dispatchBrowserEvent`).
|
||||
- Use the `components.layouts.app` view as the typical layout path (not `layouts.app`).
|
||||
|
||||
### New Directives
|
||||
|
||||
- `wire:show`, `wire:transition`, `wire:cloak`, `wire:offline`, `wire:target` are available for use.
|
||||
|
||||
### Alpine Integration
|
||||
|
||||
- Alpine is now included with Livewire; don't manually include Alpine.js.
|
||||
- Plugins included with Alpine: persist, intersect, collapse, and focus.
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Component Structure
|
||||
|
||||
- Livewire components require a single root element.
|
||||
- Use `wire:loading` and `wire:dirty` for delightful loading states.
|
||||
|
||||
### Using Keys in Loops
|
||||
|
||||
<code-snippet name="Wire Key in Loops" lang="blade">
|
||||
|
||||
@foreach ($items as $item)
|
||||
<div wire:key="item-{{ $item->id }}">
|
||||
{{ $item->name }}
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
</code-snippet>
|
||||
|
||||
### Lifecycle Hooks
|
||||
|
||||
Prefer lifecycle hooks like `mount()`, `updatedFoo()` for initialization and reactive side effects:
|
||||
|
||||
<code-snippet name="Lifecycle Hook Examples" lang="php">
|
||||
|
||||
public function mount(User $user) { $this->user = $user; }
|
||||
public function updatedSearch() { $this->resetPage(); }
|
||||
|
||||
</code-snippet>
|
||||
|
||||
## JavaScript Hooks
|
||||
|
||||
You can listen for `livewire:init` to hook into Livewire initialization:
|
||||
|
||||
<code-snippet name="Livewire Init Hook Example" lang="js">
|
||||
|
||||
document.addEventListener('livewire:init', function () {
|
||||
Livewire.hook('request', ({ fail }) => {
|
||||
if (fail && fail.status === 419) {
|
||||
alert('Your session expired');
|
||||
}
|
||||
});
|
||||
|
||||
Livewire.hook('message.failed', (message, component) => {
|
||||
console.error(message);
|
||||
});
|
||||
});
|
||||
|
||||
</code-snippet>
|
||||
|
||||
## Testing
|
||||
|
||||
<code-snippet name="Example Livewire Component Test" lang="php">
|
||||
|
||||
Livewire::test(Counter::class)
|
||||
->assertSet('count', 0)
|
||||
->call('increment')
|
||||
->assertSet('count', 1)
|
||||
->assertSee(1)
|
||||
->assertStatus(200);
|
||||
|
||||
</code-snippet>
|
||||
|
||||
<code-snippet name="Testing Livewire Component Exists on Page" lang="php">
|
||||
|
||||
$this->get('/posts/create')
|
||||
->assertSeeLivewire(CreatePost::class);
|
||||
|
||||
</code-snippet>
|
||||
|
||||
## Common Pitfalls
|
||||
|
||||
- Forgetting `wire:key` in loops causes unexpected behavior when items change
|
||||
- Using `wire:model` expecting real-time updates (use `wire:model.live` instead in v3)
|
||||
- Not validating/authorizing in Livewire actions (treat them like HTTP requests)
|
||||
- Including Alpine.js separately when it's already bundled with Livewire 3
|
||||
174
.claude/skills/pest-testing/SKILL.md
Normal file
174
.claude/skills/pest-testing/SKILL.md
Normal file
@@ -0,0 +1,174 @@
|
||||
---
|
||||
name: pest-testing
|
||||
description: >-
|
||||
Tests applications using the Pest 4 PHP framework. Activates when writing tests, creating unit or feature
|
||||
tests, adding assertions, testing Livewire components, browser 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.
|
||||
---
|
||||
|
||||
# Pest Testing 4
|
||||
|
||||
## When to Apply
|
||||
|
||||
Activate this skill when:
|
||||
|
||||
- Creating new tests (unit, feature, or browser)
|
||||
- Modifying existing tests
|
||||
- Debugging test failures
|
||||
- Working with browser testing or smoke testing
|
||||
- Writing architecture tests or visual regression tests
|
||||
|
||||
## Documentation
|
||||
|
||||
Use `search-docs` for detailed Pest 4 patterns and documentation.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
### Creating Tests
|
||||
|
||||
All tests must be written using Pest. Use `php artisan make:test --pest {name}`.
|
||||
|
||||
### Test Organization
|
||||
|
||||
- Unit/Feature tests: `tests/Feature` and `tests/Unit` directories.
|
||||
- Browser tests: `tests/Browser/` directory.
|
||||
- Do NOT remove tests without approval - these are core application code.
|
||||
|
||||
### Basic Test Structure
|
||||
|
||||
<code-snippet name="Basic Pest Test Example" lang="php">
|
||||
|
||||
it('is true', function () {
|
||||
expect(true)->toBeTrue();
|
||||
});
|
||||
|
||||
</code-snippet>
|
||||
|
||||
### 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()`:
|
||||
|
||||
<code-snippet name="Pest Response Assertion" lang="php">
|
||||
|
||||
it('returns all', function () {
|
||||
$this->postJson('/api/docs', [])->assertSuccessful();
|
||||
});
|
||||
|
||||
</code-snippet>
|
||||
|
||||
| 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.):
|
||||
|
||||
<code-snippet name="Pest Dataset Example" lang="php">
|
||||
|
||||
it('has emails', function (string $email) {
|
||||
expect($email)->not->toBeEmpty();
|
||||
})->with([
|
||||
'james' => 'james@laravel.com',
|
||||
'taylor' => 'taylor@laravel.com',
|
||||
]);
|
||||
|
||||
</code-snippet>
|
||||
|
||||
## Pest 4 Features
|
||||
|
||||
| Feature | Purpose |
|
||||
|---------|---------|
|
||||
| Browser Testing | Full integration tests in real browsers |
|
||||
| Smoke Testing | Validate multiple pages quickly |
|
||||
| Visual Regression | Compare screenshots for visual changes |
|
||||
| Test Sharding | Parallel CI runs |
|
||||
| Architecture Testing | Enforce code conventions |
|
||||
|
||||
### Browser Test Example
|
||||
|
||||
Browser tests run in real browsers for full integration testing:
|
||||
|
||||
- Browser tests live in `tests/Browser/`.
|
||||
- Use Laravel features like `Event::fake()`, `assertAuthenticated()`, and model factories.
|
||||
- Use `RefreshDatabase` for clean state per test.
|
||||
- Interact with page: click, type, scroll, select, submit, drag-and-drop, touch gestures.
|
||||
- Test on multiple browsers (Chrome, Firefox, Safari) if requested.
|
||||
- Test on different devices/viewports (iPhone 14 Pro, tablets) if requested.
|
||||
- Switch color schemes (light/dark mode) when appropriate.
|
||||
- Take screenshots or pause tests for debugging.
|
||||
|
||||
<code-snippet name="Pest Browser Test Example" lang="php">
|
||||
|
||||
it('may reset the password', function () {
|
||||
Notification::fake();
|
||||
|
||||
$this->actingAs(User::factory()->create());
|
||||
|
||||
$page = visit('/sign-in');
|
||||
|
||||
$page->assertSee('Sign In')
|
||||
->assertNoJavaScriptErrors()
|
||||
->click('Forgot Password?')
|
||||
->fill('email', 'nuno@laravel.com')
|
||||
->click('Send Reset Link')
|
||||
->assertSee('We have emailed your password reset link!');
|
||||
|
||||
Notification::assertSent(ResetPassword::class);
|
||||
});
|
||||
|
||||
</code-snippet>
|
||||
|
||||
### Smoke Testing
|
||||
|
||||
Quickly validate multiple pages have no JavaScript errors:
|
||||
|
||||
<code-snippet name="Pest Smoke Testing Example" lang="php">
|
||||
|
||||
$pages = visit(['/', '/about', '/contact']);
|
||||
|
||||
$pages->assertNoJavaScriptErrors()->assertNoConsoleLogs();
|
||||
|
||||
</code-snippet>
|
||||
|
||||
### Visual Regression Testing
|
||||
|
||||
Capture and compare screenshots to detect visual changes.
|
||||
|
||||
### Test Sharding
|
||||
|
||||
Split tests across parallel processes for faster CI runs.
|
||||
|
||||
### Architecture Testing
|
||||
|
||||
Pest 4 includes architecture testing (from Pest 3):
|
||||
|
||||
<code-snippet name="Architecture Test Example" lang="php">
|
||||
|
||||
arch('controllers')
|
||||
->expect('App\Http\Controllers')
|
||||
->toExtendNothing()
|
||||
->toHaveSuffix('Controller');
|
||||
|
||||
</code-snippet>
|
||||
|
||||
## 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
|
||||
- Forgetting `assertNoJavaScriptErrors()` in browser tests
|
||||
124
.claude/skills/tailwindcss-development/SKILL.md
Normal file
124
.claude/skills/tailwindcss-development/SKILL.md
Normal file
@@ -0,0 +1,124 @@
|
||||
---
|
||||
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.
|
||||
---
|
||||
|
||||
# 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:
|
||||
|
||||
<code-snippet name="CSS-First Config" lang="css">
|
||||
@theme {
|
||||
--color-brand: oklch(0.72 0.11 178);
|
||||
}
|
||||
</code-snippet>
|
||||
|
||||
### Import Syntax
|
||||
|
||||
In Tailwind v4, import Tailwind with a regular CSS `@import` statement instead of the `@tailwind` directives used in v3:
|
||||
|
||||
<code-snippet name="v4 Import Syntax" lang="diff">
|
||||
- @tailwind base;
|
||||
- @tailwind components;
|
||||
- @tailwind utilities;
|
||||
+ @import "tailwindcss";
|
||||
</code-snippet>
|
||||
|
||||
### 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:
|
||||
|
||||
<code-snippet name="Gap Utilities" lang="html">
|
||||
<div class="flex gap-8">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
</div>
|
||||
</code-snippet>
|
||||
|
||||
## 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:
|
||||
|
||||
<code-snippet name="Dark Mode" lang="html">
|
||||
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
|
||||
Content adapts to color scheme
|
||||
</div>
|
||||
</code-snippet>
|
||||
|
||||
## Common Patterns
|
||||
|
||||
### Flexbox Layout
|
||||
|
||||
<code-snippet name="Flexbox Layout" lang="html">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<div>Left content</div>
|
||||
<div>Right content</div>
|
||||
</div>
|
||||
</code-snippet>
|
||||
|
||||
### Grid Layout
|
||||
|
||||
<code-snippet name="Grid Layout" lang="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>
|
||||
</code-snippet>
|
||||
|
||||
## 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
|
||||
Reference in New Issue
Block a user