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.