frontend-design-directionlisted

## Constraints - Apply `@rules/laravel/filament.mdc` — for custom Blade + Tailwind, create and register a custom theme; use Heroicon, not raw icon strings. - Apply `@rules/laravel/livewire.mdc` — keep Blade presentation-only; reuse existing Livewire/Blade patterns before inventing new ones. - Apply `@rules/security/frontend.md` only if the direction introduces dynamic output, inline styles, or CSP-sensitive markup — sanitize before DOM insertion and prefer safe rendering. - Stack is Blade + Livewire + Alpine.js + Filament + Tailwind. No React/Vue/Next. ## Use when - The user asks to build a page, app, dashboard, component, landing page, or UI. - The user asks to make an interface more polished, distinctive, or less generic. - The work needs visual hierarchy, typography, color, motion, and layout decisions. - The current UI works but reads as flat, templated, or mismatched to its audience. This skill is about judgment, not mechanics. Pair it with `design-system` (tokens/audit), `frontend-patterns` (implementation), and `frontend-a11y` (accessibility). --- ## Choose a direction before coding Decide these five things explicitly first: 1. **Purpose** — what job does this interface do? 2. **Audience** — who repeats this workflow, and what must they scan first? 3. **Tone** — name it: utilitarian, editorial, playful, industrial, refined, technical, maximal, minimal, dense, or calm. 4. **Memorable detail** — one deliberate idea that makes the result feel intentional rather than