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).