ui-ux-design-patterns

Apply psychology-informed UX patterns to improve interface clarity and reduce cognitive load.

4|Updated Jun 6, 2025
One-click install
npx skills add https://github.com/endo-ly/harmonic-orbit --skill ui-ux-design-patterns
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-design-patterns
Source: https://github.com/endo-ly/harmonic-orbit/tree/main/.claude/skills/ui-ux-design-patterns
Command: npx skills add https://github.com/endo-ly/harmonic-orbit --skill ui-ux-design-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you avoid generic, machine-like UI/UX and instead create visually distinctive interfaces backed by proven UX psychology to reduce cognitive load, guide decisions, and build user trust.

Core Features & Use Cases

  • UI Aesthetics: Typography, color systems, motion design, and atmospheric backgrounds that establish a clear visual identity.
  • UX Psychology: Evidence-based patterns for cognitive load management, attention, decision-making, and behavioral design (applied ethically).
  • Pattern Application: Practical guidance for common UI/UX scenarios like landing pages, dashboards, onboarding, and conversion flows, including accessibility considerations (e.g., reduced motion, contrast).

Quick Start

Use the ui-ux-design-patterns skill to redesign your landing page so it has a stronger visual hierarchy, a cohesive distinctive theme, and a psychologically optimized call-to-action flow.

Frequently Asked Questions about ui-ux-design-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a landing page with better visual hierarchy and conversion flow?

This skill applies distinctive UI aesthetics and psychology-informed UX patterns to reduce cognitive load and increase user clarity across interfaces like landing pages, dashboards, and onboarding flows. It integrates typography, color, motion, and layout to build user trust.

How do I apply UX psychology to reduce cognitive load in dashboard interfaces?

To reduce cognitive load in dashboard interfaces, apply evidence-based UX psychology patterns for attention, decision-making framing, and progressive disclosure. This ensures users process information efficiently without feeling overwhelmed by data density.

How do I create an onboarding flow that feels distinct and builds user trust?

To create an onboarding flow that builds trust, use distinctive visual identity elements like atmospheric backgrounds and motion design, combined with behavioral design patterns that ethically guide user decisions and increase clarity.

Does this approach include accessibility constraints for motion design and contrast?

Yes, this approach includes accessibility considerations such as providing reduced motion alternatives and maintaining proper contrast. These constraints ensure that distinctive visual identity and psychology-informed patterns remain usable for all users.

What is the best way to establish a cohesive design system for consistent UI execution?

The best way to establish a cohesive design system is to define implementation-ready direction for typography, color systems, and motion. This ensures consistent execution while maintaining a distinctive visual identity across all conversion-oriented flows.