design-guidelines

name	design-guidelines
description	Comprehensive UI/UX design guidelines covering visual design (typography, color, motion) and user experience (cognitive psychology, interaction patterns, mental models). Use when building frontend interfaces or evaluating design decisions.
license	Complete terms in LICENSE.txt

This skill provides comprehensive design guidance for creating exceptional frontend interfaces that are both visually distinctive and cognitively intuitive.

When to Use

Apply these guidelines when:

• Building web components, pages, or applications
• Making UI/UX design decisions
• Designing interaction patterns and information architecture
• Evaluating existing interfaces for improvements
• Ensuring production-grade design quality

Structure

This skill consists of two complementary perspectives:

ui-design.md

Visual design principles focused on aesthetics and brand:

• Typography and color systems
• Motion and micro-interactions
• Spatial composition and layouts
• Anti-patterns to avoid (generic AI aesthetics)
• Creating memorable, distinctive interfaces

ux-design.md

User experience principles based on cognitive psychology and HCI:

• Mental models and task flows
• Interaction patterns and usability
• Cognitive biases and perception
• Accessibility and inclusive design
• Making interfaces feel natural and effortless

IMPORTANT: Great design requires both perspectives. Visual beauty without usability is frustrating. Usability without aesthetics is forgettable. Use both documents together for complete design guidance.

Design Philosophy

• Intentionality over intensity: Bold maximalism and refined minimalism both work - the key is executing with precision
• Invisible interface: The best UX feels like no UX at all - users accomplish goals without thinking about the tool
• Context-specific creativity: Avoid generic solutions - design for the specific problem, audience, and constraints
• Cognitive respect: Every element costs mental effort - be ruthless about reducing unnecessary complexity

Reference the specific documents (ui-design.md or ux-design.md) as needed for detailed guidance.