New: 97,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 Grid Systems

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

A skill your agent uses when designing or evaluating a grid system — picking column counts, gutter widths, breakpoints, baseline grids, or modular grids.

Apache-2.0Auto-check passedFrontend & Design

Install Alignment Grid Systems

skills CLI
$ npx skills add hashgraph-online/awesome-codex-plugins --skill alignment-grid-systems -a claude-code

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

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

At a glance

A skill your agent uses when designing or evaluating a grid system — picking column counts, gutter widths, breakpoints, baseline grids, or modular grids.

  • Works in 3 steps: Show the grid. Toggle a CSS overlay… → Test at every breakpoint. A grid design… → The snap test. When designers move…
  • Evaluating a grid system — picking column counts
  • SKILL.md covers Grid types, Gutter widths, Margins and bleed and Responsive grid behavior, plus 5 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Alignment Grid Systems is an agent skill from hashgraph-online/awesome-codex-plugins. Use this skill when designing or evaluating a grid system — picking column counts, gutter widths, breakpoints, baseline grids, or modular grids. Trigger when designing a new layout system, when an existing layout feels disorderly, when picking responsive breakpoints, or when reviewing a design that "doesn't sit on a grid." Sub-aspect of alignment; read that first.

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

It sits in Frontend & Design, covering Responsive design. 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

  • Evaluating a grid system — picking column counts
  • Designing a new layout system
  • An existing layout feels disorderly
  • Picking responsive breakpoints

Example prompts

  • “t sit on a grid.”
  • “/alignment-grid-systems”

Workflow steps

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

  1. Show the grid. Toggle a CSS overlay showing column lines. Every element's edge should land on a column or a half-column.
  2. Test at every breakpoint. A grid design isn't done until you've checked 320, 768, 1024, 1280, and your widest target.
  3. The snap test. When designers move components, do they snap to the grid? If you find yourself fighting your own grid, the grid spec is…

What it can do on your machine

Read from SKILL.md and the folder at commit 16b4156. 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 css).

    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 Grid Systems loads about 1.3k tokens when it runs, and up to ~1.9k if it reads all its reference files. Until then it costs about 98 tokens; SKILL.md has 621 words of instructions outside code blocks.

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

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 16b4156, republished under its Apache-2.0 licence (© hashgraph-online). 621 words, ~1,335 tokens.

Download SKILL.mdSave it as .claude/skills/alignment-grid-systems/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
alignment-grid-systems
description
Use this skill when designing or evaluating a grid system — picking column counts, gutter widths, breakpoints, baseline grids, or modular grids. Trigger when designing a new layout system, when an existing layout feels disorderly, when picking responsive breakpoints, or when reviewing a design that "doesn't sit on a grid." Sub-aspect of `alignment`; read that first.

Grid systems

A grid is the explicit alignment scaffold a design uses. It provides the columns, rows, and gutters that every element snaps to. Most successful design systems share one important trait: they enforce a grid that designers and engineers can both reason about.

Grid types

Column grid

The most common type in web design. The page is divided into N equal columns separated by gutters; elements span 1 to N columns.

css
.layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;          /* gutter */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

Common column counts:

  • 12 columns — the de facto web standard. Divides cleanly into 2, 3, 4, 6 columns.
  • 8 columns — common on smaller widths.
  • 6 / 4 columns — common on tablet / mobile.
  • 24 columns — used in some dense enterprise systems for finer control.

The 12-column grid is the safe default; deviate only with specific reason.

Modular grid

Adds horizontal subdivision in addition to columns. Useful for image-heavy or magazine-style layouts where elements need to align both horizontally and vertically.

Baseline grid

A grid of horizontal lines at the leading interval of body text. Headings, body, and other type all snap to these baselines, producing perfect vertical rhythm. Hard to enforce in CSS but possible with careful line-height and margin discipline.

Hierarchical / asymmetric grid

A grid optimized for one specific layout — different columns for different regions of the page. Common in marketing layouts.

Gutter widths

The space between columns. Common scales:

  • Compact: 8–16px (dense apps, dashboards).
  • Standard: 16–24px (most apps).
  • Generous: 32–48px (marketing pages, magazine layouts).

The gutter should feel proportional to the column width. A 24px gutter on a 1200px-wide grid gives ~3% of horizontal space to gutters — a reasonable balance.

Margins and bleed

The space at the page edges (outside the grid):

  • Container max-width — typical 1140–1280px for content sites; up to 1440px for wider layouts.
  • Edge margin — the padding inside the container at the screen edge. Typical 16–48px depending on breakpoint.

Some layouts deliberately "bleed" content to the screen edges (full-bleed images, edge-flush nav). Mix bleed and contained content carefully; the rhythm needs to remain coherent.

Responsive grid behavior

A grid system needs to behave at every breakpoint. Common pattern:

css
.layout {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, 1fr);  /* mobile: 4 columns */
}

@media (min-width: 768px) {
  .layout {
    gap: 20px;
    grid-template-columns: repeat(8, 1fr);  /* tablet: 8 columns */
  }
}

@media (min-width: 1024px) {
  .layout {
    gap: 24px;
    grid-template-columns: repeat(12, 1fr);  /* desktop: 12 columns */
  }
}

Components reference column spans (grid-column: span 4); the meaning of "span 4" changes with breakpoint, but the component code stays the same.

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

Tools

  • CSS Grid is the modern foundation; flex layouts handle simpler cases.
  • Container queries (CSS) let components respond to their container's width, not just the viewport — useful in dashboards.
  • Storybook / design tokens can codify the grid spec.
  • Figma / Sketch grid plugins — most design tools have built-in grid support; use it.

Anti-patterns

  • Inconsistent gutters. A 16px gutter in one region, 24px in another. The eye reads it as different grids.
  • Pixel-perfect at one breakpoint, broken at others. A grid that works at 1440px but is misaligned at 1280px because columns weren't tested.
  • Mixing column-grid and free-form layout. Components designed to span 4 grid columns interspersed with pixel-positioned elements. The grid rhythm collapses.
  • Component widths that ignore the grid. Cards that are 287px wide in a 12-column grid where columns are 80px. Edges don't align with anything.

Heuristics

  1. Show the grid. Toggle a CSS overlay showing column lines. Every element's edge should land on a column or a half-column.
  2. Test at every breakpoint. A grid design isn't done until you've checked 320, 768, 1024, 1280, and your widest target.
  3. The snap test. When designers move components, do they snap to the grid? If you find yourself fighting your own grid, the grid spec is wrong.
  • alignment (parent).
  • alignment-text-and-numerics — alignment within typography and tabular data.
  • hierarchy-spatial — spatial hierarchy operates on a grid.
  • fibonacci-sequence — proportional grid stops often follow Fibonacci-like ratios.

Resources

  • Müller-Brockmann, J. Grid Systems in Graphic Design (1981) — the canonical text.
  • CSS Grid spec (W3C) — modern layout primitive.
  • Tailwind, Bootstrap grid docs — practical implementations.

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

  • SKILL.md
  • references/grid-frameworks.md

Open the folder on GitHubat commit 16b4156

Compare with similar skills

Alignment Grid Systems 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 Grid Systems compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Alignment Grid Systems this skillhashgraph-online/awesome-codex-plugins1.2k—~1.3kAutomated safety check: PassApache-2.0
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
Material 3hamen/material-3-skill1.5k2 repos~7.8kAutomated safety check: PassMIT
Antislop Layoutmobilemiqdadbadjuber/anti-slop4.6k1 repos~4.1kAutomated safety check: PassMIT
Trip Map Builderhiyeshu/trip-map-builder242—~1.7kAutomated safety check: PassNone
Frontend Design Routercode-yeongyu/oh-my-openagent70k—~5.3kAutomated safety check: PassCustom licence

Similar skills

  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed

  • Material 3

    hamen/material-3-skill

    Implement Google's Material Design 3 (Material You) UI system.

    1.5k GitHub starsUsed in 2 repos~7.8k tokens
    Frontend & DesignAuto-check passed

  • Antislop Layoutmobile

    miqdadbadjuber/anti-slop

    Mobile layout skill for antislop. An agent skill from miqdadbadjuber/anti-slop.

    4.6k GitHub starsUsed in 1 repo~4.1k tokens
    Frontend & DesignAuto-check passed

  • Trip Map Builder

    hiyeshu/trip-map-builder

    End-to-end trip planning: gather user constraints, build a reference itinerary, research locations and dining signals via 大众点评 + 小红书, then generate an interactive mobile-first map page (Leaflet +…

    242 GitHub stars~1.7k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • Frontend Design Router

    code-yeongyu/oh-my-openagent

    Routes frontend and UI work through design reference rulesets, with a design-system gate plus layout and print guidance, before any UI code is written.

    70k GitHub stars~5.3k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Local Testing

    lobehub/lobe-ui

    Local browser verification for the lobe-ui component library and documentation site.

    2.2k GitHub stars~2.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

More from hashgraph-online/awesome-codex-plugins

All 736 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

  • 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.2k GitHub stars~2.9k 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

Categories

Questions about Alignment Grid Systems

What does Alignment Grid Systems do?

A skill your agent uses when designing or evaluating a grid system — picking column counts, gutter widths, breakpoints, baseline grids, or modular grids. Alignment Grid Systems is an agent skill from hashgraph-online/awesome-codex-plugins. Use this skill when designing or evaluating a grid system — picking column counts, gutter widths, breakpoints, baseline grids, or modular grids.

When should I use Alignment Grid Systems?

Alignment Grid Systems fits situations like: evaluating a grid system — picking column counts; designing a new layout system; an existing layout feels disorderly; picking responsive breakpoints.

How do I install Alignment Grid Systems in Claude Code?

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

How do I install Alignment Grid Systems in Codex?

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

Can I use Alignment Grid Systems 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-grid-systems -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-grid-systems, .gemini/skills/alignment-grid-systems, .github/skills/alignment-grid-systems and .opencode/skills/alignment-grid-systems in your project.

What does Alignment Grid Systems need to run?

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

Does Alignment Grid Systems 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 Grid Systems 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 Grid Systems use?

Alignment Grid Systems 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 Grid Systems use?

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

What are the alternatives to Alignment Grid Systems?

Skills that share tags, products or a category with Alignment Grid Systems: UI Styling (Ohh-889/skyroc, 795 stars), Material 3 (hamen/material-3-skill, 1.5k stars), Antislop Layoutmobile (miqdadbadjuber/anti-slop, 4.6k stars) and Trip Map Builder (hiyeshu/trip-map-builder, 242 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Alignment Grid Systems?

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