Web UI Design Guide

Overview

Ensure every web UI component built looks modern and professional by applying systematic design principles. This skill provides comprehensive guidelines for color, spacing, typography, and component-specific patterns to achieve clean, minimal, and consistent user interfaces.

When to Use This Skill

Activate this skill when:

• Building any web UI component (buttons, forms, cards, navigation, modals, etc.)
• Creating layouts or page designs
• Implementing design systems or component libraries
• Working with UI frameworks (React, Vue, Next.js, shadcn/ui, etc.)
• Receiving requests like:
  • "Create a login form"
  • "Design a dashboard card"
  • "Build a navigation header"
  • "Make this UI look modern"
  • "Style this component"