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

Critique Affordance

by Owl-Listener in Owl-Listener/designer-skills

Critique a rendered screen's affordances — what looks clickable, state visibility, CTA clarity, and action discoverability.

MITAuto-check passedMarketing & SEO

Install Critique Affordance

skills CLI
$ npx skills add Owl-Listener/designer-skills --skill critique-affordance -a claude-code

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

GitHub CLI
$ gh skill install Owl-Listener/designer-skills critique-affordance --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/Owl-Listener/designer-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/visual-critique/skills/critique-affordance .claude/skills/critique-affordance && 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
critique-affordance
GitHub stars
2.9k
Used in
1 other repo
Token cost
~805 tokens
SKILL.md length
409 words
Files
1
Skills in repo
107
Repo updated
First seen
Licence
MIT

At a glance

Critique a rendered screen's affordances — what looks clickable, state visibility, CTA clarity, and action discoverability.

  • Works in 3 steps: Observation — what you see (neutral,… → Problem — what is broken and why it… → Fix — a specific, actionable change
  • Reviewing an existing screen
  • SKILL.md covers What You Do, Critique Dimensions, Output Format and Common Failure Patterns
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Critique Affordance is an agent skill from Owl-Listener/designer-skills. Critique a rendered screen's affordances — what looks clickable, state visibility, CTA clarity, and action discoverability. Use when reviewing an existing screen. For sizing and positioning targets in new work, use fitts-law (interaction-design).

Its SKILL.md is about 810 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Marketing & SEO. The repository describes itself as: Designer Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery. The licence is MIT.

When your agent uses it

  • Reviewing an existing screen

Example prompts

  • “/critique-affordance”

Workflow steps

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

  1. Observation — what you see (neutral, factual)
  2. Problem — what is broken and why it matters
  3. Fix — a specific, actionable change

What it can do on your machine

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

Critique Affordance loads about 805 tokens when it runs. Until then it costs about 67 tokens; SKILL.md has 409 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~67
When it runs · the whole SKILL.md, loaded when a task matches
~805

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 Owl-Listener/designer-skills at commit 9a6930c, republished under its MIT licence (© Owl-Listener). 409 words, ~805 tokens.

Download SKILL.mdSave it as .claude/skills/critique-affordance/SKILL.md (or your agent's skills folder).
name
critique-affordance
description
Critique a rendered screen's affordances — what looks clickable, state visibility, CTA clarity, and action discoverability. Use when reviewing an existing screen. For sizing and positioning targets in new work, use `fitts-law` (interaction-design).

Critique Affordance

You are an expert in interaction design and the visual communication of interactivity.

What You Do

You analyse a screen to identify whether interactive elements are visually distinguishable, whether states are communicated clearly, and whether the primary action is obvious. You flag affordance failures and propose specific fixes.

Critique Dimensions

Clickability Signals

Evaluate whether interactive elements look interactive.

  • Do buttons, links, and controls look distinct from static content through colour, shape, underline, or elevation?
  • Are there elements that look interactive but are not (false affordances)?
  • Are there elements that are interactive but look static (missing affordances)?
  • Is the interactive area large enough — touch targets should be at least 44×44px on mobile.
State Visibility

Evaluate whether element states are visually communicated.

  • Are default, hover, active, focus, disabled, and selected states visually distinct?
  • Is the focus state visible and high-contrast (not just the browser default ring on a coloured background)?
  • Are loading and skeleton states present where async content is expected?
  • Are disabled states clearly communicated without relying on colour alone?
CTA Clarity

Evaluate whether the primary action on screen is immediately obvious.

  • Is there a single dominant CTA per view, or are multiple actions competing at the same visual weight?
  • Does the primary CTA use filled/solid style while secondary actions use ghost or text variants?
  • Is the CTA label specific and action-oriented ("Save changes", not "OK")?
  • Is the CTA positioned where users expect it — bottom-right on forms, inline after content blocks?
Show full SKILL.md (167 more words)Show less
Action Discoverability

Evaluate whether all available actions can be found without instruction.

  • Are actions hidden behind hover states or tooltips that mobile users can't access?
  • Are contextual actions (edit, delete, share) visible or indicated — not completely hidden until hover?
  • Are empty states actionable — do they tell the user what to do next?
  • Are destructive actions (delete, remove) visually distinguished from constructive ones?

Output Format

For each dimension — Clickability Signals, State Visibility, CTA Clarity, Action Discoverability — provide:

  1. Observation — what you see (neutral, factual)
  2. Problem — what is broken and why it matters
  3. Fix — a specific, actionable change Rate each dimension: pass / minor issue / major issue.

Common Failure Patterns

  • Ghost buttons in low-contrast contexts where the border becomes invisible
  • Focus rings suppressed with outline: none and no replacement state
  • Multiple filled CTAs on one screen, leaving users unsure which to press
  • Edit and delete actions hidden behind hover — inaccessible on touch and invisible until discovered by accident
  • Empty states that explain nothing and offer no path forward

© Owl-Listener, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in visual-critique/skills/critique-affordance of Owl-Listener/designer-skills.

Open the folder on GitHubat commit 9a6930c

Used in 1 other repository

We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in Owl-Listener/designer-skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

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

Critique Affordance compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Critique Affordance this skillOwl-Listener/designer-skills2.9k1 repos~805Automated safety check: PassMIT
Geo Fundamentalswasp-lang/wasp19k9 repos~861Automated safety check: PassMIT
Ab Testingcoreyhaines31/marketingskills54k3 repos~3.1kAutomated safety check: PassMIT
Hreflang and International SEOAgriciDaniel/claude-seo19k5 repos~3.4kAutomated safety check: PassMIT
Referralscoreyhaines31/marketingskills54k2 repos~2.6kAutomated safety check: PassMIT
SEO GeoReScienceLab/opc-skills1.8k4 repos~2.1kAutomated safety check: PassApache-2.0

Similar skills

  • Geo Fundamentals

    wasp-lang/wasp

    Generative Engine Optimization for AI search engines (ChatGPT, Claude, Perplexity).

    19k GitHub starsUsed in 9 repos~861 tokens
    Marketing & SEOAuto-check passed

  • Ab Testing

    coreyhaines31/marketingskills

    When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program.

    54k GitHub starsUsed in 3 repos~3.1k tokens
    Marketing & SEOAuto-check passed

  • Hreflang and International SEO

    AgriciDaniel/claude-seo

    Audits, validates and generates hreflang tags for multi-language and multi-region sites in HTML, HTTP headers or XML sitemaps, flagging common code and return-tag mistakes.

    19k GitHub starsUsed in 5 repos~3.4k tokens
    Marketing & SEOAuto-check passed

  • Referrals

    coreyhaines31/marketingskills

    When the user wants to create, optimize, or analyze a referral program, affiliate program, or word-of-mouth strategy.

    54k GitHub starsUsed in 2 repos~2.6k tokens
    Marketing & SEOAuto-check passed

  • SEO Geo

    ReScienceLab/opc-skills

    SEO & GEO (Generative Engine Optimization) for websites. An agent skill from ReScienceLab/opc-skills.

    1.8k GitHub starsUsed in 4 repos~2.1k tokens
    Marketing & SEOAuto-check passed

  • Ad Creative

    LeoYeAI/openclaw-marketing-skills

    When the user wants to generate, iterate, or scale ad creative — headlines, descriptions, primary text, or full ad variations — for any paid advertising platform.

    1k GitHub starsUsed in 8 repos~3.4k tokens
    Marketing & SEOAuto-check passed

More from Owl-Listener/designer-skills

All 107 skills in this repo

  • A B Test Design

    Owl-Listener/designer-skills

    Design an A/B experiment — hypothesis, variants, primary metric, and sample size.

    2.9k GitHub starsUsed in 1 repo~472 tokens
    Auto-check passed

  • Accessibility Test Plan

    Owl-Listener/designer-skills

    Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol.

    2.9k GitHub starsUsed in 1 repo~478 tokens
    Auto-check passed

  • Aesthetic Usability

    Owl-Listener/designer-skills

    Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction.

    2.9k GitHub starsUsed in 1 repo~678 tokens
    Auto-check passed

  • Affinity Diagram

    Owl-Listener/designer-skills

    Cluster many qualitative data points into themes and insight statements.

    2.9k GitHub starsUsed in 1 repo~520 tokens
    Auto-check passed

  • Animation Principles

    Owl-Listener/designer-skills

    Apply animation principles — easing, staging, follow-through — to one specific UI motion.

    2.9k GitHub starsUsed in 1 repo~492 tokens
    Auto-check passed

  • Business Design

    Owl-Listener/designer-skills

    Read financials, map competitive landscapes, and argue design decisions in the language of value.

    2.9k GitHub starsUsed in 1 repo~1.1k tokens
    Auto-check passed

Categories

Questions about Critique Affordance

What does Critique Affordance do?

Critique a rendered screen's affordances — what looks clickable, state visibility, CTA clarity, and action discoverability. Critique Affordance is an agent skill from Owl-Listener/designer-skills. Critique a rendered screen's affordances — what looks clickable, state visibility, CTA clarity, and action discoverability.

When should I use Critique Affordance?

Critique Affordance fits situations like: reviewing an existing screen.

How do I install Critique Affordance in Claude Code?

Run `npx skills add Owl-Listener/designer-skills --skill critique-affordance -a claude-code`. Or copy the skill folder (visual-critique/skills/critique-affordance in Owl-Listener/designer-skills) into .claude/skills/critique-affordance in your project. Claude Code loads it when a task matches its description.

How do I install Critique Affordance in Codex?

Run `npx skills add Owl-Listener/designer-skills --skill critique-affordance -a codex`. Or copy the skill folder (visual-critique/skills/critique-affordance in Owl-Listener/designer-skills) into .agents/skills/critique-affordance in your project. Codex loads it when a task matches its description.

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

What does Critique Affordance need to run?

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

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

Critique Affordance is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Critique Affordance use?

About 805 tokens (SKILL.md is roughly 3.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Critique Affordance?

Skills that share tags, products or a category with Critique Affordance: Geo Fundamentals (wasp-lang/wasp, 19k stars), Ab Testing (coreyhaines31/marketingskills, 54k stars), Hreflang and International SEO (AgriciDaniel/claude-seo, 19k stars) and Referrals (coreyhaines31/marketingskills, 54k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Critique Affordance?

Owl-Listener (a GitHub user) maintains it in Owl-Listener/designer-skills, which has 2,871 GitHub stars. The repository holds 107 skills in this directory. The repository was last updated on September 5, 2026.

Source: Owl-Listener/designer-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.