Individual skill

sprucecss-list-layout

Lay out a ul or ol whose items are not under each other (a row, a cluster, a grid, a flex or grid list with a gap) in Spruce CSS - clear the base list's owl selector on the li elements (margin-block: 0) and set their padding-block to 0. Use whenever you style a list as tags, links, logos, chips, cards, steps, a toolbar or any grid of li elements, or when the second and later items of a list sit lower than the first.

skills/sprucecss-list-layout/SKILL.md

Read pinned source

Source commit 3ac9c503068495541510f71554d99983754d0de6

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: Yes
Skill scan complete: Yes
Observed behavior: Instructions only
Last checked: Nov 6, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

Claude Code

Destination .claude/skills/sprucecss-list-layout

(
  set -euo pipefail
  destination='./.claude/skills/sprucecss-list-layout'
  if [ -e "$destination" ] || [ -L "$destination" ]; then printf '%s\n' 'Destination already exists; nothing overwritten.' >&2; exit 1; fi
  work=$(mktemp -d)
  trap 'rm -rf -- "$work"' EXIT
  git clone --filter=blob:none --no-checkout -- 'https://github.com/conedevelopment/sprucecss.git' "$work/repo"
  git -C "$work/repo" checkout --detach 3ac9c503068495541510f71554d99983754d0de6
  git -C "$work/repo" archive --format=tar '3ac9c503068495541510f71554d99983754d0de6:skills/sprucecss-list-layout' > "$work/skill.tar"
  mkdir -p -- './.claude/skills'
  mkdir -- "$destination"
  tar -xf "$work/skill.tar" -C "$destination"
)

Codex

Destination .agents/skills/sprucecss-list-layout

(
  set -euo pipefail
  destination='./.agents/skills/sprucecss-list-layout'
  if [ -e "$destination" ] || [ -L "$destination" ]; then printf '%s\n' 'Destination already exists; nothing overwritten.' >&2; exit 1; fi
  work=$(mktemp -d)
  trap 'rm -rf -- "$work"' EXIT
  git clone --filter=blob:none --no-checkout -- 'https://github.com/conedevelopment/sprucecss.git' "$work/repo"
  git -C "$work/repo" checkout --detach 3ac9c503068495541510f71554d99983754d0de6
  git -C "$work/repo" archive --format=tar '3ac9c503068495541510f71554d99983754d0de6:skills/sprucecss-list-layout' > "$work/skill.tar"
  mkdir -p -- './.agents/skills'
  mkdir -- "$destination"
  tar -xf "$work/skill.tar" -C "$destination"
)

Cursor

Destination .cursor/skills/sprucecss-list-layout

(
  set -euo pipefail
  destination='./.cursor/skills/sprucecss-list-layout'
  if [ -e "$destination" ] || [ -L "$destination" ]; then printf '%s\n' 'Destination already exists; nothing overwritten.' >&2; exit 1; fi
  work=$(mktemp -d)
  trap 'rm -rf -- "$work"' EXIT
  git clone --filter=blob:none --no-checkout -- 'https://github.com/conedevelopment/sprucecss.git' "$work/repo"
  git -C "$work/repo" checkout --detach 3ac9c503068495541510f71554d99983754d0de6
  git -C "$work/repo" archive --format=tar '3ac9c503068495541510f71554d99983754d0de6:skills/sprucecss-list-layout' > "$work/skill.tar"
  mkdir -p -- './.cursor/skills'
  mkdir -- "$destination"
  tar -xf "$work/skill.tar" -C "$destination"
)

Gemini CLI

Destination .gemini/skills/sprucecss-list-layout

(
  set -euo pipefail
  destination='./.gemini/skills/sprucecss-list-layout'
  if [ -e "$destination" ] || [ -L "$destination" ]; then printf '%s\n' 'Destination already exists; nothing overwritten.' >&2; exit 1; fi
  work=$(mktemp -d)
  trap 'rm -rf -- "$work"' EXIT
  git clone --filter=blob:none --no-checkout -- 'https://github.com/conedevelopment/sprucecss.git' "$work/repo"
  git -C "$work/repo" checkout --detach 3ac9c503068495541510f71554d99983754d0de6
  git -C "$work/repo" archive --format=tar '3ac9c503068495541510f71554d99983754d0de6:skills/sprucecss-list-layout' > "$work/skill.tar"
  mkdir -p -- './.gemini/skills'
  mkdir -- "$destination"
  tar -xf "$work/skill.tar" -C "$destination"
)

GitHub Copilot

Destination .github/skills/sprucecss-list-layout

(
  set -euo pipefail
  destination='./.github/skills/sprucecss-list-layout'
  if [ -e "$destination" ] || [ -L "$destination" ]; then printf '%s\n' 'Destination already exists; nothing overwritten.' >&2; exit 1; fi
  work=$(mktemp -d)
  trap 'rm -rf -- "$work"' EXIT
  git clone --filter=blob:none --no-checkout -- 'https://github.com/conedevelopment/sprucecss.git' "$work/repo"
  git -C "$work/repo" checkout --detach 3ac9c503068495541510f71554d99983754d0de6
  git -C "$work/repo" archive --format=tar '3ac9c503068495541510f71554d99983754d0de6:skills/sprucecss-list-layout' > "$work/skill.tar"
  mkdir -p -- './.github/skills'
  mkdir -- "$destination"
  tar -xf "$work/skill.tar" -C "$destination"
)

OpenCode

Destination .opencode/skills/sprucecss-list-layout

(
  set -euo pipefail
  destination='./.opencode/skills/sprucecss-list-layout'
  if [ -e "$destination" ] || [ -L "$destination" ]; then printf '%s\n' 'Destination already exists; nothing overwritten.' >&2; exit 1; fi
  work=$(mktemp -d)
  trap 'rm -rf -- "$work"' EXIT
  git clone --filter=blob:none --no-checkout -- 'https://github.com/conedevelopment/sprucecss.git' "$work/repo"
  git -C "$work/repo" checkout --detach 3ac9c503068495541510f71554d99983754d0de6
  git -C "$work/repo" archive --format=tar '3ac9c503068495541510f71554d99983754d0de6:skills/sprucecss-list-layout' > "$work/skill.tar"
  mkdir -p -- './.opencode/skills'
  mkdir -- "$destination"
  tar -xf "$work/skill.tar" -C "$destination"
)

Repository context

Repository stars (not skill ratings): 265
Repository last updated: Oct 20, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

css Repository topic
sass Repository topic
css-framework Repository topic
frontend Repository topic
scss Repository topic
html Repository topic
dark-mode Repository topic
dark-theme Repository topic
lightweight Repository topic
lightweight-framework Repository topic
engineering Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 3,964 bytes

Read excerpt


# Lists whose items sit side by side

Spruce styles every `ul` and `ol` as a vertical stack: the base typography includes `layout-stack(config('list-gap', $typography))` on them, a lobotomized owl:

```css
ul > * { margin-block: 0; }
ul > * + * { margin-block-start: 0.25rem; } /* list-gap */
```

That's right for a list of lines. But once the items are **not under each other** (a flex row, a cluster, a grid), the owl still pushes the second and every later item down: the first tag sits higher than the others, the first card of a grid row is shorter, and a grid's `gap` gets an extra margin on top.

## The rule

When a `ul` or `ol` lays out its `li` elements side by side (or in a grid with a `gap`), **clear the owl on the list's items and set their block padding to 0**: