UI & Frontend Design (Pro Max)

When to use this skill

• Designing new pages or components (Blade/React).

• Refactoring UI for "premium" aesthetic.

• Choosing colors, typography, or spacing.

1. Core Visual Principles

• Layouts: Mobile-first always. Use Bento Grids for dashboards and data density.

• Layers & Depth: Use a consistent Z-Index scale (10, 20, 30, 40, 50).

• Styles: Experiment with Glassmorphism (layered transparency) and Neo-Brutalism (high contrast borders) where appropriate.

2. Spacing & Touch

• Touch Targets: Minimum 44x44px for ALL interactive elements (mobile access).

• Tailwind: Use logical increments (p-4 , m-2 ). Avoid arbitrary values unless absolutely necessary.

• Line Length: Limit text width to 65-75 characters for readability (prose or max-w-prose ).

3. Colors & Typography

• Palettes:

• SaaS: Primary Blue (#2563EB ).

• Creative: Indigo/Violet (#6366F1 ).

• Commerce: Emerald (#059669 ).

• Contrast: Strict 4.5:1 ratio for text. Visible focus rings for keyboard users.

• Typography:

• Headings: Inter, Poppins, or Space Grotesk.

• Body: Inter, Open Sans, or DM Sans.

• Line Height: 1.5 - 1.75 for body text.

4. Laravel/Blade Strategies

• Components: Wrap UI patterns in Blade Components (<x-card> , <x-button> ) to enforce consistency.

• Animations: Use @push('scripts') or Alpine.js for micro-interactions (150ms-300ms duration).

• Theme: Extend tailwind.config.js with semantic names (bg-primary , text-on-primary ) instead of raw colors.