// This skill should be used to fix visual hierarchy when everything looks equally important, CTAs don't stand out, or users miss key information. Applies Von Restorff Effect, Serial Position Effect, and Law of Prägnanz.
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-hierarchy |
| description | This skill should be used to fix visual hierarchy when everything looks equally important, CTAs don't stand out, or users miss key information. Applies Von Restorff Effect, Serial Position Effect, and Law of Prägnanz. |
Applies these laws from lawsofux.com:
When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
Application:
Make ONE thing visually distinct:
- Different color (only CTA is blue)
- Different size (hero text 2x larger)
- Different weight (only headline is bold)
- Different treatment (only CTA has shadow)
Violation: Multiple elements using the "special" treatment.
Users best remember the first and last items in a series.
Application:
FIRST position: Most important action/info
LAST position: Secondary important action
MIDDLE: Supporting content (will be skimmed)
For navigation: Home (first), CTA (last) For forms: Key field (first), Submit (last) For lists: Critical items at ends
People perceive and interpret ambiguous or complex images as the simplest form possible.
Application:
Reduce to minimum elements needed:
- Remove decorative complexity
- Use simple shapes over complex ones
- Clear figure/ground relationship
- Obvious visual hierarchy
Test: Can a user describe the page in one sentence?
1. VON RESTORFF: Is exactly ONE element isolated/distinct?
2. SERIAL POSITION: Are key items at start/end?
3. PRÄGNANZ: Is hierarchy immediately obvious?
HIERARCHY DIAGNOSIS
Von Restorff Effect:
Primary element: [what should stand out]
Currently isolated: [what actually stands out]
Competing elements: [list of things fighting for attention]
FIX: [make X distinct, reduce prominence of Y]
Serial Position Effect:
First position: [what's there] → [what should be]
Last position: [what's there] → [what should be]
FIX: [reorder]
Law of Prägnanz:
Complexity score: [high/medium/low]
Can describe in one sentence: [Yes/No]
FIX: [simplify by...]
| Problem | Law | Fix |
|---|---|---|
| CTA invisible | Von Restorff | Make it the ONLY colored/bold element |
| Users skip content | Serial Position | Move to first or last position |
| Page overwhelming | Prägnanz | Remove 30% of elements |
| Everything bold | Von Restorff | Unbold everything except ONE |
| Nav items equal | Serial Position | Emphasize first and last |