ux-spacing-layout
UX Spacing & Layout Skill
Fluid spacing system using Utopia scale with container query inline (cqi) units. This skill covers spacing tokens, layout patterns, and visual rhythm.
Space Scale
The project uses Utopia fluid spacing with cqi units. Sizes interpolate based on container width.
IMPORTANT: cqi units require container-type: inline-size on an ancestor.
Space Tokens
| Token | Min (320px) | Max (1240px) | Usage |
|---|---|---|---|
--space-3xs |
4px | 6px | Hairline gaps |
--space-2xs |
8px | 11px | Tight spacing |
--space-xs |
12px | 17px | Compact gaps |
--space-s |
16px | 22px | Standard small |
--space-m |
24px | 33px | Standard medium |
More from matthewharwood/fantasy-phonics
animejs-v4
Anime.js 4.0 animations for Web Components — drag-drop, click feedback, swaps, cancelable motion. Use when adding animations, drag interactions, visual feedback, or motion to custom elements. Combines with web-components-architecture for lifecycle cleanup.
37html-semantic-engineering
30 pragmatic rules for production HTML covering semantic markup, accessibility (WCAG 2.1 AA), performance optimization, forms, and security. Use when writing HTML, building page structures, creating forms, implementing accessibility, or optimizing for SEO and Core Web Vitals.
15web-components-architecture
Build web components using Custom Elements v1 API with Declarative Shadow DOM, attribute-driven state, handleEvent pattern, and zero DOM selection. Use when creating custom elements, extending built-in HTML elements, or implementing component-based architecture. NO querySelector, NO innerHTML, NO external libraries - pure web platform APIs only.
12webgpu-canvas
WebGPU fundamentals for high-performance canvas rendering. Covers device initialization, buffer management, WGSL shaders, render pipelines, compute shaders, and web component integration. Use when building GPU-accelerated graphics, particle systems, or compute-intensive visualizations.
11ux-iconography
Icon usage patterns using Material Symbols v3. Use when adding icons to buttons, navigation, or status indicators. Covers sizing, accessibility, animations, and color integration with project tokens.
10audio-design
Game audio design patterns for creating sound effects and UI audio. Use when designing sounds for games, writing AI audio prompts (ElevenLabs, etc.), creating feedback sounds, or specifying audio for abilities/UI. Includes psychological principles from Kind Games, volume hierarchy, frequency masking prevention, and prompt engineering for AI audio generation.
10