# Visual Rhythm

> Creating visual rhythm through repetition, variation, and pacing in design.

- Skill: `dragoon0x/visual-rhythm` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/visual-rhythm`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/visual-rhythm/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/visual-rhythm

---


# Visual Rhythm

## What It Is
Repetition and variation creating a visual beat across a page, similar to rhythm in music.

## Creating Rhythm
1. **Regular rhythm:** Same element at equal intervals (card grid, list items)
2. **Alternating rhythm:** Two patterns alternating (left-image/right-image sections)
3. **Progressive rhythm:** Elements that change gradually (growing, shrinking, fading)
4. **Random rhythm:** Intentional irregularity (masonry, organic layouts)

## Techniques
- **Consistent spacing** between sections creates steady rhythm
- **Varied section heights** create visual interest
- **Full-bleed images** break rhythm intentionally (creates emphasis)
- **Typography scale** creates rhythm through heading size variation
- **Color accents** at regular intervals create visual anchors

## Pacing
- Dense sections followed by spacious ones (like music dynamics)
- Important content gets more space (slower pace, more attention)
- Lists and grids are fast-paced (scanning mode)
- Hero sections are slow-paced (absorption mode)

## Rules
1. Establish a rhythm, then break it intentionally for emphasis
2. Accidental rhythm breaks feel like errors
3. Section transitions should feel intentional
4. The scroll experience should have variation, not monotony