// This skill should be used when elements feel disconnected, cards float like islands, or groupings are unclear. Applies Law of Proximity, Law of Common Region, and Law of Uniform Connectedness.
Generate minimal HTML pages to review Claude Code output in a browser. Use when terminal output is hard to read, when reviewing lists/tables/drafts, or when user says "show me", "make this reviewable", "quick view", or "open as webpage". Produces unstyled semantic HTML only.
Master LLM-as-a-Judge evaluation techniques including direct scoring, pairwise comparison, rubric generation, and bias mitigation. Use when building evaluation systems, comparing model outputs, or establishing quality standards for AI-generated content.
Build a design system from scratch using the Design Graph methodology. Use when starting a component library, creating design tokens, establishing typography scales, or structuring a theme. Based on Brent Jackson's (jxnblk) constraint-based systems.
Automatically creates user-facing changelogs from git commits by analyzing commit history, categorizing changes, and transforming technical commits into clear, customer-friendly release notes. Turns hours of manual changelog writing into minutes of automated generation.
Design and evaluate context compression strategies for long-running agent sessions. Use when agents exhaust memory, need to summarize conversation history, or when optimizing tokens-per-task rather than tokens-per-request.
This skill should be used when user wants to learn from their collected references, synthesize patterns across sources, or turn research into frameworks from curated reference collections (Are.na channels, bookmarks, saved articles).
| name | fix-spacing |
| description | This skill should be used when elements feel disconnected, cards float like islands, or groupings are unclear. Applies Law of Proximity, Law of Common Region, and Law of Uniform Connectedness. |
This skill diagnoses and fixes spacing issues that make interfaces feel disconnected or unclear. It applies three fundamental perceptual laws to create proper visual grouping and hierarchy through strategic use of whitespace, boundaries, and visual connections.
Applies these laws from lawsofux.com:
Objects that are near each other tend to be grouped together.
Application:
Space WITHIN groups < Space BETWEEN groups
Card padding < Gap between cards < Section gap
Violation test:
Proximity Ratio = internal spacing / external spacing
PASS: ratio < 1.0
FAIL: ratio ≥ 1.0
Elements tend to be perceived as groups if they share a clearly defined boundary.
Application:
Elements that are visually connected are perceived as more related than elements with no connection.
Application:
For each group of elements, check:
1. PROXIMITY: Is internal < external spacing?
2. REGION: Do related items share a boundary?
3. CONNECTION: Are sequential items visually linked?
SPACING DIAGNOSIS
Law of Proximity:
WHERE: [component]
Ratio: [internal]px / [external]px = [X]
Violation: [Yes/No]
FIX: [change]
Law of Common Region:
WHERE: [component]
Issue: [missing boundary / competing regions]
FIX: [add container / adjust]
Law of Uniform Connectedness:
WHERE: [component]
Issue: [disconnected sequence]
FIX: [add connector]
| Spacing | Tailwind | Use for |
|---|---|---|
| 4px | gap-1, p-1 | Tight inline elements |
| 8px | gap-2, p-2 | Related items in a group |
| 16px | gap-4, p-4 | Items within a card |
| 24px | gap-6, p-6 | Cards in a grid |
| 32px | gap-8 | Between sections |
| 48-64px | py-12/16 | Major section breaks |
Rule: Each level should be ~1.5-2x the previous.