New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Proximity Navigation

by hashgraph-online in hashgraph-online/awesome-codex-plugins

A skill your agent uses when designing or fixing navigation — sidebars, top nav, footer nav, mobile menus, breadcrumbs, tab bars, command palette groupings.

Apache-2.0Auto-check passed

Install Proximity Navigation

skills CLI
$ npx skills add hashgraph-online/awesome-codex-plugins --skill proximity-navigation -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install hashgraph-online/awesome-codex-plugins proximity-navigation --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/hashgraph-online/awesome-codex-plugins.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/HDeibler/universal-design-principles/plugins/perception-and-hierarchy-principles/skills/proximity-navigation .claude/skills/proximity-navigation && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
proximity-navigation
GitHub stars
1.2k
Token cost
~1.8k tokens
SKILL.md length
529 words
Files
2 (incl. references)
Skills in repo
686
Repo updated
First seen
Licence
Apache-2.0

At a glance

A skill your agent uses when designing or fixing navigation — sidebars, top nav, footer nav, mobile menus, breadcrumbs, tab bars, command palette groupings.

  • Works in 3 steps: Read groups aloud. "Workspace:… → Compress test. Reduce the section gap to… → No-divider test. Remove all dividers. If…
  • Fixing navigation — sidebars
  • SKILL.md covers The navigation proximity ladder, Sidebar with grouped sections, When to add a divider and Mobile bottom nav, plus 5 more sections
  • Calls go

What it does

Proximity Navigation is an agent skill from hashgraph-online/awesome-codex-plugins. 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 mobile bottom-nav with multiple action groups. Sub-aspect of proximity; read that first if you haven't already.

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/navigation-patterns.md`).

The repository describes itself as: A curated list of awesome OpenAI Codex / ChatGPT plugins, skills, and resources. The 1 Codex Marketplace. See live plugins at: https://hol.org/plugins/best-codex-plugins. The licence is Apache-2.0.

When your agent uses it

  • Fixing navigation — sidebars
  • Command palette groupings
  • Grouping related links
  • Deciding when to add section dividers

Example prompts

  • “/proximity-navigation”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Read groups aloud. "Workspace: Dashboard, Projects, Team." If you can hear the pause between groups, proximity is working.
  2. Compress test. Reduce the section gap to half. If the structure becomes unclear, you needed that gap. If it's still clear, your sections…
  3. No-divider test. Remove all dividers. If structure collapses, proximity wasn't doing the work and you were over-relying on chrome.

What it can do on your machine

Read from SKILL.md and the folder at commit 78497e5. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • go

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Proximity Navigation loads about 1.8k tokens when it runs, and up to ~3.3k if it reads all its reference files. Until then it costs about 109 tokens; SKILL.md has 529 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~109
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from hashgraph-online/awesome-codex-plugins at commit 78497e5, republished under its Apache-2.0 licence (© hashgraph-online). 529 words, ~1,759 tokens.

Download SKILL.mdSave it as .claude/skills/proximity-navigation/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
proximity-navigation
description
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 mobile bottom-nav with multiple action groups. Sub-aspect of `proximity`; read that first if you haven't already.

Proximity in navigation

Navigation is a sequence of links where some belong to the same group and others to different groups. Proximity is the cheapest way to communicate the structure — far cheaper and lighter than dividers, sub-headers, or color shifts.

The navigation proximity ladder

Inside a section: gap-1   (4px) between adjacent links
Between sections: gap-6   (24px) — visibly larger
Section heading:  closer to its first link than to the previous section

Keep the inside-section gap tight. Aggressive whitespace inside a sidebar wastes vertical space and makes the eye treat each link as its own region.

Sidebar with grouped sections

html
<nav style="display: grid; gap: 1.5rem; padding: 1rem;">
  <div style="display: grid; gap: 0.125rem;">
    <p class="nav-heading">Workspace</p>
    <a class="nav-link" href="/dashboard">Dashboard</a>
    <a class="nav-link" href="/projects">Projects</a>
    <a class="nav-link active" href="/team">Team</a>
  </div>

  <div style="display: grid; gap: 0.125rem;">
    <p class="nav-heading">Personal</p>
    <a class="nav-link" href="/profile">Profile</a>
    <a class="nav-link" href="/notifications">Notifications</a>
  </div>

  <div style="display: grid; gap: 0.125rem;">
    <p class="nav-heading">Account</p>
    <a class="nav-link" href="/billing">Billing</a>
    <a class="nav-link" href="/security">Security</a>
  </div>
</nav>

<style>
  .nav-heading {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: hsl(0 0% 50%);
    padding: 0 0.5rem;
    margin-bottom: 0.25rem;       /* slightly closer to its first link */
  }
  .nav-link {
    padding: 0.375rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: hsl(0 0% 25%);
    text-decoration: none;
  }
  .nav-link:hover { background: hsl(0 0% 96%); }
  .nav-link.active { background: hsl(0 0% 92%); font-weight: 500; }
</style>

Three sections, no dividers. The 24px gap between sections is unmistakably looser than the 2px gap between links. Section headings recede in tone (uppercase + small + grey) so they don't compete with the links.

When to add a divider

If sections need more separation than proximity alone provides — typically when:

  • Sections are conceptually very different (workspace links vs. account/sign-out).
  • The sidebar is short (3–4 sections) and you want a strong visual rhythm.
  • A sub-section of links is visually similar enough to its parent that proximity alone won't differentiate.

Use the lightest divider that does the job:

html
<hr style="border: 0; border-top: 1px solid hsl(0 0% 90%); margin: 0;" />

Resist heavy dividers (2px, dark colors) — they read as walls.

Mobile bottom nav

Bottom nav with 3–5 primary destinations should bind tightly horizontally:

html
<nav class="bottom-nav">
  <a href="/feed"><HomeIcon /><span>Home</span></a>
  <a href="/search"><SearchIcon /><span>Search</span></a>
  <a href="/post"><PlusIcon /><span>New</span></a>
  <a href="/inbox"><InboxIcon /><span>Inbox</span></a>
  <a href="/me"><UserIcon /><span>You</span></a>
</nav>

<style>
  .bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    display: grid; grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid hsl(0 0% 88%);
    background: white;
    padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom));
  }
  .bottom-nav a {
    display: grid; gap: 0.125rem; justify-items: center;
    font-size: 0.625rem;
    color: hsl(0 0% 40%);
  }
  .bottom-nav a[aria-current="page"] { color: hsl(220 90% 50%); font-weight: 500; }
</style>

The icon and label are tightly bound (2px gap). The five items distribute equal space across the bar. No dividers; the equal distribution is the proximity signal that they're a peer group.

Breadcrumbs

Breadcrumbs are a rare case where proximity is more uniform — each segment is a separate jump, but they're conceptually a continuous path:

html
<nav aria-label="Breadcrumb">
  <ol style="display: flex; gap: 0.5rem; align-items: center; list-style: none; padding: 0;">
    <li><a href="/projects">Projects</a></li>
    <li aria-hidden style="color: hsl(0 0% 60%);">/</li>
    <li><a href="/projects/acme">Acme</a></li>
    <li aria-hidden style="color: hsl(0 0% 60%);">/</li>
    <li aria-current="page">Settings</li>
  </ol>
</nav>

Equal gaps between segments. Separators (/) live in the gap, recessed in tone. The current page is unlinked and slightly heavier — the only proximity break is the recessive separator.

Command palette groupings

A cmd-K palette typically shows actions grouped by category. Proximity holds groups together:

Recent
  Create invoice
  Open settings

Actions
  Search
  Invite teammate
  Export workspace

Navigation
  Go to dashboard
  Go to projects

Each group has a lightly-styled heading (small, uppercase, low contrast). Within each group, items are tightly stacked. Between groups, looser spacing. No dividers needed.

Show full SKILL.md (216 more words)Show less

Anti-patterns

  • Equal-spaced sections. Sidebar with sections at the same gap as items inside sections. The eye reads it as one long list, not multiple groups.
  • Heavy dividers between every section. A sidebar with <hr> between every group looks like a form. Use space first; dividers only when space alone is insufficient.
  • Section headings as items. A sidebar where the section heading is styled like a link. Users try to click it. Style headings distinctly (smaller, uppercase, lower contrast, non-clickable cursor) so they read as labels.
  • Nested-tree creep. Every link nested under a parent, with indentation creating proximity confusion. Flat structure beats deep nesting in nav.

Heuristics

  1. Read groups aloud. "Workspace: Dashboard, Projects, Team." If you can hear the pause between groups, proximity is working.
  2. Compress test. Reduce the section gap to half. If the structure becomes unclear, you needed that gap. If it's still clear, your sections were over-spaced.
  3. No-divider test. Remove all dividers. If structure collapses, proximity wasn't doing the work and you were over-relying on chrome.
  • proximity (parent).
  • proximity-form-fields and proximity-data-tables — same principle in different layouts.
  • hicks-law (cognition plugin) — reducing the count of nav items matters more than how they're grouped; pair this skill with that one.
  • signal-to-noise-ratio — nav is a primary case for SNR discipline; keep chrome minimal.

© hashgraph-online, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (references) in plugins/HDeibler/universal-design-principles/plugins/perception-and-hierarchy-principles/skills/proximity-navigation of hashgraph-online/awesome-codex-plugins.

  • SKILL.md
  • references/navigation-patterns.md

Open the folder on GitHubat commit 78497e5

Compare with similar skills

Proximity Navigation next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Proximity Navigation compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Proximity Navigation this skillhashgraph-online/awesome-codex-plugins1.2k—~1.8kAutomated safety check: PassApache-2.0
Fix PR Design Notesdifferent-ai/openwork24k—~824Automated safety check: PassCustom licence
Design Systemaffaan-m/ECC275k—~698Automated safety check: PassMIT
Design Guidepaperclipai/paperclip99k1 repos~3.1kAutomated safety check: PassMIT
Design Audit Against Rams' Principlesthedotmack/claude-mem98k—~4.6kAutomated safety check: PassApache-2.0
Figma Design to Codewarpdotdev/warp65k4 repos~2.9kAutomated safety check: PassAGPL-3.0

Similar skills

  • Fix PR Design Notes

    different-ai/openwork

    Reads the advisory design review attached to a pull request's screenshots, fixes the flagged UI problems in product code, and proves each note is gone.

    24k GitHub stars~824 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Design System

    affaan-m/ECC

    Generate a design system from an existing codebase or audit one for visual consistency: extract tokens (colors, typography, spacing, shadows) into design-tokens.json and CSS custom properties with…

    275k GitHub stars~698 tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

  • Design Guide

    paperclipai/paperclip

    Paperclip UI design system guide for building consistent, reusable frontend components.

    99k GitHub starsUsed in 1 repo~3.1k tokens
    Frontend & DesignAuto-check passed

  • Design Audit Against Rams' Principles

    thedotmack/claude-mem

    Audits a design against Dieter Rams' ten principles of good design, scores each with evidence, and hands off a make-plan prompt for a new, refined or redesigned outcome.

    98k GitHub stars~4.6k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Figma Design to Code

    warpdotdev/warp

    Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.

    65k GitHub starsUsed in 4 repos~2.9k tokens
    Frontend & DesignAuto-check passed

  • Design Consultation

    garrytan/gstack

    Learns about your product, studies the landscape and writes a DESIGN.md with a full design system covering type, color, layout, spacing and motion.

    136k GitHub stars~15k tokensUpdated today
    Frontend & DesignAuto-check: notes

More from hashgraph-online/awesome-codex-plugins

All 686 skills in this repo

  • Anime Reaction Gif

    hashgraph-online/awesome-codex-plugins

    Create original anime-style reaction stickers as looping GIFs and MP4 previews, using generated character pose sheets and timed key poses.

    1.2k GitHub stars~922 tokensUpdated today
    Auto-check passed

  • Calibredb

    hashgraph-online/awesome-codex-plugins

    Manage and query Calibre libraries with the calibredb CLI (local paths or Calibre Content server URLs).

    1.2k GitHub stars~1k tokensUpdated today
    Auto-check passed

  • Rust API Test Harness

    hashgraph-online/awesome-codex-plugins

    A skill your agent uses when adding, changing, testing, or debugging Rust HTTP APIs and services, especially when Codex needs black-box integration tests, random-port app startup, real database test…

    1.2k GitHub stars~1.7k tokensUpdated today
    Auto-check passed

  • Art

    hashgraph-online/awesome-codex-plugins

    Make a studio's game look like something at build time — a cover from a real frame of the game (free), painted covers, backdrops, textures and character plates from image models through the…

    1.2k GitHub stars~2.4k tokensUpdated today
    Auto-check passed

  • Game Balance Economy

    hashgraph-online/awesome-codex-plugins

    Balance game difficulty, resources, rewards, probability, progression, economies, and dominant strategies.

    1.2k GitHub stars~618 tokensUpdated today
    Auto-check passed

  • Manuscript Engagement Analytics

    hashgraph-online/awesome-codex-plugins

    Analyze nonfiction manuscripts for reader engagement signals, including heading-level word counts, slow starts, long slogs, weak takeaway titles, value pacing, beta-reader comment dropoff, and…

    1.2k GitHub stars~875 tokensUpdated today
    Auto-check passed

Questions about Proximity Navigation

What does Proximity Navigation do?

A skill your agent uses when designing or fixing navigation — sidebars, top nav, footer nav, mobile menus, breadcrumbs, tab bars, command palette groupings. Proximity Navigation is an agent skill from hashgraph-online/awesome-codex-plugins. Use this skill when designing or fixing navigation — sidebars, top nav, footer nav, mobile menus, breadcrumbs, tab bars, command palette groupings.

When should I use Proximity Navigation?

Proximity Navigation fits situations like: fixing navigation — sidebars; command palette groupings; grouping related links; deciding when to add section dividers.

How do I install Proximity Navigation in Claude Code?

Run `npx skills add hashgraph-online/awesome-codex-plugins --skill proximity-navigation -a claude-code`. Or copy the skill folder (plugins/HDeibler/universal-design-principles/plugins/perception-and-hierarchy-principles/skills/proximity-navigation in hashgraph-online/awesome-codex-plugins) into .claude/skills/proximity-navigation in your project. Claude Code loads it when a task matches its description.

How do I install Proximity Navigation in Codex?

Run `npx skills add hashgraph-online/awesome-codex-plugins --skill proximity-navigation -a codex`. Or copy the skill folder (plugins/HDeibler/universal-design-principles/plugins/perception-and-hierarchy-principles/skills/proximity-navigation in hashgraph-online/awesome-codex-plugins) into .agents/skills/proximity-navigation in your project. Codex loads it when a task matches its description.

Can I use Proximity Navigation in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add hashgraph-online/awesome-codex-plugins --skill proximity-navigation -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/proximity-navigation, .gemini/skills/proximity-navigation, .github/skills/proximity-navigation and .opencode/skills/proximity-navigation in your project.

What does Proximity Navigation need to run?

Going by SKILL.md and its folder, Proximity Navigation needs the command-line tools its instructions call (go).

Does Proximity Navigation access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Proximity Navigation safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Proximity Navigation use?

Proximity Navigation is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Proximity Navigation use?

About 1.8k tokens (SKILL.md is roughly 7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.5k tokens, read only when the agent opens those files.

What are the alternatives to Proximity Navigation?

Skills that share tags, products or a category with Proximity Navigation: Fix PR Design Notes (different-ai/openwork, 24k stars), Design System (affaan-m/ECC, 275k stars), Design Guide (paperclipai/paperclip, 99k stars) and Design Audit Against Rams' Principles (thedotmack/claude-mem, 98k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Proximity Navigation?

hashgraph-online (a GitHub organization) maintains it in hashgraph-online/awesome-codex-plugins, which has 1,242 GitHub stars. The repository holds 686 skills in this directory. The repository was last updated on October 8, 2026.

Source: hashgraph-online/awesome-codex-plugins on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.