ui-composition
UI Composition
Visual design is where intent becomes tangible. Every colour, every spacing decision, every typographic choice either includes or excludes people. This skill ensures visual decisions are principled, systematic, and inclusive.
When to Use
- Designing screen layouts or page structures
- Choosing or refining colour palettes
- Setting typography systems
- Establishing spacing and grid systems
- Designing for responsive breakpoints
- Creating or modifying visual hierarchy
- Designing dark mode or high contrast variants
Process
Step 1: Reference the Foundation
More from owl-listener/designpowers
adaptive-interfaces
Use when designing for user preferences — motion sensitivity, contrast needs, colour schemes, text sizing, information density, or any interface behaviour that should adapt to individual needs
6token-architecture
Use when building or restructuring design token systems — global tokens, semantic tokens, component tokens, naming conventions, theming, and multi-platform token distribution
6motion-choreography
Use when designing animation sequences, page transitions, micro-interactions, loading states, or any motion that communicates meaning — ensures motion is purposeful, performant, and safe for motion-sensitive users
6design-discovery
You MUST use this before any creative or design work — building features, creating components, designing interfaces, modifying user-facing behaviour. Explores intent, constraints, users, and context before any design decisions are made
6responsive-patterns
Use when designing complex responsive layouts — breakpoint strategy, layout shifts, content reflow, responsive typography, container queries, and ensuring the experience works across the full device spectrum
6design-memory
Use when starting a new project or when taste decisions are made — accumulates the user's aesthetic preferences, recurring patterns, and design instincts across projects so each new project starts with what the system already knows about their taste
6