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

Affordance Signifiers

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

A skill your agent uses when the design has interactive capability but users aren't seeing it — when the affordance is technically present but the signifier (the visible cue that tells users "you…

Apache-2.0Auto-check passed

Install Affordance Signifiers

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

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

GitHub CLI
$ gh skill install hashgraph-online/awesome-codex-plugins affordance-signifiers --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/interaction-and-control-principles/skills/affordance-signifiers .claude/skills/affordance-signifiers && 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
affordance-signifiers
GitHub stars
1.3k
Token cost
~1.8k tokens
SKILL.md length
763 words
Files
2 (incl. references)
Skills in repo
716
Repo updated
First seen
Licence
Apache-2.0

At a glance

A skill your agent uses when the design has interactive capability but users aren't seeing it — when the affordance is technically present but the signifier (the visible cue that tells users "you…

  • Works in 3 steps: The signifier audit. For each… → The role-vs-signifier check. Does the… → The state coverage check. For each…
  • Reviewing flat-design UIs where everything looks the same
  • SKILL.md covers The signifier inventory, Signifier strength must match…, Hover, focus, and active state… and Signifier patterns by…, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Affordance Signifiers is an agent skill from hashgraph-online/awesome-codex-plugins. Use this skill when the design has interactive capability but users aren't seeing it — when the affordance is technically present but the signifier (the visible cue that tells users "you can do this") is missing or weak. Trigger when reviewing flat-design UIs where everything looks the same, when designing custom controls, when stakeholders ask "should this be more obvious?", or when picking signifier strength for primary vs. secondary actions. Sub-aspect of affordance; read that first.

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

  • Reviewing flat-design UIs where everything looks the same
  • Designing custom controls
  • Stakeholders ask should this be more obvious?
  • Picking signifier strength for primary vs

Example prompts

  • “you can do this”
  • “should this be more obvious?”
  • “/affordance-signifiers”

Workflow steps

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

  1. The signifier audit. For each interactive element on the page, list its signifiers. If the count is 0–1, signifier is too weak. 2+ stacked…
  2. The role-vs-signifier check. Does the visual emphasis of each element match its role importance? Primary action should have the strongest…
  3. The state coverage check. For each interactive element, do you have static, hover, focus, active, and disabled signifiers? Missing focus =…

What it can do on your machine

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

Affordance Signifiers loads about 1.8k tokens when it runs, and up to ~2.6k if it reads all its reference files. Until then it costs about 129 tokens; SKILL.md has 763 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~129
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.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 3e1456a, republished under its Apache-2.0 licence (© hashgraph-online). 763 words, ~1,811 tokens.

Download SKILL.mdSave it as .claude/skills/affordance-signifiers/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
affordance-signifiers
description
Use this skill when the design has interactive capability but users aren't *seeing* it — when the affordance is technically present but the signifier (the visible cue that tells users "you can do this") is missing or weak. Trigger when reviewing flat-design UIs where everything looks the same, when designing custom controls, when stakeholders ask "should this be more obvious?", or when picking signifier strength for primary vs. secondary actions. Sub-aspect of `affordance`; read that first.

Signifiers: making affordance perceivable

In Norman's later refinement (2008), he distinguished affordance (the underlying possibility — a button can be pressed) from signifier (the visible cue that tells the user about the affordance — the button looks pressable). The distinction matters because designers control signifiers; affordances often exist regardless. A button that's missing a signifier still affords pressing — but no one knows.

The signifier inventory

Every interactive element should carry one or more signifiers. The strongest are perceivable preattentively (within the first 200ms of viewing) without conscious thought.

Strong signifiers
  • Filled background with a brand or neutral color, distinct from the page background. Reads as "object."
  • Visible border outlining the interactive region. Reads as "discrete element you can act on."
  • Drop shadow / elevation suggesting the element floats above content.
  • Distinctive shape (rounded rectangle for buttons, pill shape for chips, circle for FABs).
  • Underline for links.
Medium signifiers
  • Color difference from surrounding text (the classic blue link).
  • Cursor change on hover (cursor: pointer). Desktop only.
  • Hover state (color shift, shadow change). Desktop only.
  • Focus ring when keyboard-focused. Critical for keyboard users.
  • Iconography (a pencil for edit, a trash for delete) for users who recognize the convention.
Weak signifiers
  • Subtle color tint (5% darker than background). Easy to miss.
  • Tiny chevron or arrow at the edge. Easy to miss.
  • Implicit position (e.g., "the bottom right of every card has the row actions"). Requires learning.

For new-user surfaces, lean on strong signifiers. For dense expert tools, medium signifiers are acceptable because users develop spatial memory.

Signifier strength must match action stakes

A useful rule: signifier strength should match the action's importance and consequence.

Primary action (Submit, Buy, Continue)
  → Strongest signifier: filled background + brand color + cursor + hover

Secondary action (Cancel, Save Draft)
  → Medium signifier: outlined border + cursor + hover

Tertiary action (Help, More info)
  → Lighter signifier: text-only + color + underline on hover

Destructive action (Delete, Remove)
  → Different signifier: distinct color (red) + cursor + hover, often after a confirmation step

When the primary action has the same signifier as the tertiary, the user doesn't know which is most important. Signifier strength is a hierarchy decision.

Hover, focus, and active state signifiers

Static signifiers tell the user "this is interactive." Response signifiers tell them "you've engaged it."

  • Hover (mouse over): color shift, shadow lift, slight scale change.
  • Focus (keyboard tab to): visible focus ring (outline: 2px solid var(--ring); outline-offset: 2px).
  • Active (pressing/holding): darker color, slight inset shadow, no scale change.
  • Disabled: lighter color, no hover/active response, cursor: not-allowed.

These should layer. A button with a strong static signifier should still respond to hover and focus.

css
.btn {
  /* static signifier */
  background: hsl(220 90% 50%);
  color: white;
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 100ms;
}
.btn:hover { background: hsl(220 90% 45%); }
.btn:focus-visible {
  outline: 2px solid hsl(220 90% 50%);
  outline-offset: 2px;
}
.btn:active { background: hsl(220 90% 40%); }
.btn[disabled] {
  background: hsl(0 0% 92%);
  color: hsl(0 0% 50%);
  cursor: not-allowed;
}

Five distinct states; each communicates something different. Stripping any of them weakens the signifier system.

Signifier patterns by component type

Button
  • Filled or outlined background.
  • Distinct shape (typically rounded rectangle).
  • Cursor pointer.
  • Hover/focus/active states.
  • Always pair with a verb label.
  • Color (typically brand).
  • Underline (always or on hover, depending on context).
  • Cursor pointer.
  • Distinct from surrounding body text.
Input field
  • Distinct background (usually different from surrounding page).
  • Border (visible or visible on focus).
  • Cursor text on hover.
  • Focus ring or border-color change on focus.
Show full SKILL.md (306 more words)Show less
Toggle / switch
  • Distinctive shape (pill with circular slider).
  • Animated transition between states.
  • Strong color difference between on and off.
Drag handle
  • Iconographic signifier (six dots, two-line "grip").
  • cursor: grab on hover, cursor: grabbing on active.
  • Often dimmed in still state, brighter on hover.
Disclosure trigger (accordion, "More")
  • Chevron or plus/minus icon.
  • Animation on toggle.
  • Cursor pointer.
  • Often whole row is hover-responsive, not just the icon.

Anti-patterns

  • Signifier-stripped flat design. A "minimalist" button with no border, no background, no shadow. Identical to surrounding text except for slight color. Users miss it.
  • Hover-only signifier. Element looks like content; only on hover does it reveal it's a button. Touch users see no signifier; keyboard users may not focus it; even mouse users may not hover.
  • Signifier mismatch with role. A "tertiary" action (like a help link) given the strongest signifier — users press it expecting the primary action.
  • Inconsistent signifiers for the same role. "Submit" buttons vary in style across pages. Each page is a re-learning.
  • Disabled controls without anti-affordance. A disabled button that looks identical to enabled. Users tap; nothing happens; confusion.

Heuristics

  1. The signifier audit. For each interactive element on the page, list its signifiers. If the count is 0–1, signifier is too weak. 2+ stacked signifiers (background + cursor + hover) is the safer baseline.
  2. The role-vs-signifier check. Does the visual emphasis of each element match its role importance? Primary action should have the strongest signifier; tertiary the weakest.
  3. The state coverage check. For each interactive element, do you have static, hover, focus, active, and disabled signifiers? Missing focus = inaccessible to keyboard. Missing active = no press feedback.
  • affordance (parent).
  • affordance-false-and-anti — the inverse problem: when signifiers suggest interactivity that isn't there.
  • hierarchy (perception) — signifier strength is a hierarchy decision.
  • accessibility-perceivable (process) — signifiers must be perceivable across abilities.
  • feedback-loop — response signifiers (hover, focus, active) are micro-feedback.

© 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/interaction-and-control-principles/skills/affordance-signifiers of hashgraph-online/awesome-codex-plugins.

  • SKILL.md
  • references/signifier-design-decisions.md

Open the folder on GitHubat commit 3e1456a

Compare with similar skills

Affordance Signifiers 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.

Affordance Signifiers compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Affordance Signifiers this skillhashgraph-online/awesome-codex-plugins1.3k—~1.8kAutomated safety check: PassApache-2.0
Product Capabilityaffaan-m/ECC276k2 repos~1.1kAutomated safety check: PassMIT
Artifact Capabilitiesasgeirtj/system_prompts_leaks69k—~4.3kAutomated safety check: PassCC0-1.0
Remotion Interactivityremotion-dev/remotion63k5 repos~4.8kAutomated safety check: PassCustom licence
Firecrawl Interact Integrationfirecrawl/firecrawl190k1 repos~731Automated safety check: PassISC
Product Capabilityaffaan-m/ECC276k—~439Automated safety check: PassMIT

Similar skills

  • Product Capability

    affaan-m/ECC

    Translate PRD intent, roadmap asks, or product discussions into an implementation-ready capability plan that exposes constraints, invariants, interfaces, and unresolved decisions before…

    276k GitHub starsUsed in 2 repos~1.1k tokens
    Product & Project ManagementAuto-check passed

  • Artifact Capabilities

    asgeirtj/system_prompts_leaks

    Runtime capabilities a published Artifact page can be granted — behavior static HTML cannot provide on its own, such as the page reading live or connected data, remembering what people do on it (a…

    69k GitHub stars~4.3k tokensUpdated today
    Auto-check passed

  • Remotion Interactivity

    remotion-dev/remotion

    Official

    Structure Remotion markup for interactivity. An agent skill from remotion-dev/remotion.

    63k GitHub starsUsed in 5 repos~4.8k tokens
    Media & CreativeAuto-check passed

  • Firecrawl Interact Integration

    firecrawl/firecrawl

    Guides adding Firecrawl's /interact endpoint to product code for pages that need clicks, forms, pagination or logged-in flows beyond plain scraping.

    190k GitHub starsUsed in 1 repo~731 tokens
    Data & AnalyticsAuto-check passed

  • Product Capability

    affaan-m/ECC

    将PRD意图、路线图需求或产品讨论转化为可实施的方案计划，在开始多服务工作之前暴露约束、不变性、接口和未解决的决策。当用户需要ECC原生的PRD到SRS通道，而不是模糊的规划文本时使用。

    276k GitHub stars~439 tokensUpdated today
    Product & Project ManagementAuto-check passed

  • Interaction To Next Paint

    thedaviddias/Front-End-Checklist

    A skill your agent uses when auditing slow page loads, heavy assets, or rendering delays related to Optimize interaction to next paint.

    74k GitHub stars~441 tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

More from hashgraph-online/awesome-codex-plugins

All 716 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 Affordance Signifiers

What does Affordance Signifiers do?

A skill your agent uses when the design has interactive capability but users aren't seeing it — when the affordance is technically present but the signifier (the visible cue that tells users "you…. Affordance Signifiers is an agent skill from hashgraph-online/awesome-codex-plugins. Use this skill when the design has interactive capability but users aren't seeing it — when the affordance is technically present but the signifier (the visible cue that tells users "you can do this") is missing or weak.

When should I use Affordance Signifiers?

Affordance Signifiers fits situations like: reviewing flat-design UIs where everything looks the same; designing custom controls; stakeholders ask should this be more obvious?; picking signifier strength for primary vs.

How do I install Affordance Signifiers in Claude Code?

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

How do I install Affordance Signifiers in Codex?

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

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

What does Affordance Signifiers need to run?

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

Does Affordance Signifiers 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 Affordance Signifiers 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 Affordance Signifiers use?

Affordance Signifiers 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 Affordance Signifiers use?

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

What are the alternatives to Affordance Signifiers?

Skills that share tags, products or a category with Affordance Signifiers: Product Capability (affaan-m/ECC, 276k stars), Artifact Capabilities (asgeirtj/system_prompts_leaks, 69k stars), Remotion Interactivity (remotion-dev/remotion, 63k stars) and Firecrawl Interact Integration (firecrawl/firecrawl, 190k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Affordance Signifiers?

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