SkillMD SkillMD
light-dark-mode
Profile My skills Saved Collections Edit profile Submit a skill

← all plugins

UI Design

by @owl-listener · plugin · 14 skills

UI design skills: color palettes, typography systems, layout grids, responsive breakpoints, dark mode specs, visual hierarchy, and brand alignment.

Install the whole plugin (CLI)
npx skillmds add owl-listener/layout-grid npx skillmds add owl-listener/color-system npx skillmds add owl-listener/spacing-system npx skillmds add owl-listener/dark-mode-design npx skillmds add owl-listener/law-of-proximity npx skillmds add owl-listener/readable-measure npx skillmds add owl-listener/typography-scale npx skillmds add owl-listener/visual-hierarchy npx skillmds add owl-listener/responsive-design npx skillmds add owl-listener/data-visualization npx skillmds add owl-listener/illustration-style npx skillmds add owl-listener/aesthetic-usability npx skillmds add owl-listener/von-restorff-effect npx skillmds add owl-listener/law-of-common-region
⬇ Download

Skills in this plugin

  1. ▌
    layout-grid · owl-listener
    Define responsive layout grid systems with columns, gutters, margins, and breakpoint behavior.
    1.7k
    repo stars
  2. ▌
    color-system · owl-listener
    Build a comprehensive color system with palette generation, semantic mapping, and accessibility compliance.
    1.7k
    repo stars
  3. ▌
    spacing-system · owl-listener
    Create a consistent spacing system based on a base unit with contextual application rules for harmonious interfaces.
    1.7k
    repo stars
  4. ▌
    dark-mode-design · owl-listener
    Design comfortable, accessible dark mode interfaces with proper color adaptation, contrast, and surface hierarchy.
    1.7k
    repo stars
  5. ▌
    law-of-proximity · owl-listener
    Apply the Law of Proximity to group related elements through spatial relationships in UI layouts.
    1.7k
    repo stars
  6. ▌
    readable-measure · owl-listener
    Set optimal line lengths for readability across typography scales and responsive layouts.
    1.7k
    repo stars
  7. ▌
    typography-scale · owl-listener
    Creates modular typography scales with size, weight, and line-height relationships for consistent digital interfaces.
    1.7k
    repo stars
  8. ▌
    visual-hierarchy · owl-listener
    Establish clear visual hierarchy through size, weight, color, spacing, and positioning to guide users through interfaces.
    1.7k
    repo stars
  9. ▌
    responsive-design · owl-listener
    Design adaptive layouts and interactions that work across all screen sizes and input methods.
    1.7k
    repo stars
  10. ▌
    data-visualization · owl-listener
    Design clear, accessible data visualizations with appropriate chart selection and styling.
    1.7k
    repo stars
  11. ▌
    illustration-style · owl-listener
    Define an illustration style guide with visual language, color usage, and application rules.
    1.7k
    repo stars
  12. ▌
    aesthetic-usability · owl-listener
    Apply the Aesthetic-Usability Effect to ensure visual consistency and polish translate into user trust and perceived quality without masking genuine usability problems.
    1.7k
    repo stars
  13. ▌
    von-restorff-effect · owl-listener
    Apply the Von Restorff Effect to make the most important element visually distinct from its surroundings, improving attention and recall.
    1.7k
    repo stars
  14. ▌
    law-of-common-region · owl-listener
    Group interface elements using containers, backgrounds, and boundaries based on the Gestalt Law of Common Region.
    1.7k
    repo stars