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

Perception Router

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

A skill your agent uses whenever a design task involves visual perception, layout, hierarchy, grouping, scanning order, attention, color organization, or composition — regardless of framework…

Apache-2.0Auto-check passedFrontend & Design

Install Perception Router

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

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

GitHub CLI
$ gh skill install hashgraph-online/awesome-codex-plugins perception-router --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/perception-router .claude/skills/perception-router && 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
perception-router
GitHub stars
1.2k
Token cost
~1.7k tokens
SKILL.md length
646 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 whenever a design task involves visual perception, layout, hierarchy, grouping, scanning order, attention, color organization, or composition — regardless of framework…

  • Works in 4 steps: Name the surface in concrete terms: "B2B… → Pick 3–6 decisive principles from the… → Read those skills. Each principle skill… → …
  • A design task involves visual perception
  • SKILL.md covers How to route, Principles in this plugin, Heuristic for which to read… and Working method, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Perception Router is an agent skill from hashgraph-online/awesome-codex-plugins. Use this skill whenever a design task involves visual perception, layout, hierarchy, grouping, scanning order, attention, color organization, or composition — regardless of framework, design system, or platform. Trigger when the user is laying out a screen, page, slide, poster, dashboard, mobile view, or print piece; choosing what to emphasize; deciding how things should group; picking type sizes, spacing, or color roles; reviewing why something "looks busy" or "feels empty"; or asking "where should the eye land…

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

It sits in Frontend & Design, covering Slides and decks and Design systems. 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 task involves visual perception
  • Color organization
  • Composition — regardless of framework
  • The user is laying out a screen

Example prompts

  • “looks busy”
  • “feels empty”
  • “where should the eye land first.”
  • “/perception-router”

Workflow steps

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

  1. Name the surface in concrete terms: "B2B SaaS settings page with three sections," not "settings page."
  2. Pick 3–6 decisive principles from the list above. Most surfaces are dominated by Hierarchy, Proximity, Alignment, and Signal-to-Noise.
  3. Read those skills. Each principle skill includes a definition, when-to-apply guidance, anti-patterns, and worked examples.
  4. Make the decision and name the trade-off. Most principles trade against another.

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.

    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

Perception Router loads about 1.7k tokens when it runs, and up to ~2.7k if it reads all its reference files. Until then it costs about 197 tokens; SKILL.md has 646 words of instructions outside code blocks.

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

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). 646 words, ~1,693 tokens.

Download SKILL.mdSave it as .claude/skills/perception-router/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
perception-router
description
Use this skill whenever a design task involves visual perception, layout, hierarchy, grouping, scanning order, attention, color organization, or composition — regardless of framework, design system, or platform. Trigger when the user is laying out a screen, page, slide, poster, dashboard, mobile view, or print piece; choosing what to emphasize; deciding how things should group; picking type sizes, spacing, or color roles; reviewing why something "looks busy" or "feels empty"; or asking "where should the eye land first." Routes the model to the right perception principle in this plugin and surfaces the most-decisive ones for the surface in question. Framework-agnostic: applies to web, mobile, print, physical product, slide design, and information graphics alike.

Perception & hierarchy — router

This plugin holds the principles that govern how the eye organizes a composition: what gets seen first, what groups with what, what reads as noise, what reads as quality. They are framework-agnostic; the same principle applies to a shadcn/ui card, a Material chip, a Figma slide, a poster, or a printed report.

How to route

Read the task and identify the principles that decide it. Most non-trivial perception tasks are dominated by 3–6 principles. Read those principles' skills in full; treat the rest as background.

Principles in this plugin

The list below is the full inventory of perception-related principles from Universal Principles of Design covered by this plugin. Each principle has its own skill (and where useful, sub-aspect skills) under skills/. Principles marked [full] have reference-grade skill files; the others are planned and will be added in subsequent passes.

Visual hierarchy and emphasis
  • hierarchy [full] — the ranking of importance among visible elements; size, weight, color, position.
    • Sub-skills: hierarchy-typographic, hierarchy-spatial, hierarchy-color-and-tone.
  • alignment — elements share an invisible axis; misalignment reads as disorder.
  • area-alignment — alignment by visual mass rather than bounding box.
  • signal-to-noise-ratio [full] — the ratio of meaningful information to decoration.
    • Sub-skills: snr-densification, snr-decoration-removal, snr-emphasis-economy.
  • highlighting — emphasis works only when sparing.
  • von-restorff-effect — the item that differs is remembered and noticed first.
  • red-effect — red attracts disproportionate attention; reserve for genuine urgency.
  • horror-vacui — the impulse to fill empty space; whitespace is a feature.
  • layering — distinct visual planes (z, elevation) reduce noise.
  • gutenberg-diagram — Z-pattern reading on uniform layouts.
Gestalt grouping
  • proximity [full] — nearby items are perceived as a group.
    • Sub-skills: proximity-form-fields, proximity-data-tables, proximity-navigation.
  • similarity — items that look alike are perceived as related.
  • closure — the eye completes incomplete shapes.
  • common-fate — elements moving together are perceived as related.
  • figure-ground-relationship — every composition has a focused figure and a recessive ground.
  • good-continuation — aligned edges read as connected.
  • uniform-connectedness — a shared region binds elements more strongly than proximity alone.
  • law-of-pragnanz — the eye prefers the simplest valid interpretation.
  • contour-bias — sharp angles feel hostile; rounded corners feel friendly.
Proportion, rhythm, and depth
  • golden-ratio — 1:1.618; useful as a starting proportion for hero compositions.
  • fibonacci-sequence — successive Fibonacci ratios produce natural-feeling spacing scales.
  • rule-of-thirds — split a composition into thirds; place focal points on intersections.
  • symmetry — bilateral, radial, or translational; stable but can feel static.
  • self-similarity — fractal repetition at multiple scales creates coherence.
  • cathedral-effect — high "ceilings" (whitespace) invite expansive thinking; low ones invite focus.
  • three-dimensional-projection — subtle depth cues (shadow, scale) clarify layering.
Show full SKILL.md (248 more words)Show less
Typography and color
  • legibility — character distinctness; a property of typeface and rendering.
  • readability — sustained reading speed; a property of layout (length, leading, contrast).
  • color — hue, saturation, value; cultural meaning; accessibility.
  • gloss-bias — glossy surfaces read as desirable.
  • top-down-lighting-bias — humans assume light from above; shadows below = raised, shadows above = recessed.
Attention quirks
  • inattentional-blindness — focused users don't see unexpected elements.
  • threat-detection — sharp angles, snake-like shapes, angry faces detected fast.
  • orientation-sensitivity — vertical and horizontal lines processed faster than oblique.

Heuristic for which to read first

  • Designing a page or screen layout → hierarchy, alignment, proximity, signal-to-noise-ratio.
  • Reviewing a "busy" or "noisy" UI → signal-to-noise-ratio, highlighting, horror-vacui.
  • Form layout → proximity, alignment, good-continuation, gutenberg-diagram.
  • Data table or dashboard → hierarchy, signal-to-noise-ratio, legibility, gestalt similarity.
  • Marketing / hero surface → hierarchy, golden-ratio or rule-of-thirds, gloss-bias, cathedral-effect.
  • Empty / loading / error states → hierarchy, horror-vacui, figure-ground-relationship.
  • Brand / visual-identity decisions → contour-bias, color, symmetry, self-similarity.
  • Choosing color tokens → color, red-effect, top-down-lighting-bias, plus accessibility checks (see process-and-robustness-principles).

Working method

  1. Name the surface in concrete terms: "B2B SaaS settings page with three sections," not "settings page."
  2. Pick 3–6 decisive principles from the list above. Most surfaces are dominated by Hierarchy, Proximity, Alignment, and Signal-to-Noise.
  3. Read those skills. Each principle skill includes a definition, when-to-apply guidance, anti-patterns, and worked examples.
  4. Make the decision and name the trade-off. Most principles trade against another.

Cross-plugin pointers

  • For learnability (mental models, complexity, defaults, recognition), see cognition-and-learnability-principles.
  • For behavior (affordance, feedback, errors, control), see interaction-and-control-principles.
  • For brand and tone, see aesthetics-and-emotion-principles.
  • For accessibility and edge cases, see process-and-robustness-principles.

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

  • SKILL.md
  • references/further-reading.md

Open the folder on GitHubat commit 78497e5

Compare with similar skills

Perception Router 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.

Perception Router compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Perception Router this skillhashgraph-online/awesome-codex-plugins1.2k—~1.7kAutomated safety check: PassApache-2.0
Superdesignsuperdesigndev/superdesign-skill630—~4.1kAutomated safety check: PassMIT
Visual Stylecalesthio/OpenMontage65k—~1.5kAutomated safety check: PassAGPL-3.0
Baoyu DesignDejavuMoe/Smoji1141 repos~2.7kAutomated safety check: PassMIT
Visualizedisplay-dev/visualize132—~7.4kAutomated safety check: PassMIT
Design SystemOhh-889/skyroc79511 repos~1.7kAutomated safety check: PassMIT

Similar skills

  • Superdesign

    superdesigndev/superdesign-skill

    Design or redesign frontend UI, presentations, and graphics on the Superdesign canvas with a choice of leading AI models.

    630 GitHub stars~4.1k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Visual Style

    calesthio/OpenMontage

    Create, extract, and apply portable visual design systems via visual-style.md files.

    65k GitHub stars~1.5k tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed

  • Baoyu Design

    DejavuMoe/Smoji

    Create polished design artifacts as self-contained HTML: UI mockups, interactive prototypes, wireframes, landing pages, dashboards, app screens, mobile apps, slide decks (a.k.a.

    114 GitHub starsUsed in 1 repo~2.7k tokens
    Frontend & DesignAuto-check passed

  • Visualize

    display-dev/visualize

    Generate beautiful, on-brand HTML artifacts — reports, diagrams, diff reviews, slide decks, plans, recaps, dashboards.

    132 GitHub stars~7.4k tokensUpdated 22 days ago
    Frontend & DesignAuto-check passed

  • Design System

    Ohh-889/skyroc

    Token architecture, component specifications, and slide generation.

    795 GitHub starsUsed in 11 repos~1.7k tokens
    Frontend & DesignAuto-check passed

  • Design

    Ohh-889/skyroc

    Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations…

    795 GitHub starsUsed in 9 repos~3.1k tokens
    Frontend & DesignAuto-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 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

Categories

Questions about Perception Router

What does Perception Router do?

A skill your agent uses whenever a design task involves visual perception, layout, hierarchy, grouping, scanning order, attention, color organization, or composition — regardless of framework…. Perception Router is an agent skill from hashgraph-online/awesome-codex-plugins. Use this skill whenever a design task involves visual perception, layout, hierarchy, grouping, scanning order, attention, color organization, or composition — regardless of framework, design system, or platform.

When should I use Perception Router?

Perception Router fits situations like: A design task involves visual perception; color organization; composition — regardless of framework; the user is laying out a screen.

How do I install Perception Router in Claude Code?

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

How do I install Perception Router in Codex?

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

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

What does Perception Router need to run?

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

Does Perception Router 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 Perception Router 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 Perception Router use?

Perception Router 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 Perception Router use?

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

What are the alternatives to Perception Router?

Skills that share tags, products or a category with Perception Router: Superdesign (superdesigndev/superdesign-skill, 630 stars), Visual Style (calesthio/OpenMontage, 65k stars), Baoyu Design (DejavuMoe/Smoji, 114 stars) and Visualize (display-dev/visualize, 132 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Perception Router?

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.