perception-and-hierarchy-principles

Plugin perception-and-hierarchy-principles in hashgraph-online/awesome-codex-plugins. Commands read from the repo's manifest — today.

Skills (34)

• alignment-grid-systems

  Use this skill when designing or evaluating a grid system — picking column counts, gutter widths, breakpoints, baseline grids, or modular grids. Trigger when designing a new layout system, when an existing layout feels disorderly, when picking responsive breakpoints, or when reviewing a design that

• alignment-text-and-numerics

  Use this skill when designing text-alignment and numeric-alignment decisions — choosing between left, right, center, and justified text; right-aligning numeric columns in tables; aligning labels relative to inputs; handling decimal alignment for currency. Trigger when laying out body content, design

• alignment

  Use this skill whenever the design has more than one element on the page — every layout, every form, every table, every page header, every card. Trigger when designing a layout, picking a grid, fixing a UI that "looks off," debating left vs. center alignment for body text, or auditing why a design f

• closure-completion-cost

  Recognize when closure is the wrong choice — when the perceptual completion work it asks of the user is too costly, ambiguous, or risky. Use when designing for accessibility audiences, novice users, high-stakes interfaces (medical, financial, safety), small rendering sizes that strain perception, or

• closure-implied-shapes

  Design forms that exploit closure — suggesting shapes through partial outlines, negative space, or strategic gaps so the user''s perception completes them. Use when designing icons that need to read at small sizes, logos that need memorability, illustrations with restraint, card layouts with implied

• closure

  Apply the Gestalt principle of Closure — the perceptual tendency to see incomplete shapes as whole. Use when designing icons (a few strokes can imply a closed shape), illustrations (negative space defines forms), logos (the IBM stripes, the WWF panda, the FedEx arrow), card layouts (cards don''t nee

• color-accessibility-and-mode

  Use this skill when designing color systems that must satisfy accessibility requirements, work in both light and dark modes, support high-contrast preferences, and remain meaningful for users with color blindness or low vision. Trigger when picking text colors, designing for global compliance (WCAG,

• color-semantic-systems

  Use this skill when building or auditing a color system that encodes meaning — status colors (success / warning / error), category colors (department, product line, user segment), brand-role colors (primary, secondary, tertiary). Trigger when designing status badges, picking chart palettes, building

• color

  Use this skill whenever color decisions matter — picking the brand primary, defining a neutral ramp, designing status semantics (success/warning/error), choosing chart palettes, selecting accent hues, supporting dark mode, ensuring colorblind-safe contrast, or auditing an existing UI for color noise

• figure-ground-cues

  Apply specific visual cues to control figure-ground perception — shadow, elevation, scale, contrast, saturation, opacity, and texture. Use when designing layered interfaces, focus states, hover treatments, or any context where one element should clearly stand forward against others. Each cue contrib

• figure-ground-overlays-and-modals

  Apply figure-ground separation specifically for overlays — modals, dialogs, drawers, popovers, dropdowns, toasts. Use when designing or auditing the moments when a UI element appears over the underlying page and needs to clearly come forward. The most common figure-ground design problem; getting it

• figure-ground-relationship

  Apply the Gestalt principle of Figure-Ground Relationship — the perceptual separation of what''s perceived as the figure (the focus, the object) from the ground (the surrounding context). Use when designing modals, overlays, focus states, hero elements, hover treatments, layered interfaces, or any c

• gestalt-similarity

  Apply the Gestalt principle of Similarity — elements that share visual attributes (color, shape, size, orientation) are perceived as belonging together, regardless of their physical proximity. Use when grouping related items in a list, status indicators, dashboard cards, navigation, or any context w

• hierarchy-color-and-tone

  Use this skill when constructing visual hierarchy through color and tone (value, contrast, saturation) — picking which elements get full-color emphasis and which recede into greys, building a tone ladder, and deciding when color should *be* the hierarchy versus when it should *support* a size/weight

• hierarchy-spatial

  Use this skill when constructing visual hierarchy through layout, position, size, and whitespace — not type, not color. Trigger when laying out a page or section and deciding what gets the dominant region, where to place the focal element, how much breathing room to give it, and how secondary elemen

• hierarchy-typographic

  Use this skill when the question is specifically about how to construct visual hierarchy through typography — picking a type scale, ladders of weight, line-height steps, and the relationships between display, heading, body, and caption type. Trigger when designing type systems, choosing fonts, picki

• hierarchy

  Use this skill whenever a design has more than one element competing for the viewer''s attention — which is essentially every design. Trigger when laying out a screen, page, slide, poster, dashboard, or any composition where you must decide what gets seen first, what supports it, and what recedes. T

• legibility-contrast-and-spacing

  Apply contrast and spacing for legibility — calibrating color contrast between text and background, character tracking, and line leading so a chosen typeface and size actually render legibly. Use when picking text colors, choosing background colors that will carry text, evaluating accessibility agai

• legibility-typeface-and-size

  Apply typeface and size choices for legibility — picking the right typeface for the use case (display, body, code, UI) and sizing it appropriately for the rendering context. Use when designing a type system for a product, choosing a brand typeface, evaluating an existing typeface against rendering c

• legibility

  Apply the principle of Legibility — the visual clarity of individual characters and short phrases, determined by typeface, size, weight, contrast, and spacing. Use when picking type for UI elements (buttons, labels, navigation), evaluating typography against rendering conditions (small sizes, low-co

• perception-router

  Use this skill whenever a design task involves visual perception, layout, hierarchy, grouping, scanning order, attention, color organization, or composition — regardless of framework, design system, or platform. Trigger when the user is laying out a screen, page, slide, poster, dashboard, mobile vie

• proximity-data-tables

  Use this skill when designing or fixing data tables and tabular layouts — row spacing, column spacing, header treatment, group separators, total rows, sticky headers, dense vs. comfortable variants. Trigger when the user is laying out a table, deciding density, debugging "rows that are hard to follo

• proximity-form-fields

  Use this skill when laying out a form, fixing a confusing form, or building a form layout convention for a design system. Forms are where proximity failures are most visible: ambiguous label-input pairing, sections that bleed into each other, help text that orphans from its field. Trigger when desig

• proximity-navigation

  Use this skill when designing or fixing navigation — sidebars, top nav, footer nav, mobile menus, breadcrumbs, tab bars, command palette groupings. Trigger when grouping related links, deciding when to add section dividers, fixing a sidebar where every link feels like a separate item, or designing a

• proximity

  Use this skill whenever the question is how to make a composition feel organized — what belongs with what, where groups end, how related items can be visually bound without resorting to borders or boxes. Trigger when laying out forms, tables, navigation, lists, cards, dashboards, or any composition

• readability-line-length

  Set line length (measure) for prose — capping the maximum width of body text so lines stay in the 45–75 character range that supports comfortable sustained reading. Use when designing article layouts, documentation, email templates, dashboard copy, or any container that holds paragraphs of prose. Li

• readability-rhythm-and-prose

  Apply paragraph rhythm and prose-level readability — calibrating leading, paragraph spacing, subheading frequency, and visual breathing room so that long-form text reads smoothly without fatigue. Use when designing article layouts, documentation, reports, transcripts, or any context with sustained p

• readability

  Apply the principle of Readability — the ease with which sustained prose can be read, determined by line length, line height, paragraph rhythm, font choice for prose, and visual breathing room. Use when designing long-form content (articles, documentation, books, transcripts), writing email or repor

• signal-to-noise-ratio

  Use this skill whenever a design has too much or too little visual content competing for attention — when a screen "feels noisy," "looks busy," "feels cluttered," "feels empty," or when the user can''t find the meaningful information amid decoration. Trigger when reviewing dashboards, data tables, s

• similarity-and-contrast

  Apply deliberate dissimilarity (contrast) to distinguish elements that need to be perceived as different — primary vs. secondary actions, normal vs. error states, foreground vs. background, the one important thing vs. the rest. Use when you want to emphasize a single element, distinguish roles, or b

• similarity-grouping

  Use visual similarity to create perceptual groups — making related items look alike so users perceive them as a set. Use when designing lists with categorized items, navigation systems, status displays, dashboards with multiple data series, or any layout where you want users to see "these things go

• snr-decoration-removal

  Use this skill when the question is *what to delete* — running a structured audit of a UI to remove decorative elements that don''t earn their pixels. Trigger when reviewing an existing UI for noise reduction, when a stakeholder pushback says "this feels too busy" but you don''t know what specifical

• snr-densification

  Use this skill when a design has *too much* whitespace — when the SNR pendulum has swung from cluttered all the way to sparse, sterile, or "empty-feeling," and you need to add signal density without adding noise. Trigger when reviewing a UI that "feels thin," "feels under-built," or where users comp

• snr-emphasis-economy

  Use this skill when deciding *how* to spend emphasis — color, weight, size, motion — across a design so that each instance lands. Trigger when picking the primary action among many CTAs, when status-color usage has multiplied across the app and lost meaning, when the brand color appears in too many

Similar plugins