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 Data Tables

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

A skill your agent uses when designing or fixing data tables and tabular layouts — row spacing, column spacing, header treatment, group separators, total rows, sticky headers, dense vs.

Apache-2.0Auto-check passedDevelopment

Install Proximity Data Tables

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

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

GitHub CLI
$ gh skill install hashgraph-online/awesome-codex-plugins proximity-data-tables --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-data-tables .claude/skills/proximity-data-tables && 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-data-tables
GitHub stars
1.2k
Token cost
~2.1k tokens
SKILL.md length
719 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 data tables and tabular layouts — row spacing, column spacing, header treatment, group separators, total rows, sticky headers, dense vs.

  • Works in 3 steps: The single-finger trace. Can you trace… → The numeric-column scan. Look down a… → Strip the chrome. Mentally remove every…
  • Fixing data tables and tabular layouts — row spacing
  • SKILL.md covers The two-axis proximity ladder, Dense vs. comfortable variants, Header proximity and Numeric column proximity, plus 6 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Proximity Data Tables is an agent skill from hashgraph-online/awesome-codex-plugins. 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 follow," picking when to add zebra striping, or arguing for/against borders. Sub-aspect of proximity; read that first if you haven't already.

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

It sits in Development. 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 data tables and tabular layouts — row spacing
  • Header treatment
  • Group separators
  • The user is laying out a table

Example prompts

  • “rows that are hard to follow,”
  • “/proximity-data-tables”

Workflow steps

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

  1. The single-finger trace. Can you trace any row with one finger from left to right without losing your place? If not, row separation is too…
  2. The numeric-column scan. Look down a numeric column. Can you spot the largest value at a glance? If not, alignment or tabular-nums is…
  3. Strip the chrome. Mentally remove every border and background. Does the table still parse? If yes, your chrome is doing redundant work…

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

    No scripts in the folder and no shell commands in SKILL.md (its code samples are html).

    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 Data Tables loads about 2.1k tokens when it runs, and up to ~3.6k if it reads all its reference files. Until then it costs about 115 tokens; SKILL.md has 719 words of instructions outside code blocks.

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

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). 719 words, ~2,094 tokens.

Download SKILL.mdSave it as .claude/skills/proximity-data-tables/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
proximity-data-tables
description
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 follow," picking when to add zebra striping, or arguing for/against borders. Sub-aspect of `proximity`; read that first if you haven't already.

Proximity in data tables

Tables stress proximity in two directions at once: rows should read as discrete records (vertical proximity binding cells of the same row, separating them from cells of neighbor rows), and columns should read as semantic groupings (horizontal proximity within a column header, between header and cells). Most table problems are proximity problems disguised as styling problems.

The two-axis proximity ladder

In a table, you're managing two perpendicular spacing systems:

Vertical:
  Inside a row (cell padding)        — ~12-16px
  Between rows                       — ~0 (or thin border for separation)
  Header to first row                — slightly more than between rows
  Footer / total row                 — distinctly more than between rows

Horizontal:
  Within a cell (text to edge)       — ~12-16px
  Between columns                    — ~0 (cell border or just padding)
  Numeric columns: tabular-nums + right alignment for column-internal proximity

The classic mistake is uniform padding everywhere — every gap the same — so the eye can't tell rows from columns from groups.

Dense vs. comfortable variants

Tables come in two density modes; pick deliberately:

Comfortable (default for most apps):
  Cell padding:  py-3 px-4   (12px / 16px)
  Row height:    ~48px
  Best for:      moderate datasets, mixed user proficiency

Dense (power-user / spreadsheet-like):
  Cell padding:  py-1.5 px-3  (6px / 12px)
  Row height:    ~32px
  Best for:      high-frequency scanning, expert users, datasets >50 rows visible

Don't mix densities in the same table. Don't try to be "compact but readable" with mid-sized padding — it ends up neither dense enough for power users nor comfortable enough for casual ones.

Header proximity

The header should bind to its column (vertically tight to the column it labels) but separate clearly from the data rows.

html
<style>
  .table { width: 100%; border-collapse: collapse; }
  .table th, .table td { padding: 0.75rem 1rem; text-align: left; }
  .table th {
    font-size: 0.75rem;
    font-weight: 600;
    color: hsl(0 0% 35%);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid hsl(0 0% 88%);   /* separates header from data */
    padding-bottom: 0.5rem;                    /* tighter to the underline */
  }
  .table td { border-bottom: 1px solid hsl(0 0% 95%); }   /* very subtle row separator */
  .table tbody tr:hover { background: hsl(0 0% 98%); }
</style>

<table class="table">
  <thead>
    <tr>
      <th>Customer</th>
      <th style="text-align: right;">Amount</th>
      <th style="text-align: right;">Days late</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Acme Co.</td>
      <td style="text-align: right; font-variant-numeric: tabular-nums;">$2,480.00</td>
      <td style="text-align: right; font-variant-numeric: tabular-nums;">14</td>
      <td><span class="badge badge-warning">Pending</span></td>
    </tr>
    <!-- … -->
  </tbody>
</table>

The header sits in its own row, visually distinct (smaller, uppercase, lower contrast, with a stronger underline). Data rows have a subtle hairline separator that suggests row boundaries without dominating.

Numeric column proximity

Numbers in a column should align within the column, so the eye can scan vertically and compare magnitudes:

  • Right-align numeric columns. Left-aligned numbers don't compare.
  • Tabular nums (font-variant-numeric: tabular-nums) so digits occupy equal width. Without this, "1,000" and "9,999" don't align by digit position.
  • Same number of decimals in every cell of a column. "$2.5", "$10.00", "$1,200" don't align. Pick a precision and stick to it.
html
<td style="text-align: right; font-variant-numeric: tabular-nums;">$2,480.00</td>
<td style="text-align: right; font-variant-numeric: tabular-nums;">$10.00</td>
<td style="text-align: right; font-variant-numeric: tabular-nums;">$98,001.50</td>

Now the eye can scan the column and see magnitude differences instantly.

Group separators

When rows belong to logical groups (orders by month, projects by team, transactions by status), encode the grouping with a visible gap and an optional sub-header — not by adding a heavy border:

html
<table class="table">
  <thead>…</thead>
  <tbody>
    <tr class="group-header">
      <td colspan="4">May 2026</td>
    </tr>
    <tr><td>…</td>…</tr>
    <tr><td>…</td>…</tr>

    <tr class="group-header">
      <td colspan="4">April 2026</td>
    </tr>
    <tr><td>…</td>…</tr>
    <tr><td>…</td>…</tr>
  </tbody>
</table>

<style>
  .group-header td {
    font-size: 0.75rem;
    font-weight: 600;
    color: hsl(0 0% 35%);
    background: hsl(0 0% 97%);
    padding-top: 1rem;        /* extra space above this row separates groups */
    padding-bottom: 0.5rem;
  }
</style>

The extra top padding on group headers creates a perceptual gap; the slight background tint reinforces it. The user reads months as groups, transactions as group members.

Total / summary rows

Total rows should bind to the data they summarize (close vertically) and stand out from regular rows (heavier weight, possibly a top border):

html
<tfoot>
  <tr style="font-weight: 600; border-top: 2px solid hsl(0 0% 88%);">
    <td>Total</td>
    <td colspan="2" style="text-align: right; font-variant-numeric: tabular-nums;">$24,800.00</td>
    <td></td>
  </tr>
</tfoot>

The 2px top border separates the summary from data rows. Bold weight signals "this is summary, not a regular row." Same column alignment as the data above.

Zebra striping (alternating row backgrounds)

Use sparingly. Zebra striping helps the eye track across very wide rows (~7+ columns) but adds visual noise to compact tables.

  • Use it: wide tables, many columns, where the user must trace a single row across.
  • Skip it: 3–5 column tables where row tracking isn't a problem; a hover background is enough.
  • Make it subtle: hsl(0 0% 98%) against white — visible but not distracting. Anything stronger competes with the data.
Show full SKILL.md (258 more words)Show less

Anti-patterns

  • Heavy borders everywhere. Every cell bordered, every row separated, every column ruled. The page becomes a grid prison; data drowns in chrome. Strip borders; let alignment and subtle separation do the work.
  • Equal padding top and bottom on rows. With no row separator and equal padding, rows blur into a wall of text. Add either a hairline separator or a slight row-zebra.
  • Numeric and text columns aligned the same way. Numbers left-aligned mean the eye can't compare magnitudes; text right-aligned means the eye can't follow words.
  • Inconsistent decimal precision. One column shows "$2", "$2.5", "$2.50", "$2.501" — eye scan fails. Pick a precision per column.
  • Sticky header with no separator. Sticky headers that float over scrolling data without a clear border merge into the data; users don't realize what's a header.

Heuristics

  1. The single-finger trace. Can you trace any row with one finger from left to right without losing your place? If not, row separation is too weak (or the row is too tall).
  2. The numeric-column scan. Look down a numeric column. Can you spot the largest value at a glance? If not, alignment or tabular-nums is missing.
  3. Strip the chrome. Mentally remove every border and background. Does the table still parse? If yes, your chrome is doing redundant work; trim it.
  • proximity (parent).
  • proximity-form-fields — same principle on input layouts.
  • hierarchy-typographic — header styling lives at the intersection of hierarchy and proximity.
  • signal-to-noise-ratio — tables are a primary case for SNR discipline.
  • legibility — tabular numerals and alignment are legibility decisions as much as proximity ones.

© 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-data-tables of hashgraph-online/awesome-codex-plugins.

  • SKILL.md
  • references/table-design-patterns.md

Open the folder on GitHubat commit 78497e5

Compare with similar skills

Proximity Data Tables 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 Data Tables compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Proximity Data Tables this skillhashgraph-online/awesome-codex-plugins1.2k—~2.1kAutomated safety check: PassApache-2.0
Vercel Composition Patternssupabase/supabase111k59 repos~726Automated safety check: PassMIT
Finishing a Development Branchobra/superpowers296k5 repos~1.9kAutomated safety check: PassMIT
Typescript Advanced Typesrolling-scopes/rsschool-app10k25 repos~4.2kAutomated safety check: PassMPL-2.0
PR Babysitteropeninterpreter/openinterpreter69k3 repos~4.2kAutomated safety check: PassApache-2.0
Code Review ChecklistshareAI-lab/learn-claude-code78k5 repos~1.1kAutomated safety check: PassMIT

Similar skills

  • Vercel Composition Patterns

    supabase/supabase

    Official

    React composition patterns that scale. An agent skill from supabase/supabase.

    111k GitHub starsUsed in 59 repos~726 tokens
    DevelopmentAuto-check passed

  • Finishing a Development Branch

    obra/superpowers

    Walks the last step of a branch: confirm tests pass, detect the git environment, ask how to integrate, carry out your choice and clean up the worktree.

    296k GitHub starsUsed in 5 repos~1.9k tokens
    DevelopmentAuto-check passed

  • Typescript Advanced Types

    rolling-scopes/rsschool-app

    Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications.

    10k GitHub starsUsed in 25 repos~4.2k tokens
    DevelopmentAuto-check passed

  • PR Babysitter

    openinterpreter/openinterpreter

    Watches an open GitHub pull request until it merges, handling review comments, diagnosing CI failures and retrying flaky checks along the way.

    69k GitHub starsUsed in 3 repos~4.2k tokens
    DevelopmentAuto-check passed

  • Code Review Checklist

    shareAI-lab/learn-claude-code

    Reviews code against a five-part checklist covering security, correctness, performance, maintainability and testing, and reports findings in a fixed format.

    78k GitHub starsUsed in 5 repos~1.1k tokens
    DevelopmentAuto-check passed

  • Greploop

    onyx-dot-app/onyx

    Iteratively improves a PR (GitHub), MR (GitLab), or shelved changelist (Perforce) until Greptile gives it a 5/5 confidence score with zero unresolved comments.

    32k GitHub starsUsed in 4 repos~3.3k tokens
    DevelopmentAuto-check passed

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 yesterday
    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 yesterday
    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 yesterday
    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 yesterday
    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 yesterday
    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 yesterday
    Auto-check passed

Categories

Questions about Proximity Data Tables

What does Proximity Data Tables do?

A skill your agent uses when designing or fixing data tables and tabular layouts — row spacing, column spacing, header treatment, group separators, total rows, sticky headers, dense vs. Proximity Data Tables is an agent skill from hashgraph-online/awesome-codex-plugins. 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.

When should I use Proximity Data Tables?

Proximity Data Tables fits situations like: fixing data tables and tabular layouts — row spacing; header treatment; group separators; the user is laying out a table.

How do I install Proximity Data Tables in Claude Code?

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

How do I install Proximity Data Tables in Codex?

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

Can I use Proximity Data Tables 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-data-tables -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-data-tables, .gemini/skills/proximity-data-tables, .github/skills/proximity-data-tables and .opencode/skills/proximity-data-tables in your project.

What does Proximity Data Tables need to run?

SKILL.md names no scripts, command-line tools or credentials: Proximity Data Tables is instructions for the agent only.

Does Proximity Data Tables 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 Data Tables 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 Data Tables use?

Proximity Data Tables 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 Data Tables use?

About 2.1k tokens (SKILL.md is roughly 8.4k 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 Data Tables?

Skills that share tags, products or a category with Proximity Data Tables: Vercel Composition Patterns (supabase/supabase, 111k stars), Finishing a Development Branch (obra/superpowers, 296k stars), Typescript Advanced Types (rolling-scopes/rsschool-app, 10k stars) and PR Babysitter (openinterpreter/openinterpreter, 69k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Proximity Data Tables?

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.