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.