UI Hierarchy, Spacing and States Pass
Fixes flat, hard-to-scan screens: ranked changes to hierarchy, grouping, spacing, type, color roles, and missing UI states.
Before & after
Same prompt, same agent — the only difference is the skill.
Both options can work depending on your needs. Sidebars give you more vertical space for a long list of filters and navigation options. Top navigation saves horizontal space and keeps everything in view. You might consider your screen size, how many filters you have, and what's most important. Sidebars are often easier to hide on mobile. I'd suggest looking at what other analytics tools do and testing both with users. Which do you think makes sense for your use case?
LAYOUT DECISION: Sidebar vs. Top Nav for Analytics Dashboard SIDEBAR (RECOMMENDED) Pros: • Vertical filter real estate: room for 20+ filter chips without wrapping • Persistent context: users always see available filters, don't forget options • Mobile-friendly: collapses to hamburger at < 768px • Quick filter scanning: list vs. horizontal hunt Cons: Takes 240px horizontal space on desktop TOP NAV (AVOID) Pros: Saves horizontal space Cons: • Filters wrap at 1024px resolution (common for split-screen analysts) • Higher cognitive load: users forget filter options after scrolling • Mobile becomes cramped and hard to toggle DECISION MATRIX | Use case | Winner | Why | | Complex reports (5+ filters) | Sidebar | Discoverability wins | | Mobile-first product | Sidebar | Collapse pattern proven | | Desktop-only, space constrained | Top nav | Only if < 4 filters | CONCRETE: Use sidebar with collapsible sections (Filters, Date Range, Segments). Default expanded for power users, remember state in localStorage.
About this skill
Your generated screen works, but everything looks equally important. Three buttons compete, every block is a card, the gaps are all the same, and the first empty list or long client name breaks the layout. This skill does the design pass those screens skip. It names the screen's job, then fixes grouping, spacing, type, color roles, and states in that order. You get specific values, classes, and markup, not advice like "improve hierarchy".
What it does
- Names the screen's primary action and demotes everything competing with it, so the screen gets one primary button per region
- Replaces ad hoc gaps with a 4px-based spacing scale and tight-inside, loose-between grouping, which fixes the flat look
- Cuts unnecessary cards, nested borders, and extra accent colors, and assigns color roles for action, status, and neutral
- Audits interactive states (hover, focus-visible, disabled, loading) and data states (first-use empty, no results, skeleton, error, long text, large numbers)
- Checks contrast, target size, table alignment, and form layout against concrete thresholds
- Calls out premises that will backfire, such as "make it pop" with more color, three primary CTAs, or a 12-KPI dashboard
What you get
A ranked list of up to about 8 fixes, each with exact values or classes, a missing-states checklist per component, and revised code or a region-by-region layout spec.
Best for
Developers and designers polishing AI-generated or quickly built dashboards, admin tools, forms, and settings pages in React, Tailwind, or plain HTML/CSS. It is built for people who know a screen feels off but can't say why.
SKILL.md preview
---
name: ui-hierarchy-spacing-states-pass
description: Runs a structured design pass on generated or rough interfaces. It names the screen's job and primary action, then fixes grouping, spacing scale, type hierarchy, color roles, and missing interactive and data states, and returns ranked, code-level changes. Use when the user says "this UI feels flat", "make this dashboard easier to scan", "review my screen layout", "everything looks the same importance", "my generated UI looks fine but something is off", "what states am I missing", "clean up the spacing on this page", or "my buttons all look the same".
---
# UI Hierarchy, Spacing and States Pass
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.