frontend-ui-designer

name	frontend-ui-designer
description	Expert guidance for creating modern, intuitive, and visually stunning user interfaces. Use this skill when designing or implementing frontend UIs, components, layout structures, or styling.

Frontend UI Designer Instructions

1. Visual Hierarchy & Composition

• Priority: Ensure the most important actions (CTAs) are most prominent. Use size, weight, and color to guide the eye.
• F-Pattern & Z-Pattern: Design layouts that follow natural scanning patterns for text-heavy and visual-heavy pages respectively.
• White Space: Use generous white space to reduce cognitive load and group related elements.
• Grouping: Use proximity and subtle borders/shadows to group related information (Law of Proximity).

2. Color Theory & Application

• The 60-30-10 Rule: 60% dominant neutral color (backgrounds/surfaces), 30% secondary color (borders/text), 10% accent color (CTAs/links).
• Contrast: Maintain WCAG AA/AAA compliance. Use high-contrast ratios for readability.
• Semantic Colors: Use consistent colors for status (Success: #10B981, Error: #EF4444, Warning: #F59E0B, Info: #3B82F6).
• Dark Mode Support: Ensure all colors have a dark mode equivalent. Use lighter grays (e.g., Slate-800/900) instead of pure black for backgrounds to reduce eye strain.
• Modern Palette Recommendation:
  • Primary: Indigo (#6366F1) or Slate (#0F172A)
  • Surface: White (#FFFFFF) or extremely light gray (#F8FAFC)
  • Text: Slate-900 (#0F172A) for headings, Slate-600 (#475569) for body text.

3. Typography

• Font Pairing: Use modern sans-serif fonts like 'Inter', 'Geist', 'Roboto', or 'SF Pro Display'. Limit to two font families.
• Scale: Use a modular scale (e.g., Major Third).
  • H1: 2.25rem (36px), Bold
  • H2: 1.875rem (30px), Semi-bold
  • H3: 1.5rem (24px), Semi-bold
  • Body: 1rem (16px), Regular
  • Small: 0.875rem (14px), Medium
• Line Height: 1.5 - 1.6 for body text to ensure readability; tighter (1.2-1.3) for headings.

4. Layout & Spacing

• 8pt Grid System: Use 4, 8, 16, 24, 32, 48, 64px for all spacing. This creates a rhythmic, professional feel.
• Containerization: Use standard widths (max-w-7xl, max-w-5xl) to keep content centered and readable on wide screens.
• Bento Box Grids: Consider organized, grid-like layouts for dashboard or data-heavy views to structure information clearly.
• Responsive Design: Always consider Mobile-First. Use flexible flex/grid layouts.

5. Modern UI Trends & Techniques (2025/2026)

• Soft Shadows & Depth: Use box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); instead of harsh borders.
• Glassmorphism: For overlays/navbars, use background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);.
• Subtle Gradients: Use very subtle linear gradients (e.g., Slate-50 to White) or mesh gradients to add depth without distraction.
• Border Radius: Use rounded-lg (8px) or rounded-xl (12px) for a soft, modern aesthetic.
• Micro-interactions: Add purposeful motion (hover states, button clicks, loading skeletons) to provide feedback and delight. Keep animations fast (150-300ms).

6. Component Patterns & Polishing

• Form Design:
  • Single Column: Preferred for readability and mobile-friendliness.
  • Labels: Always visible above inputs (avoid placeholders as labels).
  • Validation: Real-time inline validation with clear error messages.
  • Autofill: Support appropriate autocomplete attributes.
• Empty States:
  • Never Blank: Provide a helpful illustration, explanation, and a primary action button (e.g., "No projects yet. [Create Project]").
  • Educational: Use this space to teach users about the feature.
• Skeleton Loading:
  • Perceived Performance: Use shimmering skeleton screens instead of generic spinners for initial content loads.
  • Structure: Mimic the final layout (image, title, text lines) to reduce layout shift (CLS).
• Navigation:
  • Thumb Zone: Place primary navigation/actions at the bottom on mobile.
  • Gestures: Support common gestures like "swipe to go back" or "swipe to dismiss".

7. Accessibility & Inclusivity (A11y)

• Keyboard Navigation: Ensure all interactive elements are focusable and have visible focus states (e.g., ring-2 ring-offset-2).
• Touch Targets: Minimum touch target size of 44x44px (or 48x48px) for mobile users.
• Screen Readers: Use semantic HTML (<button>, <nav>, <main>) and ARIA labels where visual context isn't enough.
• Neurodiversity: Offer clear, distraction-free modes where possible. Avoid autoplaying media.

8. Best Practices & UX

• Affordance: Buttons should look clickable. Links should be clearly identifiable.
• Feedback: Provide immediate visual feedback for all user actions (loading states, success toasts, error messages).
• Consistency: Use a design system or component library to ensure buttons, inputs, and cards look identical across the app.
• Ethical Design: Avoid dark patterns. Be transparent about data usage and provide easy opt-outs.

Available Resources

• Refactoring UI - Practical design tips.
• Google Material 3 - Design system reference.
• Lucide Icons - Clean, consistent icon set.
• Adobe Color - Palette generation.
• Coolors.co - Fast color schemes.
• WCAG Guidelines - Accessibility standards.