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

Alignment Text And Numerics

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

A skill your agent uses when designing text-alignment and numeric-alignment decisions — choosing between left, right, center, and justified text; right-aligning numeric columns in tables; aligning…

Apache-2.0Auto-check passed

Install Alignment Text And Numerics

skills CLI
$ npx skills add hashgraph-online/awesome-codex-plugins --skill alignment-text-and-numerics -a claude-code

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

GitHub CLI
$ gh skill install hashgraph-online/awesome-codex-plugins alignment-text-and-numerics --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/alignment-text-and-numerics .claude/skills/alignment-text-and-numerics && 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
alignment-text-and-numerics
GitHub stars
1.3k
Token cost
~1.9k tokens
SKILL.md length
838 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 designing text-alignment and numeric-alignment decisions — choosing between left, right, center, and justified text; right-aligning numeric columns in tables; aligning…

  • Works in 4 steps: The numeric-comparison test. Look down a… → The reading-speed test. Read centered… → The label-alignment audit. Across the… → …
  • Designing text-alignment and numeric-alignment decisions — choosing between left
  • SKILL.md covers Text alignment, Numeric alignment, Label-input alignment and Anti-patterns, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Alignment Text And Numerics is an agent skill from hashgraph-online/awesome-codex-plugins. Use this skill when designing text-alignment and numeric-alignment decisions — choosing between left, right, center, and justified text; right-aligning numeric columns in tables; aligning labels relative to inputs; handling decimal alignment for currency. Trigger when laying out body content, designing tables with mixed types, or fixing alignment issues in dense data displays. Sub-aspect of alignment; read that first.

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/typography-alignment-reference.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

  • Designing text-alignment and numeric-alignment decisions — choosing between left
  • Right-aligning numeric columns in tables
  • Aligning labels relative to inputs
  • Handling decimal alignment for currency

Example prompts

  • “/alignment-text-and-numerics”

Workflow steps

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

  1. The numeric-comparison test. Look down a numeric column. Can you spot the largest value at a glance? If not, alignment is wrong.
  2. The reading-speed test. Read centered body text vs. left-aligned. Notice the cognitive cost. (Then never use centered body again.)
  3. The label-alignment audit. Across the form, are all labels aligned the same way? If not, fix.
  4. The currency precision test. All currency in a column has the same decimal places. If "$2.5" sits next to "$1,234.00", fix the precision.

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, css and javascript).

    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

Alignment Text And Numerics 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 113 tokens; SKILL.md has 838 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~113
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). 838 words, ~1,850 tokens.

Download SKILL.mdSave it as .claude/skills/alignment-text-and-numerics/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
alignment-text-and-numerics
description
Use this skill when designing text-alignment and numeric-alignment decisions — choosing between left, right, center, and justified text; right-aligning numeric columns in tables; aligning labels relative to inputs; handling decimal alignment for currency. Trigger when laying out body content, designing tables with mixed types, or fixing alignment issues in dense data displays. Sub-aspect of `alignment`; read that first.

Text and numeric alignment

Text and numbers behave differently. Text wants to flow naturally, with predictable left edges so the eye can return to a known column. Numbers want to align by digit position so the user can compare magnitudes. Mixing them in a table requires deliberate alignment per column.

Text alignment

Left-aligned (the default for body)

In LTR scripts, body text should almost always be left-aligned. The reasons:

  • Predictable left edge — the eye returns to a known x-position on each line.
  • Ragged-right edge — variations in line length signal where each line ends.
  • No "rivers" of white space that justified text creates.

Best for: paragraphs, descriptions, body copy, lists, captions.

Right-aligned

Used in narrow contexts:

  • Numeric columns in tables so digit positions stack.
  • Labels in two-column forms (label-flush-right, input-flush-left) so the gap between label and input is consistent regardless of label length.
  • Some footer text in mixed-direction layouts.
  • Content in RTL scripts (Arabic, Hebrew) — the equivalent of left-aligned in LTR.

Avoid for body content in LTR scripts.

Center-aligned

Use sparingly and only for short content:

  • Hero headlines (one line, focal point).
  • Page titles above content.
  • Button labels (centered within the button).
  • Single-line CTAs ("Sign up below" → button).
  • Quotations or epigraphs.

Avoid for paragraphs of body text. Center-aligned body is significantly slower to read because each line starts at a different x-position.

Justified (both edges flush)

Used in print where typesetting can hyphenate and adjust spacing precisely. On screens:

  • Without hyphenation: don't. The "rivers" of white space between widely-spaced words are distracting.
  • With CSS hyphens: auto: acceptable for long-form prose, particularly in narrow columns.

Most modern web design uses ragged-right (left-aligned) by default.

Numeric alignment

Right-align all numeric columns

Numbers should right-align so that digit positions stack:

        1.00
       12.50
      135.00
    9,876.50

The eye scans the right edge to compare magnitudes. Left-aligned, the same numbers don't compare:

1.00
12.50
135.00
9,876.50

Now the user has to read each number to compare; the columnar advantage is lost.

Use tabular numerals (font-variant-numeric: tabular-nums)

Most fonts ship with proportional numerals (each digit has slightly different width — 1 is narrower than 8). For columns of numbers, this means digit positions don't quite stack even when right-aligned. Use tabular numerals instead:

css
.numeric-column {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

Now every digit occupies the same width; columns align perfectly.

Decimal alignment

When numbers have varying decimal places, you sometimes want to align on the decimal point rather than the right edge. CSS doesn't make this easy; the workarounds:

  • Force consistent decimal places ("$2.50" not "$2.5") so right-alignment serves as decimal alignment.
  • Use a span around the integer part and another around the decimal, with explicit width on the integer part. Fragile; reserve for cases where it matters.

For most products, forcing consistent decimal places is the simpler answer.

Currency

Display currency with locale-appropriate symbol position and separators:

js
new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(1234.5);
// "$1,234.50"

new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(1234.5);
// "1.234,50 €"

Right-align currency columns; use tabular numerals.

Label-input alignment

Three common patterns:

Top-aligned labels (most common in vertical forms)

Label sits above input. No alignment between label and input axis (they're stacked vertically).

html
<label for="email">Email</label>
<input id="email" type="email" />

Pros: simplest; works at any width; labels can be long without affecting layout.

Show full SKILL.md (339 more words)Show less
Right-aligned labels (label-input pairs in two columns)

Label flush-right against input flush-left. The gap between is consistent regardless of label length.

html
<style>
  .field-row { display: grid; grid-template-columns: 8rem 1fr; gap: 12px 16px; }
  .field-row label { text-align: right; padding-top: 0.5rem; }
</style>

<div class="field-row">
  <label for="email">Email</label>
  <input id="email" />
</div>

Pros: scannable for dense settings; predictable column widths. Cons: label width must accommodate the longest label; long labels look awkward right-aligned.

Left-aligned labels (label-input pairs)

Both label and input left-aligned in their columns. The gap between label and input varies with label length, creating a slight visual ragged edge.

Pros: more relaxed; easier to read longer labels. Cons: less scannable; the variable gap reads as messier.

For most app settings: top-aligned labels. For compact dense forms: right-aligned. Left-aligned columnar is a third choice that some prefer aesthetically.

Anti-patterns

  • Centered body text. Reading speed drops 30%+ for centered paragraphs.
  • Left-aligned numeric columns. Magnitudes can't be compared.
  • Mixed proportional + tabular numerals across a single column. Drift accumulates.
  • Inconsistent decimal places. "$2", "$2.5", "$2.50" in the same column. Right-alignment doesn't save it.
  • Justified body text without hyphenation. Rivers of white space.
  • Centering headers but not body without a clear reason. The reading rhythm jumps.
  • Mixing label alignment within a form. Some labels left, some right, some top. Each switch is a re-orientation.

Heuristics

  1. The numeric-comparison test. Look down a numeric column. Can you spot the largest value at a glance? If not, alignment is wrong.
  2. The reading-speed test. Read centered body text vs. left-aligned. Notice the cognitive cost. (Then never use centered body again.)
  3. The label-alignment audit. Across the form, are all labels aligned the same way? If not, fix.
  4. The currency precision test. All currency in a column has the same decimal places. If "$2.5" sits next to "$1,234.00", fix the precision.
  • alignment (parent).
  • alignment-grid-systems — the structural grid that text and numbers align within.
  • legibility and readability — typography decisions interact with alignment.
  • proximity-data-tables — table-specific alignment patterns.

Resources

  • Bringhurst, R. The Elements of Typographic Style — comprehensive reference on text alignment in typography.
  • Tufte, E. The Visual Display of Quantitative Information — alignment in tabular data.
  • Material Design / Apple HIG — both document text and numeric alignment conventions.

© 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/alignment-text-and-numerics of hashgraph-online/awesome-codex-plugins.

  • SKILL.md
  • references/typography-alignment-reference.md

Open the folder on GitHubat commit 9e7b281

Compare with similar skills

Alignment Text And Numerics 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.

Alignment Text And Numerics compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Alignment Text And Numerics this skillhashgraph-online/awesome-codex-plugins1.3k—~1.9kAutomated safety check: PassApache-2.0
Design Systemaffaan-m/ECC276k—~698Automated safety check: PassMIT
Design Guidepaperclipai/paperclip99k1 repos~3.1kAutomated safety check: PassMIT
Design Audit Against Rams' Principlesthedotmack/claude-mem99k—~4.6kAutomated safety check: PassApache-2.0
Figma Design to Codewarpdotdev/warp65k4 repos~2.9kAutomated safety check: PassAGPL-3.0
Design Consultationgarrytan/gstack136k—~15kAutomated safety check: NotesMIT

Similar skills

  • 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…

    276k GitHub stars~698 tokensUpdated 4 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.

    99k GitHub stars~4.6k tokensUpdated today
    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

  • Product Design Workflow Bundle

    XiaomiMiMo/MiMo-Code

    Entry point to a bundle of product design workflows covering context, research, audits, ideation, URL or image to code, design QA and sharing a prototype.

    14k GitHub stars~721 tokensUpdated today
    Frontend & DesignAuto-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 Alignment Text And Numerics

What does Alignment Text And Numerics do?

A skill your agent uses when designing text-alignment and numeric-alignment decisions — choosing between left, right, center, and justified text; right-aligning numeric columns in tables; aligning…. Alignment Text And Numerics is an agent skill from hashgraph-online/awesome-codex-plugins. Use this skill when designing text-alignment and numeric-alignment decisions — choosing between left, right, center, and justified text; right-aligning numeric columns in tables; aligning labels relative to inputs; handling decimal alignment for currency.

When should I use Alignment Text And Numerics?

Alignment Text And Numerics fits situations like: designing text-alignment and numeric-alignment decisions — choosing between left; right-aligning numeric columns in tables; aligning labels relative to inputs; handling decimal alignment for currency.

How do I install Alignment Text And Numerics in Claude Code?

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

How do I install Alignment Text And Numerics in Codex?

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

Can I use Alignment Text And Numerics 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 alignment-text-and-numerics -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/alignment-text-and-numerics, .gemini/skills/alignment-text-and-numerics, .github/skills/alignment-text-and-numerics and .opencode/skills/alignment-text-and-numerics in your project.

What does Alignment Text And Numerics need to run?

SKILL.md names no scripts, command-line tools or credentials: Alignment Text And Numerics is instructions for the agent only.

Does Alignment Text And Numerics 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 Alignment Text And Numerics 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 Alignment Text And Numerics use?

Alignment Text And Numerics 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 Alignment Text And Numerics 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 970 tokens, read only when the agent opens those files.

What are the alternatives to Alignment Text And Numerics?

Skills that share tags, products or a category with Alignment Text And Numerics: Design System (affaan-m/ECC, 276k stars), Design Guide (paperclipai/paperclip, 99k stars), Design Audit Against Rams' Principles (thedotmack/claude-mem, 99k stars) and Figma Design to Code (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Alignment Text And Numerics?

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.