design-guide_skill

Overview

This skill ensures modern, professional, and consistent UI design across SwiftUI, Android, and web platforms. It enforces a clean, minimal aesthetic with a neutral color base plus one accent color, an 8px grid spacing system, clear typography hierarchy, and defined interactive states. Always consult this guide before creating or modifying any UI component.

How this skill works

The skill inspects component and screen designs for adherence to core rules: spacing multiples of 8px, neutral-first color distribution with a single accent, minimum typography sizes and line heights, subtle shadows, and required interactive states. It flags violations (random spacing, multiple accent uses, missing hover/focus/disabled states, improper shadows, etc.) and provides actionable corrections and platform-specific implementation tips for SwiftUI, Android, and web.

When to use it

• When designing or updating buttons, forms, cards, navigation, or full screens
• When establishing or auditing a cross-platform design system
• Before approving UI implementations for mobile or web releases
• When converting visual mockups into production code
• When verifying accessibility and touch targets on mobile

Best practices

• Follow the 8px grid exclusively: use 8, 16, 24, 32, 48, 64px values only
• Use a neutral palette for 95% of the UI and one accent color for CTAs and highlights
• Keep body text ≥16px and limit projects to two font families
• Prefer subtle shadows and avoid combining border + shadow on the same component
• Always include hover, active, disabled, and focus states for interactive elements
• Design mobile-first and ensure touch targets meet platform minimums

Example use cases

• Create a primary and secondary button pair that matches padding, radius, and interactive states
• Design a card component with either a light border or a subtle shadow, consistent padding, and spacing
• Audit a form layout to ensure labels above inputs, 24px field spacing, and proper error states
• Implement responsive navigation with a 64px top bar on desktop and a 56px bottom bar on mobile
• Convert a visual design to SwiftUI/Compose/React using spacing constants, CSS variables, or dimens