[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JWEEEJVSS97N9KG4P6MY3W":3,"skill-same:01M6JWEEEJVSS97N9KG4P6MY3W":74},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":44,"commitSha":45,"skillDirectory":46,"forksCount":47,"repositoryHtmlUrl":48,"repositoryHomepageUrl":49,"ownerHtmlUrl":50,"ownerBlogUrl":51,"ownerDescription":52,"updatedAt":53,"install":54,"resources":67},"01M6JWEEEJVSS97N9KG4P6MY3W","proximity",null,"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 with multiple distinguishable groups of content. Trigger when a layout \"feels disorganized,\" when users are confused which label goes with which input, when grouping is being attempted with borders that look heavy, or when a designer is reaching for color to encode grouping. Proximity is the cheapest, most powerful grouping tool in design; this skill teaches how to use spacing as the primary grouping mechanism, with sub-aspect skills for forms, tables, and navigation.","hashgraph-online\u002Fawesome-codex-plugins","hashgraph-online","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F160371962?v=4","01M6CNB6NRJVNNGN14TR01Q6D3","HOL (Hashgraph Online)","01M6JT1HSKKG9V68KQAQGBA7XP",1575,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002FHDeibler\u002Funiversal-design-principles\u002Fplugins\u002Fperception-and-hierarchy-principles\u002Fskills\u002Fproximity\u002FSKILL.md",[],[5,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"boxes","when","which","tables","goes","spacing","make","color","how to","input","design","end","layout","forms","grouping","question","designer","dashboards","how","Composition","2026-11-10 10:12:30",false,"---\nname: proximity\ndescription: '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 with multiple distinguishable groups of content. Trigger when a layout \"feels disorganized,\" when users are confused which label goes with which input, when grouping is being attempted with borders that look heavy, or when a designer is reaching for color to encode grouping. Proximity is the cheapest, most powerful grouping tool in design; this skill teaches how to use spacing as the primary grouping mechanism, with sub-aspect skills for forms, tables, and navigation.'\n---\n\n# Proximity\n\nProximity is one of the original Gestalt grouping laws: **elements close together are perceived as belonging together; elements farther apart are perceived as separate.** It is the cheapest grouping mechanism in the designer's toolkit — it requires no ink, no color, no chrome, only the deliberate distribution of space. Used well, proximity makes most other grouping tools (borders, backgrounds, dividers) unnecessary.\n\n## Definition (in our own words)\n\nWhen the human visual system encounters a set of similar elements, it organizes them into groups based on relative spatial distance. Items that share a small gap are perceived as a unit; items separated by a larger gap are perceived as belonging to different units. This perceptual grouping happens preattentively — before conscious thought, before reading. It is one of the most reliable findings in perception research, observed in infants, across cultures, and across animal species.\n\n## Origins and research lineage\n\n- **Gestalt psychology** (Wertheimer, 1923) formalized the laws of perceptual grouping, of which Proximity (*Gesetz der Nähe*) is the most basic. Wertheimer's original demonstrations used dots arranged at varying distances; the perceived groupings shifted dramatically with small spacing changes.\n- **Treisman's feature integration theory** (1980s) and the broader preattentive-processing literature established that grouping by spacing happens within the first ~200ms of viewing — before the user has consciously \"looked\" at anything.\n- **Information design** (Tufte; Krug, *Don't Make Me Think*, 2000) translated proximity from perception research into web\u002FUI practice, particularly in the design of forms and information dense surfaces.\n- **Web usability research** (Nielsen Norman Group studies on form perception, label-input pairing) repeatedly shows that label-input ambiguity — usually a proximity failure — is among the top usability issues in form design.\n\n## Why proximity matters\n\nEvery layout makes implicit proximity claims. If a label is equidistant from the input above and the input below, the user must read carefully to figure out which it labels. If two cards are visually identical to two surrounding cards, they read as one group of four — even when conceptually they're two pairs.\n\nProximity failures are silent: users don't report \"this label is ambiguous\"; they just take longer, make more mistakes, and feel a low-grade frustration they can't articulate. This is why proximity is one of the highest-leverage things to get right in dense interfaces — small spacing decisions determine whether the page feels organized or chaotic.\n\n## When to apply\n\n- **Forms** — every label-input pair, every section, every fieldset. Proximity is the dominant principle in form layout.\n- **Lists and tables** — row spacing, column spacing, group separators.\n- **Navigation** — clusters of related links, dividers between sections.\n- **Cards** — internal layout (title, metadata, body, action) and external layout (cards-in-a-grid).\n- **Dashboards** — grouping of related KPIs.\n- **Settings pages** — sections, sub-sections, grouped controls.\n\nIn short: anywhere you have ≥3 elements and need to communicate which belong together.\n\n## When NOT to apply (or when to be careful)\n\n- **When everything genuinely has equal status.** A list of 100 search results doesn't want sub-grouping; the user is scanning sequentially. Adding proximity-based grouping where there is no real grouping is noise.\n- **When grouping must survive responsive reflow.** If your nice 3-column grid wraps to 1 column on mobile, the proximity grouping that worked horizontally may collapse vertically. Plan for both.\n- **When proximity conflicts with continuity.** Sometimes elements that share a baseline or column should read as a row, even with internal gaps. Then alignment beats proximity (see Good Continuation).\n\n## How to encode grouping with proximity\n\nThe trick is creating a **spacing hierarchy**: gaps inside a group should be smaller than gaps between groups, and the difference should be perceptually obvious. A 4px gap looks roughly like a 6px gap; the eye can't tell. A 4px gap is unmistakably tighter than a 16px gap.\n\nA useful spacing scale (most design systems land somewhere near this):\n\n```\ngap-1   = 0.25rem (4px)    inside a tight pair (label\u002Finput)\ngap-2   = 0.5rem  (8px)    inside a closely related set\ngap-3   = 0.75rem (12px)   between fields in a section\ngap-4   = 1rem    (16px)   between minor groups\ngap-6   = 1.5rem  (24px)   between sections\ngap-8   = 2rem    (32px)   between major regions\ngap-12  = 3rem    (48px)   between page-level zones\n```\n\nAdjacent values in the scale should differ by at least 1.5× — preferably 2× — for the eye to register them as different ranks of grouping. Don't use both `gap-3` and `gap-4` in the same composition for *different* grouping levels; they look identical.\n\n## Worked examples\n\n### Example 1: a label-input pair (the canonical case)\n\n**Anti-pattern (ambiguous):**\n\n```html\n\u003Cform>\n  \u003Clabel>Email\u003C\u002Flabel>\n  \u003Cinput type=\"email\" \u002F>\n  \u003Clabel>Password\u003C\u002Flabel>\n  \u003Cinput type=\"password\" \u002F>\n\u003C\u002Fform>\n```\n\nWith default browser margins, each label sits roughly equidistant from the input above and the input below. The user has to read to figure out the pairing.\n\n**Right (proximity binds the pair):**\n\n```html\n\u003Cform style=\"display: grid; gap: 1rem;\">                  \u003C!-- gap-4 between fields -->\n  \u003Cdiv style=\"display: grid; gap: 0.25rem;\">              \u003C!-- gap-1 between label and input -->\n    \u003Clabel for=\"email\">Email\u003C\u002Flabel>\n    \u003Cinput id=\"email\" type=\"email\" \u002F>\n  \u003C\u002Fdiv>\n  \u003Cdiv style=\"display: grid; gap: 0.25rem;\">\n    \u003Clabel for=\"password\">Password\u003C\u002Flabel>\n    \u003Cinput id=\"password\" type=\"password\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Fform>\n```\n\nNow the gap inside each pair (4px) is unmistakably tighter than the gap between pairs (16px). Pairing reads instantly without any reading.\n\n### Example 2: a settings page with three sections\n\n```html\n\u003Cstyle>\n  .settings { display: grid; gap: 3rem; }       \u002F* gap-12 between sections *\u002F\n  .section  { display: grid; gap: 1rem; }       \u002F* gap-4 between fields *\u002F\n  .section h2 { margin-bottom: 0.5rem; }        \u002F* heading slightly closer to its fields *\u002F\n  .field { display: grid; gap: 0.25rem; }       \u002F* gap-1 inside label\u002Finput pair *\u002F\n\u003C\u002Fstyle>\n\n\u003Cform class=\"settings\">\n  \u003Csection class=\"section\">\n    \u003Ch2>Profile\u003C\u002Fh2>\n    \u003Cdiv class=\"field\">\u003Clabel>Name\u003C\u002Flabel>\u003Cinput \u002F>\u003C\u002Fdiv>\n    \u003Cdiv class=\"field\">\u003Clabel>Email\u003C\u002Flabel>\u003Cinput \u002F>\u003C\u002Fdiv>\n  \u003C\u002Fsection>\n  \u003Csection class=\"section\">\n    \u003Ch2>Notifications\u003C\u002Fh2>\n    \u003Cdiv class=\"field\">\u003Clabel>Frequency\u003C\u002Flabel>\u003Cselect>...\u003C\u002Fselect>\u003C\u002Fdiv>\n    \u003Cdiv class=\"field\">\u003Clabel>Channels\u003C\u002Flabel>\u003Cinput \u002F>\u003C\u002Fdiv>\n  \u003C\u002Fsection>\n  \u003Csection class=\"section\">\n    \u003Ch2>Security\u003C\u002Fh2>\n    \u003Cdiv class=\"field\">\u003Clabel>Password\u003C\u002Flabel>\u003Cinput type=\"password\" \u002F>\u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\u003C\u002Fform>\n```\n\nThree nested ranks of proximity (4px \u002F 16px \u002F 48px) carry the entire grouping. No borders, no boxes, no dividers, no color — just space.\n\n### Example 3: a card with title, metadata, body, and action\n\n```html\n\u003Cstyle>\n  .card { display: grid; gap: 1rem; padding: 1.5rem; }\n  .card-header { display: grid; gap: 0.25rem; }     \u002F* title + metadata are paired *\u002F\n  .card-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }\n\u003C\u002Fstyle>\n\n\u003Carticle class=\"card\">\n  \u003Cheader class=\"card-header\">\n    \u003Ch3>Q4 financial review\u003C\u002Fh3>\n    \u003Cp class=\"meta\">Updated 3 minutes ago · Owner: Maria\u003C\u002Fp>\n  \u003C\u002Fheader>\n  \u003Cp>This quarter shows record revenue across the SMB segment...\u003C\u002Fp>\n  \u003Cdiv class=\"card-actions\">\n    \u003Cbutton>Open\u003C\u002Fbutton>\n    \u003Cbutton>Share\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Farticle>\n```\n\nThree groupings: title-metadata (tight pair), body (its own paragraph), actions (their own row). Each cluster reads independently; together they form the card.\n\n### Example 4: a navigation menu with sections\n\n```html\n\u003Cnav style=\"display: grid; gap: 1.5rem;\">                \u003C!-- gap between sections -->\n  \u003Cdiv style=\"display: grid; gap: 0.25rem;\">             \u003C!-- tight gap between links -->\n    \u003Ca href=\"\u002Fdashboard\">Dashboard\u003C\u002Fa>\n    \u003Ca href=\"\u002Fprojects\">Projects\u003C\u002Fa>\n    \u003Ca href=\"\u002Fteam\">Team\u003C\u002Fa>\n  \u003C\u002Fdiv>\n  \u003Cdiv style=\"display: grid; gap: 0.25rem;\">\n    \u003Ca href=\"\u002Fsettings\">Settings\u003C\u002Fa>\n    \u003Ca href=\"\u002Fbilling\">Billing\u003C\u002Fa>\n    \u003Ca href=\"\u002Flogout\">Sign out\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n```\n\nTwo clear sections, no dividers needed. The eye reads the gap between them as a section break.\n\n## Anti-patterns\n\n- **The four-equidistant trap.** Label, input, label, input — all spaced the same. Common in browser-default form rendering. Always tighter inside the pair, looser between pairs.\n- **Borders as grouping.** Reaching for `border: 1px solid grey` around every group adds visual weight without doing what proximity already does for free. Borders are a fallback for when proximity isn't enough.\n- **Inconsistent gaps for the same role.** Three sections on a page, each separated by a different gap. The eye reads inconsistency as accident; settle on one section gap and use it everywhere.\n- **Equal gaps top-to-bottom in a card.** Header, body, footer all separated by the same gap. The user has to read to figure out the structure. Vary gaps to encode role.\n- **Whitespace orphans.** A heading close to its content, but with so much space below the content that the next heading attaches to the *previous* content rather than its own. Always: heading-tighter-to-its-content; sections-looser-than-fields.\n\n## Heuristics\n\n1. **Squint test for grouping.** Squint until detail blurs. Each visual cluster should be obvious as a cluster, with clear gaps between clusters. If the page is one continuous mass, proximity is too uniform.\n2. **Read the cards aloud.** \"Title, then metadata, then body, then actions.\" If you can hear the pauses between groups, proximity is working. If everything runs together, the gaps are equal.\n3. **Two-finger test.** With two fingers, can you point at a single group and feel that the boundaries are clear? If your finger keeps drifting into the next group, the boundary is too ambiguous.\n4. **Strip the borders.** Remove every border on the page (mentally or actually). If structure collapses, you were leaning on borders to do proximity's job.\n\n## Related principles\n\n- **`uniform-connectedness`** — when proximity isn't enough, a shared background or container creates a stronger group; proximity tried first.\n- **`similarity`** — items that look alike are also grouped; combines with proximity.\n- **`good-continuation`** — items aligned on an axis read as a row, even with internal spacing.\n- **`hierarchy`** — proximity establishes *grouping*, hierarchy establishes *ranking* between groups.\n- **`signal-to-noise-ratio`** — proximity reduces noise by replacing chrome (borders, backgrounds) with negative space.\n- **`horror-vacui`** — proximity *requires* whitespace; resist filling it.\n\n## Sub-aspect skills\n\n- **`proximity-form-fields`** — applying proximity to form layouts, label-input pairs, sections.\n- **`proximity-data-tables`** — row spacing, column spacing, total rows, group separators.\n- **`proximity-navigation`** — sidebar groups, top-nav clusters, mobile menus.\n\n## Final note\n\nProximity is the principle most likely to be invisible when working and noisy when failing. The reward for getting it right is that the page feels organized in a way no one can quite pinpoint — they just don't get confused.\n","# Proximity\n\nProximity is one of the original Gestalt grouping laws: **elements close together are perceived as belonging together; elements farther apart are perceived as separate.** It is the cheapest grouping mechanism in the designer's toolkit — it requires no ink, no color, no chrome, only the deliberate distribution of space. Used well, proximity makes most other grouping tools (borders, backgrounds, dividers) unnecessary.\n\n## Definition (in our own words)\n\nWhen the human visual system encounters a set of similar elements, it organizes them into groups based on relative spatial distance. Items that share a small gap are perceived as a unit; items separated by a larger gap are perceived as belonging to different units. This perceptual grouping happens preattentively — before conscious thought, before reading. It is one of the most reliable findings in perception research, observed in infants, across cultures, and across animal species.\n\n## Origins and research lineage\n\n- **Gestalt psychology** (Wertheimer, 1923) formalized the laws of perceptual grouping, of which Proximity (*Gesetz der Nähe*) is the most basic. Wertheimer's original demonstrations used dots arranged at varying distances; the perceived groupings shifted dramatically with small spacing changes.\n- **Treisman's feature integration theory** (1980s) and the broader preattentive-processing literature established that grouping by spacing happens within the first ~200ms of viewing — before the user has consciously \"looked\" at anything.\n- **Information design** (Tufte; Krug, *Don't Make Me Think*, 2000) translated proximity from perception research into web\u002FUI practice, particularly in the design of forms and information dense surfaces.\n- **Web usability research** (Nielsen Norman Group studies on form perception, label-input pairing) repeatedly shows that label-input ambiguity — usually a proximity failure — is among the top usability issues in form design.\n\n## Why proximity matters\n\nEvery layout makes implicit proximity claims. If a label is equidistant from the input above and the input below, the user must read carefully to figure out which it labels. If two cards are visually identical to two surrounding cards, they read as one group of four — even when conceptually they're two pairs.\n\nProximity failures are silent: users don't report \"this label is ambiguous\"; they just take longer, make more mistakes, and feel a low-grade frustration they can't articulate. This is why proximity is one of the highest-leverage things to get right in dense interfaces — small spacing decisions determine whether the page feels organized or chaotic.\n\n## When to apply\n\n- **Forms** — every label-input pair, every section, every fieldset. Proximity is the dominant principle in form layout.\n- **Lists and tables** — row spacing, column spacing, group separators.\n- **Navigation** — clusters of related links, dividers between sections.\n- **Cards** — internal layout (title, metadata, body, action) and external layout (cards-in-a-grid).\n- **Dashboards** — grouping of related KPIs.\n- **Settings pages** — sections, sub-sections, grouped controls.\n\nIn short: anywhere you have ≥3 elements and need to communicate which belong together.\n\n## When NOT to apply (or when to be careful)\n\n- **When everything genuinely has equal status.** A list of 100 search results doesn't want sub-grouping; the user is scanning sequentially. Adding proximity-based grouping where there is no real grouping is noise.\n- **When grouping must survive responsive reflow.** If your nice 3-column grid wraps to 1 column on mobile, the proximity grouping that worked horizontally may collapse vertically. Plan for both.\n- **When proximity conflicts with continuity.** Sometimes elements that share a baseline or column should read as a row, even with internal gaps. Then alignment beats proximity (see Good Continuation).\n\n## How to encode grouping with proximity\n\nThe trick is creating a **spacing hierarchy**: gaps inside a group should be smaller than gaps between groups, and the difference should be perceptually obvious. A 4px gap looks roughly like a 6px gap; the eye can't tell. A 4px gap is unmistakably tighter than a 16px gap.\n\nA useful spacing scale (most design systems land somewhere near this):\n\n```\ngap-1   = 0.25rem (4px)    inside a tight pair (label\u002Finput)\ngap-2   = 0.5rem  (8px)    inside a closely related set\ngap-3   = 0.75rem (12px)   between fields in a section\ngap-4   = 1rem    (16px)   between minor groups\ngap-6   = 1.5rem  (24px)   between sections\ngap-8   = 2rem    (32px)   between major regions\ngap-12  = 3rem    (48px)   between page-level zones\n```\n\nAdjacent values in the scale should differ by at least 1.5× — preferably 2× — for the eye to register them as different ranks of grouping. Don't use both `gap-3` and `gap-4` in the same composition for *different* grouping levels; they look identical.\n\n## Worked examples\n\n### Example 1: a label-input pair (the canonical case)\n\n**Anti-pattern (ambiguous):**\n\n```html\n\u003Cform>\n  \u003Clabel>Email\u003C\u002Flabel>\n  \u003Cinput type=\"email\" \u002F>\n  \u003Clabel>Password\u003C\u002Flabel>\n  \u003Cinput type=\"password\" \u002F>\n\u003C\u002Fform>\n```\n\nWith default browser margins, each label sits roughly equidistant from the input above and the input below. The user has to read to figure out the pairing.\n\n**Right (proximity binds the pair):**\n\n```html\n\u003Cform style=\"display: grid; gap: 1rem;\">                  \u003C!-- gap-4 between fields -->\n  \u003Cdiv style=\"display: grid; gap: 0.25rem;\">              \u003C!-- gap-1 between label and input -->\n    \u003Clabel for=\"email\">Email\u003C\u002Flabel>\n    \u003Cinput id=\"email\" type=\"email\" \u002F>\n  \u003C\u002Fdiv>\n  \u003Cdiv style=\"display: grid; gap: 0.25rem;\">\n    \u003Clabel for=\"password\">Password\u003C\u002Flabel>\n    \u003Cinput id=\"password\" type=\"password\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Fform>\n```\n\nNow the gap inside each pair (4px) is unmistakably tighter than the gap between pairs (16px). Pairing reads instantly without any reading.\n\n### Example 2: a settings page with three sections\n\n```html\n\u003Cstyle>\n  .settings { display: grid; gap: 3rem; }       \u002F* gap-12 between sections *\u002F\n  .section  { display: grid; gap: 1rem; }       \u002F* gap-4 between fields *\u002F\n  .section h2 { margin-bottom: 0.5rem; }        \u002F* heading slightly closer to its fields *\u002F\n  .field { display: grid; gap: 0.25rem; }       \u002F* gap-1 inside label\u002Finput pair *\u002F\n\u003C\u002Fstyle>\n\n\u003Cform class=\"settings\">\n  \u003Csection class=\"section\">\n    \u003Ch2>Profile\u003C\u002Fh2>\n    \u003Cdiv class=\"field\">\u003Clabel>Name\u003C\u002Flabel>\u003Cinput \u002F>\u003C\u002Fdiv>\n    \u003Cdiv class=\"field\">\u003Clabel>Email\u003C\u002Flabel>\u003Cinput \u002F>\u003C\u002Fdiv>\n  \u003C\u002Fsection>\n  \u003Csection class=\"section\">\n    \u003Ch2>Notifications\u003C\u002Fh2>\n    \u003Cdiv class=\"field\">\u003Clabel>Frequency\u003C\u002Flabel>\u003Cselect>...\u003C\u002Fselect>\u003C\u002Fdiv>\n    \u003Cdiv class=\"field\">\u003Clabel>Channels\u003C\u002Flabel>\u003Cinput \u002F>\u003C\u002Fdiv>\n  \u003C\u002Fsection>\n  \u003Csection class=\"section\">\n    \u003Ch2>Security\u003C\u002Fh2>\n    \u003Cdiv class=\"field\">\u003Clabel>Password\u003C\u002Flabel>\u003Cinput type=\"password\" \u002F>\u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\u003C\u002Fform>\n```\n\nThree nested ranks of proximity (4px \u002F 16px \u002F 48px) carry the entire grouping. No borders, no boxes, no dividers, no color — just space.\n\n### Example 3: a card with title, metadata, body, and action\n\n```html\n\u003Cstyle>\n  .card { display: grid; gap: 1rem; padding: 1.5rem; }\n  .card-header { display: grid; gap: 0.25rem; }     \u002F* title + metadata are paired *\u002F\n  .card-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }\n\u003C\u002Fstyle>\n\n\u003Carticle class=\"card\">\n  \u003Cheader class=\"card-header\">\n    \u003Ch3>Q4 financial review\u003C\u002Fh3>\n    \u003Cp class=\"meta\">Updated 3 minutes ago · Owner: Maria\u003C\u002Fp>\n  \u003C\u002Fheader>\n  \u003Cp>This quarter shows record revenue across the SMB segment...\u003C\u002Fp>\n  \u003Cdiv class=\"card-actions\">\n    \u003Cbutton>Open\u003C\u002Fbutton>\n    \u003Cbutton>Share\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Farticle>\n```\n\nThree groupings: title-metadata (tight pair), body (its own paragraph), actions (their own row). Each cluster reads independently; together they form the card.\n\n### Example 4: a navigation menu with sections\n\n```html\n\u003Cnav style=\"display: grid; gap: 1.5rem;\">                \u003C!-- gap between sections -->\n  \u003Cdiv style=\"display: grid; gap: 0.25rem;\">             \u003C!-- tight gap between links -->\n    \u003Ca href=\"\u002Fdashboard\">Dashboard\u003C\u002Fa>\n    \u003Ca href=\"\u002Fprojects\">Projects\u003C\u002Fa>\n    \u003Ca href=\"\u002Fteam\">Team\u003C\u002Fa>\n  \u003C\u002Fdiv>\n  \u003Cdiv style=\"display: grid; gap: 0.25rem;\">\n    \u003Ca href=\"\u002Fsettings\">Settings\u003C\u002Fa>\n    \u003Ca href=\"\u002Fbilling\">Billing\u003C\u002Fa>\n    \u003Ca href=\"\u002Flogout\">Sign out\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n```\n\nTwo clear sections, no dividers needed. The eye reads the gap between them as a section break.\n\n## Anti-patterns\n\n- **The four-equidistant trap.** Label, input, label, input — all spaced the same. Common in browser-default form rendering. Always tighter inside the pair, looser between pairs.\n- **Borders as grouping.** Reaching for `border: 1px solid grey` around every group adds visual weight without doing what proximity already does for free. Borders are a fallback for when proximity isn't enough.\n- **Inconsistent gaps for the same role.** Three sections on a page, each separated by a different gap. The eye reads inconsistency as accident; settle on one section gap and use it everywhere.\n- **Equal gaps top-to-bottom in a card.** Header, body, footer all separated by the same gap. The user has to read to figure out the structure. Vary gaps to encode role.\n- **Whitespace orphans.** A heading close to its content, but with so much space below the content that the next heading attaches to the *previous* content rather than its own. Always: heading-tighter-to-its-content; sections-looser-than-fields.\n\n## Heuristics\n\n1. **Squint test for grouping.** Squint until detail blurs. Each visual cluster should be obvious as a cluster, with clear gaps between clusters. If the page is one continuous mass, proximity is too uniform.\n2. **Read the cards aloud.** \"Title, then metadata, then body, then actions.\" If you can hear the pauses between groups, proximity is working. If everything runs together, the gaps are equal.\n3. **Two-finger test.** With two fingers, can you point at a single group and feel that the boundaries are clear? If your finger keeps drifting into the next group, the boundary is too ambiguous.\n4. **Strip the borders.** Remove every border on the page (mentally or actually). If structure collapses, you were leaning on borders to do proximity's job.\n\n## Related principles\n\n- **`uniform-connectedness`** — when proximity isn't enough, a shared background or container creates a stronger group; proximity tried first.\n- **`similarity`** — items that look alike are also grouped; combines with proximity.\n- **`good-continuation`** — items aligned on an axis read as a row, even with internal spacing.\n- **`hierarchy`** — proximity establishes *grouping*, hierarchy establishes *ranking* between groups.\n- **`signal-to-noise-ratio`** — proximity reduces noise by replacing chrome (borders, backgrounds) with negative space.\n- **`horror-vacui`** — proximity *requires* whitespace; resist filling it.\n\n## Sub-aspect skills\n\n- **`proximity-form-fields`** — applying proximity to form layouts, label-input pairs, sections.\n- **`proximity-data-tables`** — row spacing, column spacing, total rows, group separators.\n- **`proximity-navigation`** — sidebar groups, top-nav clusters, mobile menus.\n\n## Final note\n\nProximity is the principle most likely to be invisible when working and noisy when failing. The reward for getting it right is that the page feels organized in a way no one can quite pinpoint — they just don't get confused.\n",{"name":5,"description":7},"main","b0f0a87593c578a7898eccaf1b363f7f87c1f99b","plugins\u002FHDeibler\u002Funiversal-design-principles\u002Fplugins\u002Fperception-and-hierarchy-principles\u002Fskills\u002Fproximity",491,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins","https:\u002F\u002Fhol.org\u002Fplugins\u002Fbest-codex-plugins","https:\u002F\u002Fgithub.com\u002Fhashgraph-online","https:\u002F\u002Fhol.org","Open-source standards and developer tools for interoperable AI agents: discovery, identity, communication, payments, privacy and security.","2026-11-14 14:06:13",{"source":8,"skillName":5,"commands":55,"prompt":65,"zipAvailable":66},[56,59,62],{"tool":57,"command":58},"npx","npx skills add hashgraph-online\u002Fawesome-codex-plugins --skill proximity",{"tool":60,"command":61},"bunx","bunx skills add hashgraph-online\u002Fawesome-codex-plugins --skill proximity",{"tool":63,"command":64},"pnpm","pnpm dlx skills add hashgraph-online\u002Fawesome-codex-plugins --skill proximity","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002FHDeibler\u002Funiversal-design-principles\u002Fplugins\u002Fperception-and-hierarchy-principles\u002Fskills\u002Fproximity\u002FSKILL.md",true,[68],{"path":69,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":72,"sourceHtmlUrl":73},"references\u002Fgestalt-and-grouping-research.md","REFERENCE","参考文档",6471,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002FHDeibler\u002Funiversal-design-principles\u002Fplugins\u002Fperception-and-hierarchy-principles\u002Fskills\u002Fproximity\u002Freferences\u002Fgestalt-and-grouping-research.md",[75,83,90,97,122,146],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":82},"01M746ZWACVKMZ1BJXJZHYJSSX","migrate-to-e2e","Moves an existing Playwright, Cypress, Selenium, Appium, Detox, Maestro, or TesterArmy suite to e2e one slice at a time, with the old suite running beside the new one until each ported test is proven. Keeps a MIGRATION.md progress file so any later session resumes where the last stopped. Optionally plants a defect to show both suites catch it. Use for \u002Fmigrate-to-e2e, \"migrate our tests to e2e\", \"port these Maestro flows\", \"move our TesterArmy tests\", or when a project has an e2e config and an older suite still running.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftester-army\u002Fe2e\u002Fskills\u002Fmigrate-to-e2e\u002FSKILL.md",[],[],"2026-11-11 15:11:14",{"skillNo":84,"name":85,"nameZh":6,"description":86,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":89,"publishedAt":82},"01M746ZPTAX1Q0FBKAB1CYND7E","e2e","Writes, runs, and debugs end-to-end tests for web and mobile apps with e2e, the agentic test runner, which mixes agent.act goals with exact locator assertions on a Playwright browser or an iOS or Android device. Also drives a project's running app live over the e2e MCP server to look at a screen, check a UI change, take a screenshot or record a video, and try a locator; and runs bug bashes, parallel e2e explore runs with each bug proven by a repro test. Use when a project depends on e2e or has an e2e.config.ts, when asked for end-to-end, browser, mobile, or agentic UI tests, to check a change in the running app, to QA or bug bash an app or branch, or when an e2e run fails.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftester-army\u002Fe2e\u002Fskills\u002Fe2e\u002FSKILL.md",[],[],{"skillNo":91,"name":92,"nameZh":6,"description":93,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":96,"publishedAt":82},"01M746ZJN784HVHMDP9MQGCSGG","create-verification-skill","Generate a project-local verify-\u003Capp> skill on top of e2e, so any coding agent can launch the app, check it is worth driving, exercise a feature the way a user does, keep evidence, and bug bash it. Writes the skill, a feature map with one explore charter per feature, and proves it once. Use for \u002Fcreate-verification-skill, \"make a verification skill for this repo\", or when a project has no scripted way to prove UI behavior.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftester-army\u002Fe2e\u002Fskills\u002Fcreate-verification-skill\u002FSKILL.md",[],[],{"skillNo":98,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":103,"publishedAt":39},"01M716A6ETNB9B1SQ3GXZC75VR","deja-search","deja-vu memory — search the user's past AI coding sessions with the deja CLI. Holds what they already settled and never wrote into the repo (naming rules, banned or already-tried tools, required checks before merge, preferred values, who owns what). Use before your first edit in a task, before you call a change done or ready to merge, before you recommend a tool, library, design or reviewer, before re-debugging an error that may already be solved, when they say 'didn't we fix this before', 'what did we decide about X' or 'I already have that', and before telling them something on this machine does not exist.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvshulcz\u002Fdeja-vu\u002Fskills\u002Fdeja-search\u002FSKILL.md",[],[104,105,106,107,108,109,110,111,112,29,113,20,114,115,116,117,118,119,120,121],"search","deja search","never","error","ready","memory","re","decide","fix","debugging","you","done","reviewer","io","change","cli","merge","past",{"skillNo":123,"name":124,"nameZh":6,"description":125,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":126,"categories":127,"keywords":128,"publishedAt":39},"01M716A3J2W5SENSE9VGMXB375","deja-reflect","End-of-session reflection and memory curation with deja-vu. Review what was decided, what commands broke and what repaired them, and record durable project rules or decisions with deja remember so the next session starts with them.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvshulcz\u002Fdeja-vu\u002Fskills\u002Fdeja-reflect\u002FSKILL.md",[],[129,130,131,117,132,133,134,135,136,137,138,139,140,141,109,142,143,144,30,145],"deja reflect","reflect","review","with","record","github","next","https","node","Rules","decisions","brew","remember","project rules","project","session","reflection",{"skillNo":147,"name":148,"nameZh":6,"description":149,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":150,"categories":151,"keywords":163,"publishedAt":39},"01M715T3RR4BAYSR57HPPTJ0PF","revid","Make, edit, export and post AI videos with Revid (revid.ai) through the Revid MCP server. Use whenever the user wants a short-form or long-form video made (from an idea, a script, a URL, an article, a PDF, a tweet, a product page, their own clips, or a song), wants to find what is going viral on TikTok, YouTube, Instagram or X before making something, wants to edit or re-export an existing Revid project, generate a standalone AI image or clip, make a series episode, or publish and schedule a finished video to connected social accounts. Covers setup (hosted MCP with OAuth, or an API key), the 36 tools, credits, polling and the rules for publishing. Routes to the more specific revid-* skills when one fits.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftmakersas\u002Frevid-skills\u002Fskills\u002Frevid\u002FSKILL.md",[152,157,160],{"categoryNo":153,"categoryName":154,"taxonomyType":155,"taxonomyTypeDesc":156},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",{"categoryNo":158,"categoryName":159,"taxonomyType":155,"taxonomyTypeDesc":156},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":161,"categoryName":162,"taxonomyType":155,"taxonomyTypeDesc":156},"01JBSEEDCAT000000000000010","后端与接口",[148,164,165,166,167,168,169,143,170,110,171,172,173,174,20,175,176,177,178,179],"URL","Video","short-form","standalone","PDF","viral","tiktok","short","social","MCP","song","image","mcp server","schedule","api","publish"]