frontend-design-direction

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 generated.
5. Constraints — framework, accessibility, performance, responsiveness, and the existing design system.

Match the direction to the domain. A SaaS operations tool — including most Filament panels — should usually be dense, quiet, and scannable. A portfolio, launch page, or editorial piece can be expressive. Do not force a marketing-landing composition onto a tool meant for repeated daily use.

---

Implementation guidance

• Build the actual usable experience as the first screen unless the user explicitly asks for marketing copy.
• Reuse what exists first — existing Blade components (<x-…>), Tailwind design tokens, the Filament theme, Heroicon, and established Livewire patterns — before introducing a new visual system. New components should consume current tokens, not hard-coded values.
• Use real or generated assets when the interface depends on images, charts, products, or inspectable media.
• Prefer contextual typography and spacing over generic oversized hero text.
• Keep palettes multi-dimensional — avoid a UI dominated by one hue family. Drive color from Tailwind tokens / CSS variables so the direction stays coherent across light/dark and component states.
• Design responsive constraints explicitly: grids, aspect ratios, min/max sizes, and stable toolbars should not shift when labels or hover states appear.
• Use motion sparingly and deliberately — prefer high-signal Alpine transitions and wire:loading feedback that clarify state over decorative animation, and respect motion-reduce:.
• Verify text fit on mobile and desktop; long labels must wrap or resize, not overflow.