npx claudepluginhub iserter/laravel-claude-agents --plugin laravel-claude-agentsThis skill uses the workspace's default tool permissions.
```bash
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
php artisan make:component Alert
<?php
namespace App\View\Components;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
class Alert extends Component
{
public function __construct(
public string $type = 'info',
public string $message = '',
public bool $dismissible = false,
) {}
public function alertClasses(): string
{
return match ($this->type) {
'success' => 'bg-green-100 text-green-800 border-green-300',
'error' => 'bg-red-100 text-red-800 border-red-300',
'warning' => 'bg-yellow-100 text-yellow-800 border-yellow-300',
default => 'bg-blue-100 text-blue-800 border-blue-300',
};
}
public function render(): View
{
return view('components.alert');
}
}
{{-- resources/views/components/alert.blade.php --}}
<div {{ $attributes->merge(['class' => 'border rounded-lg p-4 ' . $alertClasses()]) }}
role="alert">
<p>{{ $message ?: $slot }}</p>
@if ($dismissible)
<button type="button" @click="$el.parentElement.remove()">
×
</button>
@endif
</div>
{{-- Usage --}}
<x-alert type="success" message="Profile updated!" />
<x-alert type="error" dismissible>Something went wrong.</x-alert>
{{-- resources/views/components/card.blade.php --}}
@props([
'title' => null,
'footer' => null,
])
<div {{ $attributes->merge(['class' => 'bg-white rounded-lg shadow-md overflow-hidden']) }}>
@if ($title)
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="text-lg font-semibold text-gray-900">{{ $title }}</h3>
</div>
@endif
<div class="p-6">
{{ $slot }}
</div>
@if ($footer)
<div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
{{ $footer }}
</div>
@endif
</div>
{{-- Usage --}}
<x-card title="User Details">
<p>Name: {{ $user->name }}</p>
<x-slot:footer>
<button>Edit</button>
</x-slot:footer>
</x-card>
{{-- ✅ Merge classes and other attributes --}}
<div {{ $attributes->merge(['class' => 'base-class', 'role' => 'alert']) }}>
{{ $slot }}
</div>
{{-- Usage: classes are appended, other attrs are overridden --}}
<x-alert class="extra-class" id="my-alert" />
{{-- Result: class="base-class extra-class" role="alert" id="my-alert" --}}
@props(['variant' => 'primary'])
<button {{ $attributes->class([
'px-4 py-2 rounded font-medium',
'bg-blue-600 text-white hover:bg-blue-700' => $variant === 'primary',
'bg-gray-200 text-gray-800 hover:bg-gray-300' => $variant === 'secondary',
'bg-red-600 text-white hover:bg-red-700' => $variant === 'danger',
])->merge(['type' => 'button']) }}>
{{ $slot }}
</button>
{{-- Filter attributes --}}
<input {{ $attributes->whereStartsWith('wire:') }} />
<div {{ $attributes->whereDoesntStartWith('wire:') }}>
{{-- Check if attribute exists --}}
@if ($attributes->has('autofocus'))
<script>document.querySelector('[autofocus]').focus();</script>
@endif
{{-- Get a specific attribute --}}
<input type="{{ $attributes->get('type', 'text') }}" />
{{-- Only / Except --}}
<label {{ $attributes->only(['for', 'class']) }}>
<input {{ $attributes->except(['class']) }} />
{{-- Prepend to existing attribute values --}}
<div {{ $attributes->prepend('class', 'base-') }}>
{{-- Useful for conditional attribute defaults --}}
<input {{ $attributes->merge([
'type' => 'text',
'class' => 'form-input',
]) }} />
{{-- resources/views/components/modal.blade.php --}}
@props(['title'])
<div {{ $attributes->merge(['class' => 'modal']) }}>
<div class="modal-header">
<h2>{{ $title }}</h2>
{{ $headerActions ?? '' }}
</div>
<div class="modal-body">
{{ $slot }}
</div>
@if (isset($footer))
<div class="modal-footer">
{{ $footer }}
</div>
@endif
</div>
{{-- Usage --}}
<x-modal title="Confirm Delete">
<x-slot:headerActions>
<button @click="close">×</button>
</x-slot:headerActions>
<p>Are you sure you want to delete this item?</p>
<x-slot:footer>
<button @click="close">Cancel</button>
<button @click="confirm" class="btn-danger">Delete</button>
</x-slot:footer>
</x-modal>
{{-- Component definition --}}
<ul>
@foreach ($items as $item)
{{ $slot->withAttributes(['class' => 'text-sm']) }}
@endforeach
</ul>
{{-- Scoped slots --}}
@props(['items'])
@foreach ($items as $item)
<li>{{ $slot }}</li>
@endforeach
{{-- ✅ Render components dynamically --}}
<x-dynamic-component :component="'alert'" type="success" message="Done!" />
{{-- Useful for form field rendering --}}
@foreach ($fields as $field)
<x-dynamic-component
:component="'forms.' . $field->type"
:name="$field->name"
:label="$field->label"
:value="old($field->name)"
/>
@endforeach
{{-- resources/views/components/layouts/app.blade.php --}}
@props(['title' => config('app.name')])
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ $title }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
@stack('styles')
</head>
<body class="antialiased">
{{ $header ?? '' }}
<main>
{{ $slot }}
</main>
{{ $footer ?? '' }}
@stack('scripts')
</body>
</html>
{{-- resources/views/dashboard.blade.php --}}
<x-layouts.app title="Dashboard">
<x-slot:header>
<x-navbar />
</x-slot:header>
<h1>Dashboard</h1>
<p>Welcome back!</p>
</x-layouts.app>
{{-- @class directive --}}
<div @class([
'p-4 rounded-lg',
'bg-green-100 text-green-800' => $status === 'active',
'bg-red-100 text-red-800' => $status === 'inactive',
'opacity-50' => $disabled,
])>
{{ $label }}
</div>
{{-- @style directive --}}
<div @style([
'background-color: ' . $color,
'font-weight: bold' => $isImportant,
'display: none' => $hidden,
])>
{{ $content }}
</div>
{{-- In layout --}}
<head>
@stack('styles')
</head>
<body>
{{ $slot }}
@stack('scripts')
</body>
{{-- In child views / components --}}
@push('styles')
<link rel="stylesheet" href="{{ asset('css/datepicker.css') }}">
@endpush
@push('scripts')
<script src="{{ asset('js/datepicker.js') }}"></script>
@endpush
{{-- Prepend to stack (added before other pushes) --}}
@prepend('scripts')
<script src="{{ asset('js/jquery.min.js') }}"></script>
@endprepend
{{-- Push once (prevents duplicates) --}}
@pushOnce('scripts')
<script src="{{ asset('js/chart.js') }}"></script>
@endPushOnce
{{-- resources/views/posts/index.blade.php --}}
<x-layouts.app>
<h1>Posts</h1>
@fragment('post-list')
<div id="post-list">
@foreach ($posts as $post)
@fragment('post-' . $post->id)
<div id="post-{{ $post->id }}">
<h2>{{ $post->title }}</h2>
<p>{{ $post->excerpt }}</p>
</div>
@endfragment
@endforeach
{{ $posts->links() }}
</div>
@endfragment
</x-layouts.app>
// Controller returning just a fragment
public function index(Request $request)
{
$posts = Post::paginate(15);
if ($request->header('HX-Request')) {
return view('posts.index', compact('posts'))->fragment('post-list');
}
return view('posts.index', compact('posts'));
}
{{-- resources/views/components/forms/input.blade.php --}}
@props([
'name',
'label' => null,
'type' => 'text',
'value' => null,
])
<div class="mb-4">
@if ($label)
<label for="{{ $name }}" class="block text-sm font-medium text-gray-700 mb-1">
{{ $label }}
</label>
@endif
<input
{{ $attributes->class([
'w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500',
'border-red-500' => $errors->has($name),
])->merge([
'type' => $type,
'name' => $name,
'id' => $name,
'value' => old($name, $value),
]) }}
/>
@error($name)
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
{{-- resources/views/components/forms/select.blade.php --}}
@props([
'name',
'label' => null,
'options' => [],
'selected' => null,
'placeholder' => 'Select an option...',
])
<div class="mb-4">
@if ($label)
<label for="{{ $name }}" class="block text-sm font-medium text-gray-700 mb-1">
{{ $label }}
</label>
@endif
<select
{{ $attributes->class([
'w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500',
'border-red-500' => $errors->has($name),
])->merge(['name' => $name, 'id' => $name]) }}
>
@if ($placeholder)
<option value="">{{ $placeholder }}</option>
@endif
@foreach ($options as $value => $text)
<option value="{{ $value }}" @selected(old($name, $selected) == $value)>
{{ $text }}
</option>
@endforeach
</select>
@error($name)
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
<form method="POST" action="{{ route('users.store') }}">
@csrf
<x-forms.input name="name" label="Full Name" required />
<x-forms.input name="email" label="Email" type="email" required />
<x-forms.select
name="role"
label="Role"
:options="['admin' => 'Admin', 'editor' => 'Editor', 'viewer' => 'Viewer']"
/>
<button type="submit" class="btn-primary">Create User</button>
</form>
{{-- resources/views/components/forms/input.blade.php --}}
{{-- Usage: --}}
<x-forms.input name="email" />
{{-- resources/views/components/navigation/menu-item.blade.php --}}
{{-- Usage: --}}
<x-navigation.menu-item href="/about">About</x-navigation.menu-item>
// For very simple components without a template
use Illuminate\View\Component;
class ColorPicker extends Component
{
public function __construct(
public string $color = '#000000',
) {}
public function render(): string
{
return <<<'blade'
<div>
<input type="color" {{ $attributes->merge(['value' => $color]) }}>
</div>
blade;
}
}
@props declared for all expected data in anonymous components$attributes bag used to allow consumer customizationmerge() or class()@error@stack for page-specific CSS/JS@pushOnce used to prevent duplicate asset includes@class and @style used for conditional styling