design-systemlisted

## Constraints - Apply `@rules/laravel/filament.mdc` — for custom Blade + Tailwind, create and register a custom theme; use `Filament\Support\Icons\Heroicon` for icons. - Apply `@rules/laravel/livewire.mdc` — keep Blade templates presentation-only; components are slim entry points. - Apply `@rules/laravel/architecture.mdc` and `@rules/laravel/laravel.mdc` for file placement. - Apply `@rules/security/frontend.md` if any audit fix touches output rendering or CSP. - Stack is Blade + Livewire + Alpine.js + Filament + Tailwind. No React/Vue/Next. - Any live-URL or browser-screenshot step is OPTIONAL and tool-agnostic — never a hard dependency. ## Use when - Starting a project that needs a coherent design system. - Auditing an existing codebase for visual consistency. - Before a redesign — to understand what already exists. - The UI looks "off" but the cause is unclear. - Reviewing a PR that touches styling, Tailwind config, or a Filament theme. This skill has three modes. Pick the one that matches the request. --- ## Mode 1: Generate a design system Produce a documented token set wired into Tailwind, a Filament theme, and reusable Blade/Livewire components. ### Steps 1. **Scan** existing styling for de-facto patterns: `tailwind.config.js`, `resources/css/app.css`, Blade views under `resources/views`, and any Filament theme CSS. Collect every color, font, size, radius, and shadow already in use. 2. **Extract tokens** into these groups: colors (brand, neutral, semantic success