ux-spacing-layout
✓Utopia fluid spacing tokens and layout patterns. Use when applying margins, padding, gaps, or creating layouts. Covers space scale, container widths, and responsive spacing. (project)
Installation
SKILL.md
Fluid spacing system using Utopia scale with container query inline (cqi) units. This skill covers spacing tokens, layout patterns, and visual rhythm.
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.
Utopia fluid spacing tokens and layout patterns. Use when applying margins, padding, gaps, or creating layouts. Covers space scale, container widths, and responsive spacing. (project) Source: matthewharwood/fantasy-phonics.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/matthewharwood/fantasy-phonics --skill ux-spacing-layout- Category
- *Creative Media
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is ux-spacing-layout?
Utopia fluid spacing tokens and layout patterns. Use when applying margins, padding, gaps, or creating layouts. Covers space scale, container widths, and responsive spacing. (project) Source: matthewharwood/fantasy-phonics.
How do I install ux-spacing-layout?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/matthewharwood/fantasy-phonics --skill ux-spacing-layout Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/matthewharwood/fantasy-phonics
Details
- Category
- *Creative Media
- Source
- skills.sh
- First Seen
- 2026-02-01