Stats
Actions
Tags
From design
Apply 5 professional layout rules - grid systems, spacing scales, alignment, proximity (related-element grouping), visual weight balance. Use when reviewing or designing layout, fixing inconsistent spacing, deciding alignment, or balancing emphasis. Triggers on "fix the layout", "improve spacing", "alignment issue", "grid system", "spacing scale", "visual hierarchy".
How this skill is triggered — by the user, by Claude, or both
Slash command
/design:layoutThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Five rules for visually balanced, mathematically consistent layouts.
Five rules for visually balanced, mathematically consistent layouts.
Pick a base unit (4 px is standard) and NEVER use arbitrary values.
Spacing tokens: 4, 8, 12, 16, 24, 32, 48, 64, 96 px
Apply consistently across:
If you find yourself wanting 13 px or 22 px, you're avoiding a real layout decision.
Spacing communicates relationships:
Related items: ≤ 8 px apart
Loosely related: 8–16 px apart
Unrelated items: ≥ 24 px apart
Section breaks: ≥ 48 px apart
If two things should "feel together," reduce space. If two things are different, increase space — no border or color needed.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub polarislt0710/claude-skills-hugo --plugin design