UI/UX Design Principles
Framework-agnostic design principles and patterns for building professional enterprise applications. This skill is CRITICAL for all frontend work and should be invoked proactively before any UI implementation.
Overview
This skill provides:
- Top-down design methodology (layout → features → components → details)
- Layout and information architecture patterns
- Visual hierarchy principles (F-pattern, Z-pattern, inverted pyramid)
- Enterprise UX patterns (action hierarchy, search & filter, bulk actions)
- Component design guidelines (cards, buttons, empty states, loading states)
- Responsive design patterns for all breakpoints
- Accessibility standards (WCAG 2.1 AA compliance)
- Design system principles and naming conventions
- Common pitfalls and solutions
Reference Documentation
Core Principles
- design-principles - Complete UI/UX design principles and guidelines
- Top-down design methodology
- Layout & information architecture
- Visual hierarchy principles
- Enterprise UX patterns
- Component design guidelines
- Responsive design patterns
- Accessibility standards
- Design system principles
- Common pitfalls & solutions
Motion Design
- motion-design - Animation timing, easing curves, and motion patterns
- Timing reference (50ms-800ms+ by interaction type)
- Modern easing curves (CSS + Flutter)
- Animation categories (entrance, micro-interaction, state, loading, page)
- GPU-accelerated properties checklist
prefers-reduced-motion accessibility (mandatory)- Motion anti-patterns and decision framework
Production Hardening
- production-hardening - Frontend production hardening checklist
- Text & content resilience (overflow, length extremes, dynamic content)
- Internationalization (text expansion, formatting, encoding)
- Error states & recovery (network, HTTP status, form errors)
- Edge cases & boundary conditions (empty, loading, data volume, concurrency)
- Accessibility resilience (zoom, keyboard, screen reader, touch)
- Performance under stress (lazy loading, virtual scrolling, debouncing)
UX Writing & Microcopy
- ux-writing - Interface text patterns for enterprise applications
- Button & action label patterns (verb + noun)
- Error message structure (what + why + fix)
- Empty state copy (what goes here + why empty + how to fill)
- Form labels, placeholders, and help text
- Confirmation dialog structure
- Toast/banner message patterns
- Enterprise tone guidelines
Quick Patterns
Top-Down Design Order (ALWAYS Follow This)
LEVEL 1: FRAME/LAYOUT (Highest Priority)
↓ Space division, visual hierarchy, information architecture
LEVEL 2: FEATURE COMMUNICATION
↓ Discoverability, action hierarchy, navigation
LEVEL 3: COMPONENT EFFECTIVENESS
↓ Widget appropriateness, interaction patterns, feedback
LEVEL 4: VISUAL DETAILS (Lowest Priority)
→ Colors, shadows, animations, typography refinements
The 70/30 Rule
- 70% of space = primary content (what user came to see/do)
- 30% of space = secondary UI (navigation, filters, chrome)
Action Hierarchy
| Type |
Size |
Style |
Position |
Use |
| Primary |
48px |
Filled |
Top-right |
1 per page (Save, Add) |
| Secondary |
40px |
Outlined |
Near primary |
2-3 per page (Cancel, Export) |
| Tertiary |
32px |
Text |
Contextual |
Unlimited (Edit, View) |
View Type Decision
| Data Type |
Recommended View |
| Visual content (faces, photos) |
Grid (2-4 columns) |
| Structured data (many fields) |
Table (sortable) |
| Mobile/narrow screens |
List (single column) |
| Mixed visual + data |
Grid with Table toggle |
CRITICAL Gotchas
| Rule |
Why |
| ❌ NEVER design bottom-up |
Perfecting shadows on misplaced cards wastes effort |
| ✅ ALWAYS start with layout |
Solve fundamental usability issues first |
| ❌ NEVER hide primary actions |
Users must find main CTA without keyboard shortcuts |
| ✅ ALWAYS have persistent primary CTA |
Visible button + keyboard shortcut for power users |
| ❌ NEVER use color as sole indicator |
Accessibility requires icons + text for status |
| ✅ ALWAYS test on all breakpoints |
Mobile, tablet, desktop must all work |
When to Use This Skill
Use this skill PROACTIVELY when:
- Starting ANY frontend feature or page design
- Reviewing or auditing existing UI/UX
- Making layout or spacing decisions
- Designing navigation or information architecture
- Creating or extending design systems
- Implementing responsive layouts
- Ensuring accessibility compliance
- Resolving visual design problems
Related Skills
Support
For UI/UX design questions, invoke:
uiux-designer - Design analysis and recommendationsreact-specialist - Implementation guidanceflutter-specialist - Flutter/Material Design implementationreact-specialist - React component implementation
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: uiux-design-principles3description: Framework-agnostic UI/UX design principles and guidelines for enterprise applications. CRITICAL for ALL frontend work regardless of framework (React, Flutter, etc.). Use when asking about 'design principles', 'layout', 'visual hierarchy', 'information architecture', 'enterprise UX', 'responsive design', 'accessibility', 'design system', 'top-down design', 'component design', 'user experience', or any frontend design decisions. Use when this capability is needed.4---56# UI/UX Design Principles78Framework-agnostic design principles and patterns for building professional enterprise applications. This skill is **CRITICAL** for all frontend work and should be invoked proactively before any UI implementation.910## Overview1112This skill provides:1314- Top-down design methodology (layout → features → components → details)15- Layout and information architecture patterns16- Visual hierarchy principles (F-pattern, Z-pattern, inverted pyramid)17- Enterprise UX patterns (action hierarchy, search & filter, bulk actions)18- Component design guidelines (cards, buttons, empty states, loading states)19- Responsive design patterns for all breakpoints20- Accessibility standards (WCAG 2.1 AA compliance)21- Design system principles and naming conventions22- Common pitfalls and solutions2324## Reference Documentation2526### Core Principles2728- **[design-principles](design-principles.md)** - Complete UI/UX design principles and guidelines29 - Top-down design methodology30 - Layout & information architecture31 - Visual hierarchy principles32 - Enterprise UX patterns33 - Component design guidelines34 - Responsive design patterns35 - Accessibility standards36 - Design system principles37 - Common pitfalls & solutions3839### Motion Design4041- **[motion-design](motion-design.md)** - Animation timing, easing curves, and motion patterns42 - Timing reference (50ms-800ms+ by interaction type)43 - Modern easing curves (CSS + Flutter)44 - Animation categories (entrance, micro-interaction, state, loading, page)45 - GPU-accelerated properties checklist46 - `prefers-reduced-motion` accessibility (mandatory)47 - Motion anti-patterns and decision framework4849### Production Hardening5051- **[production-hardening](production-hardening.md)** - Frontend production hardening checklist52 - Text & content resilience (overflow, length extremes, dynamic content)53 - Internationalization (text expansion, formatting, encoding)54 - Error states & recovery (network, HTTP status, form errors)55 - Edge cases & boundary conditions (empty, loading, data volume, concurrency)56 - Accessibility resilience (zoom, keyboard, screen reader, touch)57 - Performance under stress (lazy loading, virtual scrolling, debouncing)5859### UX Writing & Microcopy6061- **[ux-writing](ux-writing.md)** - Interface text patterns for enterprise applications62 - Button & action label patterns (verb + noun)63 - Error message structure (what + why + fix)64 - Empty state copy (what goes here + why empty + how to fill)65 - Form labels, placeholders, and help text66 - Confirmation dialog structure67 - Toast/banner message patterns68 - Enterprise tone guidelines6970## Quick Patterns7172### Top-Down Design Order (ALWAYS Follow This)7374```75LEVEL 1: FRAME/LAYOUT (Highest Priority)76 ↓ Space division, visual hierarchy, information architecture77LEVEL 2: FEATURE COMMUNICATION78 ↓ Discoverability, action hierarchy, navigation79LEVEL 3: COMPONENT EFFECTIVENESS80 ↓ Widget appropriateness, interaction patterns, feedback81LEVEL 4: VISUAL DETAILS (Lowest Priority)82 → Colors, shadows, animations, typography refinements83```8485### The 70/30 Rule8687- 70% of space = primary content (what user came to see/do)88- 30% of space = secondary UI (navigation, filters, chrome)8990### Action Hierarchy9192| Type | Size | Style | Position | Use |93| --------- | ---- | -------- | ------------ | ----------------------------- |94| Primary | 48px | Filled | Top-right | 1 per page (Save, Add) |95| Secondary | 40px | Outlined | Near primary | 2-3 per page (Cancel, Export) |96| Tertiary | 32px | Text | Contextual | Unlimited (Edit, View) |9798### View Type Decision99100| Data Type | Recommended View |101| ------------------------------ | ---------------------- |102| Visual content (faces, photos) | Grid (2-4 columns) |103| Structured data (many fields) | Table (sortable) |104| Mobile/narrow screens | List (single column) |105| Mixed visual + data | Grid with Table toggle |106107## CRITICAL Gotchas108109| Rule | Why |110| ------------------------------------- | --------------------------------------------------- |111| ❌ NEVER design bottom-up | Perfecting shadows on misplaced cards wastes effort |112| ✅ ALWAYS start with layout | Solve fundamental usability issues first |113| ❌ NEVER hide primary actions | Users must find main CTA without keyboard shortcuts |114| ✅ ALWAYS have persistent primary CTA | Visible button + keyboard shortcut for power users |115| ❌ NEVER use color as sole indicator | Accessibility requires icons + text for status |116| ✅ ALWAYS test on all breakpoints | Mobile, tablet, desktop must all work |117118## When to Use This Skill119120Use this skill **PROACTIVELY** when:121122- Starting ANY frontend feature or page design123- Reviewing or auditing existing UI/UX124- Making layout or spacing decisions125- Designing navigation or information architecture126- Creating or extending design systems127- Implementing responsive layouts128- Ensuring accessibility compliance129- Resolving visual design problems130131## Related Skills132133- **[11-frontend-integration](../11-frontend-integration/SKILL.md)** - Technical integration patterns134- **[19-flutter-patterns](../19-flutter-patterns/SKILL.md)** - Flutter-specific implementation135- **[21-enterprise-ai-ux](../21-enterprise-ai-ux/SKILL.md)** - AI application UX patterns136- **[22-conversation-ux](../22-conversation-ux/SKILL.md)** - Conversation UI patterns137138## Support139140For UI/UX design questions, invoke:141142- `uiux-designer` - Design analysis and recommendations143- `react-specialist` - Implementation guidance144- `flutter-specialist` - Flutter/Material Design implementation145- `react-specialist` - React component implementation146147---148> Converted and distributed by [TomeVault](https://tomevault.io/claim/integrum-global) — claim your Tome and manage your conversions.149<!-- tomevault:4.0:skill_md:2026-04-13 -->
tomevault-io