Individual skill
sprucecss-block-rhythm
Keep the vertical rhythm between the blocks of a Spruce CSS page - when two blocks meet on the same background, the second one drops its top padding (padding-block-start: 0), and consecutive blocks on the same alternate background share one wrapper. Use whenever you compose or review a page of blocks, add or reorder a block, change a block's background, or see a doubled gap between two sections.
skills/sprucecss-block-rhythm/SKILL.md
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-block-rhythm
(
set -euo pipefail
destination='./.claude/skills/sprucecss-block-rhythm'
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-block-rhythm' > "$work/skill.tar"
mkdir -p -- './.claude/skills'
mkdir -- "$destination"
tar -xf "$work/skill.tar" -C "$destination"
)Codex
Destination .agents/skills/sprucecss-block-rhythm
(
set -euo pipefail
destination='./.agents/skills/sprucecss-block-rhythm'
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-block-rhythm' > "$work/skill.tar"
mkdir -p -- './.agents/skills'
mkdir -- "$destination"
tar -xf "$work/skill.tar" -C "$destination"
)Cursor
Destination .cursor/skills/sprucecss-block-rhythm
(
set -euo pipefail
destination='./.cursor/skills/sprucecss-block-rhythm'
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-block-rhythm' > "$work/skill.tar"
mkdir -p -- './.cursor/skills'
mkdir -- "$destination"
tar -xf "$work/skill.tar" -C "$destination"
)Gemini CLI
Destination .gemini/skills/sprucecss-block-rhythm
(
set -euo pipefail
destination='./.gemini/skills/sprucecss-block-rhythm'
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-block-rhythm' > "$work/skill.tar"
mkdir -p -- './.gemini/skills'
mkdir -- "$destination"
tar -xf "$work/skill.tar" -C "$destination"
)GitHub Copilot
Destination .github/skills/sprucecss-block-rhythm
(
set -euo pipefail
destination='./.github/skills/sprucecss-block-rhythm'
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-block-rhythm' > "$work/skill.tar"
mkdir -p -- './.github/skills'
mkdir -- "$destination"
tar -xf "$work/skill.tar" -C "$destination"
)OpenCode
Destination .opencode/skills/sprucecss-block-rhythm
(
set -euo pipefail
destination='./.opencode/skills/sprucecss-block-rhythm'
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-block-rhythm' > "$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 · 5,340 bytes
Read excerpt
# Block rhythm: one background, one padding
Every block owns its vertical padding (`padding-block: spacer-clamp('xl', 'xxl')`). On its own background that padding is the breathing room. But when two blocks meet **on the same background**, the bottom padding of the first and the top padding of the second add up to a gap twice as big as anywhere else, and the page looks broken.
**The rule:** if a block follows a block with the same background, its `padding-block-start` is `0`. The previous block's bottom padding already separates them. When the background changes, both keep their padding (the color change is the separator and each side needs its own room).
The page solves this, never the block: blocks stay reusable, and only the page knows what sits next to what.
## 1. Group consecutive blocks on the same background
The background of a page section comes from a wrapper (`.l-page__alt { background-color: color('surface-muted'); }`), not from the block. Blocks on the same alternate background share **one** wrapper; two wrappers of the same color are never siblings.
```html
<!-- Don't: two wrappers, the same background, a doubled gap. -->