frontend-design_skill

Overview

This skill teaches design thinking and decision-making for web UI, emphasizing purposeful pixels and user psychology over fixed templates. It guides choices for components, layouts, color schemes, typography, visual effects, and motion while warning against common AI-safe defaults. The focus is on asking the right questions, applying principles, and producing distinctive, user-centered interfaces.

How this skill works

Start by reading the mandatory UX psychology guidance, then consult optional modules (color, typography, effects, animation) only when relevant to the task. Follow a constrained decision process: gather timeline, content, brand, tech, and audience constraints; choose style direction; apply principles (spacing, hierarchy, color theory, motion); and review against anti-patterns. Runtime scripts can run automated UX/accessibility audits after implementation.

When to use it

• Designing or iterating UI components (buttons, forms, cards)
• Creating page layouts and establishing spacing/scale systems
• Selecting brand-appropriate color palettes and accents
• Choosing typography scales and pairings for hierarchy
• Defining motion or micro-interaction timing and easing

Best practices

• Always answer constraint questions first (timeline, content, brand, tech, audience) or ask the user
• Read ux-psychology guidance before any creative decisions
• Use 8-point spacing, golden-ratio scale, and 60–30–10 color distribution as starting rules
• Limit choices (Hick), size CTAs for touch (Fitts), and chunk content (Miller)
• Avoid common AI defaults: bento grids, mesh gradients, dark+neon, and blanket glassmorphism
• Respect accessibility: contrast, readable sizes, reduced-motion preference

Example use cases

• Designing a mobile checkout flow that minimizes drop-off using progressive disclosure
• Creating a marketing landing hero with dramatic typographic scale and a clear CTA
• Selecting a color system that conveys trust for a B2B dashboard
• Establishing a component library spacing and elevation hierarchy for consistent UI
• Specifying animation timing and easings for onboarding micro-interactions