A skill your agent uses 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…

Apache-2.0Auto-check passed

Install Snr Densification

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

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

GitHub CLI
$ gh skill install hashgraph-online/awesome-codex-plugins snr-densification --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/snr-densification .claude/skills/snr-densification && 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
snr-densification
GitHub stars
1.3k
Token cost
~1.9k tokens
SKILL.md length
611 words
Files
2 (incl. references)
Skills in repo
714
Repo updated
First seen
Licence
Apache-2.0

At a glance

A skill your agent uses 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…

  • Works in 5 steps: Replace navigation steps with adjacent… → Use compact data primitives → Inline action affordances → …
  • A design has too much whitespace — when the SNR pendulum has swung from cluttered all the way to sparse
  • SKILL.md covers When sterility is the problem, What signal-density looks like, How densification differs from… and Worked example: a sparse…, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Snr Densification is an agent skill from hashgraph-online/awesome-codex-plugins. 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 complain "I'm scrolling forever to get to anything." Also trigger when designing power-user surfaces (admin panels, IDEs, data tools) that need higher density than consumer defaults. Sub-aspect of signal-to-noise-ratio; read…

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/density-research.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

  • A design has too much whitespace — when the SNR pendulum has swung from cluttered all the way to sparse
  • You need to add signal density without adding noise
  • Reviewing a UI that feels thin
  • Feels under-built

Example prompts

  • “empty-feeling,”
  • “feels thin,”
  • “feels under-built,”
  • “/snr-densification”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Replace navigation steps with adjacent context
  2. Use compact data primitives
  3. Inline action affordances
  4. Smaller default sizes
  5. Allow user-controlled density

What it can do on your machine

Read from SKILL.md and the folder at commit 9e7b281. 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

Snr Densification loads about 1.9k tokens when it runs, and up to ~2.8k if it reads all its reference files. Until then it costs about 144 tokens; SKILL.md has 611 words of instructions outside code blocks.

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

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 9e7b281, republished under its Apache-2.0 licence (© hashgraph-online). 611 words, ~1,855 tokens.

Download SKILL.mdSave it as .claude/skills/snr-densification/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
snr-densification
description
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 complain "I'm scrolling forever to get to anything." Also trigger when designing power-user surfaces (admin panels, IDEs, data tools) that need higher density than consumer defaults. Sub-aspect of `signal-to-noise-ratio`; read that first if you haven't already.

Densification: adding signal without adding noise

The opposite failure mode of "noisy UI" is "sterile UI" — a design so subtractively-edited that it loses the affordances and richness users actually need. SNR is a ratio; you can improve it either by removing noise or by adding signal. This skill covers the latter.

When sterility is the problem

Symptoms:

  • Power users tell you they "miss" features that are present but tucked away.
  • The page contains 3 things on a 1440px screen and feels under-built.
  • Common workflows require navigating away and back; the current surface doesn't show enough.
  • The empty state doesn't feel empty — the populated state feels empty.
  • A/B testing shows users hesitating because there's not enough information to decide.

What signal-density looks like

Densification means more meaningful information per visible region, with the meaning still clearly readable. Done well, it looks like a Bloomberg terminal in restraint mode: many numbers, but every number labeled, ranked, and scannable.

Approaches:

1. Replace navigation steps with adjacent context

A common low-density mistake: a list view shows only names; the user clicks through to see details. Densify by showing critical detail inline.

html
<!-- Sparse: name only, click for detail -->
<li><a href="/projects/acme">Acme Q4 Refresh</a></li>

<!-- Dense: name + status + owner + due date inline -->
<li>
  <a href="/projects/acme">Acme Q4 Refresh</a>
  <span class="meta">In review · Maria · Due May 12</span>
</li>

The signal-per-line jumped 4x with no added noise.

2. Use compact data primitives

Replace large cards with rows. Replace giant icons with small ones. Replace verbose labels with shorter conventional ones.

html
<!-- Sparse: each KPI in a 200x200 card with icon and gradient -->
<div class="card-grid">
  <div class="card">…1 number…</div>
  <div class="card">…1 number…</div>
  <div class="card">…1 number…</div>
</div>

<!-- Dense: KPIs as a single row of stat blocks -->
<dl class="stat-row">
  <div><dt>Revenue</dt><dd>$48.2k <span class="delta-up">+12%</span></dd></div>
  <div><dt>Users</dt><dd>12,481 <span class="delta-up">+3%</span></dd></div>
  <div><dt>Churn</dt><dd>2.1% <span class="delta-down">-0.4%</span></dd></div>
  <div><dt>NPS</dt><dd>42</dd></div>
</dl>
3. Inline action affordances

Don't make users open a row's menu to see what they can do. Show the actions inline (icon-buttons in the row).

html
<tr>
  <td>Acme Q4 Refresh</td>
  <td>In review</td>
  <td class="actions">
    <button aria-label="Open"><EyeIcon /></button>
    <button aria-label="Comment"><MessageIcon /></button>
    <button aria-label="Archive"><ArchiveIcon /></button>
  </td>
</tr>
4. Smaller default sizes

The default shadcn/Material density is calibrated for general use. Power surfaces benefit from text-sm body, text-xs metadata, py-1.5 row padding instead of py-3. Just tune one notch denser, not five.

5. Allow user-controlled density

Offer a "Compact" mode in settings, or per-table density toggles, so users can pick their preferred ratio.

How densification differs from noise

The line between dense and noisy is whether the additional content is task-relevant.

  • Dense: more numbers, more labels, more rows, more context — all serving the user's reason for being here.
  • Noisy: more borders, more shadows, more illustrations, more decoration — none of which advance the task.

A correctly densified UI looks like more information; a noisy UI looks like more decoration around the same information.

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

Worked example: a sparse dashboard, densified

Before (sparse):

html
<main style="padding: 4rem; max-width: 800px; margin: 0 auto;">
  <h1>Welcome back</h1>
  <p>You have 3 things to review.</p>
  <button>Go to inbox</button>
</main>

A "welcome dashboard" of this kind feels like a placeholder. The user came to do something; they shouldn't have to click through.

After (densified):

html
<main style="padding: 1.5rem; max-width: 1200px; margin: 0 auto;">
  <header style="display: flex; justify-content: space-between; align-items: end;">
    <div>
      <h1 style="font-size: 1.5rem;">Today</h1>
      <p style="color: hsl(0 0% 45%); font-size: 0.875rem;">3 to review · 2 due this week</p>
    </div>
    <div style="display: flex; gap: 0.5rem;">
      <button>Inbox</button>
      <button class="primary">New</button>
    </div>
  </header>

  <section style="margin-top: 2rem; display: grid; gap: 1rem; grid-template-columns: 2fr 1fr;">
    <div>
      <h2 style="font-size: 1rem; margin-bottom: 0.5rem;">To review</h2>
      <ul class="dense-list">
        <li><a href="/r/1">Acme Q4 contract</a> <span class="meta">Maria · 2h</span></li>
        <li><a href="/r/2">Brand book v3</a> <span class="meta">Lin · yesterday</span></li>
        <li><a href="/r/3">2026 hiring plan</a> <span class="meta">You · 3d</span></li>
      </ul>
    </div>
    <aside>
      <h2 style="font-size: 1rem; margin-bottom: 0.5rem;">This week</h2>
      <dl class="stat-list">
        <div><dt>Open tickets</dt><dd>14</dd></div>
        <div><dt>Closed</dt><dd>52</dd></div>
        <div><dt>Avg response</dt><dd>2h 14m</dd></div>
      </dl>
    </aside>
  </section>
</main>

Same page region, ~10× the actionable signal, no added noise.

Anti-patterns

  • Densification by adding decoration. "It feels empty, let me add a hero illustration." That's the opposite move; you've added noise, not signal.
  • Densification by adding all features. Every product feature gets a tile on the dashboard regardless of relevance. That's noise too — only the user's actually-needed features should be present.
  • Density without alignment. Cramming many elements without a strict grid produces clutter, not density. Strong alignment is what allows high density to remain readable.

Heuristics

  1. Squint test in reverse. Squint at the page. Is there any dominant content? If you see only mass background and a few dots, the page is empty.
  2. The "What can I do here?" test. Land on the page cold. Within 2 seconds, can you identify 3 actions you might take? If no, density is too low.
  3. The information audit. Count the distinct pieces of useful information visible without scrolling. Compare to similar surfaces in well-designed competitors. If you're at half their count and the page feels light, densify.
  • signal-to-noise-ratio (parent).
  • snr-decoration-removal — the subtraction side of SNR; complementary to this skill.
  • hierarchy-spatial — densification needs strong spatial hierarchy or it becomes visual mush.
  • propositional-density (cognition) — closely related: meaning per mark, signal per pixel.

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

  • SKILL.md
  • references/density-research.md

Open the folder on GitHubat commit 9e7b281

Compare with similar skills

Snr Densification 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.

Snr Densification compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Snr Densification this skillhashgraph-online/awesome-codex-plugins1.3k—~1.9kAutomated safety check: PassApache-2.0
Medical Topic Saturation And Whitespace Checkeraipoch/medical-research-skills2k—~3.6kAutomated safety check: PassMIT
OmniRoute Budget Controlsdiegosouzapw/OmniRoute74k—~297Automated safety check: PassMIT
Video Template Frame Build Minimalnexu-io/open-design100k—~371Automated safety check: PassApache-2.0
CodeGraph Agent Evalcolbymchenry/codegraph74k—~950Automated safety check: PassMIT
Singapore Employment Actmohitagw15856/pm-claude-skills1.4k—~1.1kAutomated safety check: PassMIT

Similar skills

  • Maps whether a biomedical research topic, subtopic, or study angle is truly saturated, superficially crowded, strategically occupied, or still open for differentiated entry.

    2k GitHub stars~3.6k tokensUpdated 22 days ago
    Research & ScienceAuto-check passed
  • OmniRoute Budget Controls

    diegosouzapw/OmniRoute

    Sets per-key or account-wide caps on spend and request rate for OmniRoute, and reports how much of each cap has been used.

    74k GitHub stars~297 tokensUpdated yesterday
    Backend & APIsAuto-check passed
  • Use this plugin when the user wants a "Build Minimal Frame" HyperFrames motion video — Luxury-minimal whitespace hero — single word reveals letter by letter, warm-gold hairline, breathing indicators.

    100k GitHub stars~371 tokensUpdated today
    Media & CreativeAuto-check passed
  • CodeGraph Agent Eval

    colbymchenry/codegraph

    Benchmarks how much CodeGraph helps a coding agent on a real repository, comparing runs with and without it for a chosen local or published version.

    74k GitHub stars~950 tokensUpdated 2 days ago
    Agent WorkflowsAuto-check passed
  • Singapore Employment Act

    mohitagw15856/pm-claude-skills

    A skill your agent uses when asked am I covered by the Employment Act, how much annual leave or sick leave am I entitled to, can my employer cut my pay, how much notice do I need to give, is…

    1.4k GitHub stars~1.1k tokensUpdated yesterday
    Auto-check passed
  • Official

    Analyze the most expensive users in AI observability and explain why they cost so much.

    40k GitHub stars~3.9k tokensUpdated today
    DevOps & CloudAuto-check passed

More from hashgraph-online/awesome-codex-plugins

All 714 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.3k 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.3k 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.3k 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.3k GitHub stars~2.4k tokensUpdated today
    Auto-check passed
  • Calle

    hashgraph-online/awesome-codex-plugins

    Use CALL-E from Codex through the calle CLI. An agent skill from hashgraph-online/awesome-codex-plugins.

    1.3k GitHub stars~2.9k 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.3k GitHub stars~618 tokensUpdated today
    Auto-check passed

Questions about Snr Densification

What does Snr Densification do?

A skill your agent uses 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…. Snr Densification is an agent skill from hashgraph-online/awesome-codex-plugins. 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.

When should I use Snr Densification?

Snr Densification fits situations like: A design has too much whitespace — when the SNR pendulum has swung from cluttered all the way to sparse; you need to add signal density without adding noise; reviewing a UI that feels thin; feels under-built.

How do I install Snr Densification in Claude Code?

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

How do I install Snr Densification in Codex?

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

Can I use Snr Densification 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 snr-densification -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/snr-densification, .gemini/skills/snr-densification, .github/skills/snr-densification and .opencode/skills/snr-densification in your project.

What does Snr Densification need to run?

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

Does Snr Densification 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 Snr Densification 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 Snr Densification use?

Snr Densification 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 Snr Densification use?

About 1.9k tokens (SKILL.md is roughly 7.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 990 tokens, read only when the agent opens those files.

What are the alternatives to Snr Densification?

Skills that share tags, products or a category with Snr Densification: Medical Topic Saturation And Whitespace Checker (aipoch/medical-research-skills, 2k stars), OmniRoute Budget Controls (diegosouzapw/OmniRoute, 74k stars), Video Template Frame Build Minimal (nexu-io/open-design, 100k stars) and CodeGraph Agent Eval (colbymchenry/codegraph, 74k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Snr Densification?

hashgraph-online (a GitHub organization) maintains it in hashgraph-online/awesome-codex-plugins, which has 1,255 GitHub stars. The repository holds 714 skills in this directory. The repository was last updated on October 9, 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.