ux-spacing-layout_skill

This skill helps you implement a fluid Utopia spacing system with container-query aware tokens to create consistent, responsive layouts.

JavaScript

1

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill matthewharwood/fantasy-phonics --skill ux-spacing-layout

SKILL.md5.8 KB

Overview

This skill documents a fluid Utopia spacing system using cqi container-query-inline units for margins, padding, gaps, and layout patterns. It explains the space token scale, one-up asymmetric pairs, container widths, and responsive container-query rules. Use it to keep spacing consistent, scalable, and responsive across components and pages.

How this skill works

The system defines named space tokens that interpolate between min and max sizes based on container width; tokens require an ancestor with container-type: inline-size. Layout utilities (u-stack, u-row) map token names to gap values, while container-width helpers constrain content and apply responsive padding. Container queries and one-up pairs enable asymmetric and context-aware spacing adjustments.

When to use it

Applying padding and margin consistently across components
Setting gap sizes for flex or grid stacks and icon-text pairs
Designing responsive cards, modals, forms, and navigation
Creating container-constrained page layouts with predictable max widths
Adjusting spacing asymmetrically (one-up pairs) for visual rhythm

Best practices

Always set container-type: inline-size on an appropriate ancestor before using cqi units
Prefer named tokens (--space-*) instead of hard pixel values to maintain rhythm
Use one-up pairs for progressive asymmetry (top vs bottom or inline start vs end)
Group related items with tighter tokens and sections with larger tokens to keep hierarchy clear
Leverage container queries to adapt padding and gap scales inside components

Example use cases

Buttons and chips: use --space-2xs to --space-m for padded, tappable controls
Card component: padding with --space-m, internal gap --space-s, responsive adjustment via @container
Form layout: vertical stacks with gap --space-m and compact field spacing --space-2xs
Modal/dialog: generous outer padding --space-l and section gaps using --space-m
Page container: min(max) width utility with --max-width variants (narrow/medium/wide) and padding-inline from tokens

FAQ

Yes. cqi-like behavior depends on container queries; make sure the ancestor has container-type: inline-size so token interpolation based on container width works.

When should I use one-up pairs instead of single tokens?

Use one-up pairs when you want asymmetric progression (e.g., tighter top spacing and looser bottom spacing) to nudge visual flow without breaking the token rhythm.

Can I mix these tokens with fixed pixels for legacy components?

Avoid mixing where possible. If you must, isolate legacy components and progressively migrate to tokens to keep overall rhythm consistent.