# Component Sizing

> |

- **Type:** Skill
- **Install:** `agentstack add skill-thrillmade-agent-skills-component-sizing`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [thrillmade](https://agentstack.voostack.com/s/thrillmade)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [thrillmade](https://github.com/thrillmade)
- **Source:** https://github.com/thrillmade/agent-skills/tree/main/skills/component-sizing
- **Website:** https://logmind.dev

## Install

```sh
agentstack add skill-thrillmade-agent-skills-component-sizing
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Component sizing

Component heights and icon sizes are **curated** in UDTS, not formula-derived. The rungs are picked so each height pairs cleanly with a font from the type scale, an icon from the icon ladder, and tap-target requirements — and so each rung distinguishes visually from its neighbors at every density.

## When to use

- Picking a height for a button, input, chip, badge, dropdown, or any other rectangular interactive control.
- Proposing a control-height ladder for a new density mode.
- Auditing one-off heights (`h-7`, `h-9`, `h-11`) drifting across a codebase.
- Code review: flag heights outside the curated ladder; propose the nearest curated rung with rationale.

## When NOT to use

- One-off marketing CTAs designed for a specific page (e.g. hero buttons at 72 px). The ladder doesn't apply to single-surface designs.
- Non-rectangular controls (circular avatars, range thumbs) where the size is governed by the icon or asset, not a height token.

## The curated ladders

UDTS ships three default density modes. Each is a 5-rung ladder labeled `xs` / `sm` / `md` / `lg` / `xl` — interactive rungs start at `sm` per the WCAG 2.5.8 floor (see [spacing-system](#cross-references)).

### Balanced (UDTS default, 4/8 grid)

| Rung | Height | Font-size | Icon-size | Interactive? |
|---|---|---|---|---|
| `xs` | 24 px | 12 px | 12 | **No** — badges, read-only chips |
| `sm` | 32 px | 14 px | 16 | yes |
| `md` | 40 px | 14 px | 16 | yes (default) |
| `lg` | 48 px | 16 px | 24 | yes |
| `xl` | 56 px | 16 px | 24 | yes (CTA) |

### Dense (2/4 grid)

| Rung | Height | Font-size | Icon-size | Interactive? |
|---|---|---|---|---|
| `xs` | 24 px | 12 px | 12 | No |
| `sm` | 28 px | 12 px | 12 | yes |
| `md` | 36 px | 14 px | 16 | yes (default) |
| `lg` | 44 px | 14 px | 16 | yes |
| `xl` | 52 px | 16 px | 24 | yes (CTA) |

### Spacious (4/16 grid)

| Rung | Height | Font-size | Icon-size | Interactive? |
|---|---|---|---|---|
| `xs` | 32 px | 14 px | 16 | yes (xs floor lifts in spacious) |
| `sm` | 48 px | 16 px | 24 | yes |
| `md` | 64 px | 18 px | 24 | yes (default) |
| `lg` | 80 px | 20 px | 32 | yes |
| `xl` | 96 px | 24 px | 40 | yes (CTA) |

## The curated icon-size ladder

UDTS's canonical icon sizes: **12, 16, 24, 32, 40, 48**. Picked because:

- These are the sizes at which Material Icons, Lucide, Heroicons, and Phosphor families render cleanly without hairline glitches.
- They pair with the font-sizes from `type-scale` naturally (icon ≥ font-size at every rung; never undersized).
- They subdivide into 4 px steps at the small end (where it matters for inline alignment) and 8 px steps at the large end (where it doesn't).

**Don't formula-derive icon sizes.** A height-to-icon ratio (e.g. `icon = height / 2`) produces sizes like 14, 18, 22, 28 — every one of which renders worse than the curated neighbor.

## Why curated, not formula-derived

A formula `(height) → font-size → icon-size` produces *mathematically clean* values that *render poorly*:

- Heights at every 4 px (24, 28, 32, 36, 40, ...) create visually indistinct rungs — `28` and `32` are hard to tell apart in a stack.
- Font sizes outside the type-scale (e.g. 13, 15, 17) clash with the rest of the typography system.
- Icon sizes outside the curated set glitch at common zoom levels.

The curated 5-rung ladders give visual distinguishability at each rung, predictable font and icon pairing, and tap-target safety. The trade-off is less flexibility — but design systems benefit from less flexibility at this layer.

## The WCAG 2.5.8 floor

Interactive control heights start at **24 CSS px** per WCAG 2.5.8 AA Target Size (added in WCAG 2.2). In practice:

- **Balanced and dense:** `xs` (24 / 24 px) is **non-interactive only**. Interactive rungs start at `sm` (32 / 28 px). The 24 px rung exists for badges, read-only chips, density tags.
- **Spacious:** `xs` lifts to 32 px, so the entire ladder is interactive-safe.

Fails of this rule are one of the most common WCAG 2.2 audit misses.

## Picking a rung

Default heuristic:

- **Default button / input:** `md`. Use the same rung for buttons and their associated inputs so they align horizontally in a form.
- **Compact density toggle (dense table cell):** `sm`.
- **Primary CTA / hero button:** `lg` or `xl` depending on prominence.
- **Density tag, badge, breadcrumb separator (non-interactive):** `xs`.

Sibling controls in the same UI surface should share a rung — mixing `sm` and `md` buttons next to each other reads as a typo, not a hierarchy.

## Cross-references

- **REQUIRED BACKGROUND:** `spacing-system` — the unit primitives (minor + major) drive which density mode applies, and the WCAG 2.5.8 floor lives there.
- **For the font sizes paired with each rung:** `type-scale` — the per-rung font is taken from the canonical scale, not free-picked.
- **For line-heights inside each rung:** `line-height-grid` — interactive controls use `lh-ui` (1.20), not `lh-prose`.

## Verification

After picking a rung:

1. **Density match:** the rung is from the density mode declared in the current foundation theme. Mixing balanced and spacious ladders in the same surface is a bug.
2. **Interactive floor:** the height is ≥ 24 CSS px for interactive controls. `xs` rungs in balanced and dense are reserved for non-interactive.
3. **Font pairing:** the inner font-size matches the rung's pairing (not a one-off).
4. **Icon pairing:** the leading or trailing icon size matches the rung's pairing.
5. **Sibling consistency:** sibling controls in the same surface share a rung.

## Sources

- [WCAG 2.5.8 — Target Size (AA, added in 2.2)](https://www.w3.org/TR/WCAG22/#target-size-minimum).
- Material Design 3 — Component sizing guidance.
- Apple Human Interface Guidelines — touch targets (44 pt mobile; relaxed to 24 CSS px desktop per WCAG).
- The UDTS / token.design spacing-and-sizing foundations spec.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [thrillmade](https://github.com/thrillmade)
- **Source:** [thrillmade/agent-skills](https://github.com/thrillmade/agent-skills)
- **License:** MIT
- **Homepage:** https://logmind.dev

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-thrillmade-agent-skills-component-sizing
- Seller: https://agentstack.voostack.com/s/thrillmade
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.