What is the critique-affordance skill?
The critique-affordance skill is a SKILL.md in the visual-critique plugin of Owl-Listener's designer-skills pack. It makes an AI coding agent critique a rendered screen on four dimensions, rating each pass, minor issue or major issue, with an observation, a problem and a specific fix.
The critique-affordance skill sits in the visual-critique plugin of the designer-skills repository. It critiques a rendered screen's affordances: what looks clickable, state visibility, CTA clarity and action discoverability. Use it when reviewing an existing screen.
The agent acts as an expert in interaction design and the visual communication of interactivity. It checks whether interactive elements are distinguishable, whether states are communicated clearly and whether the primary action is obvious, then proposes specific fixes.
The four dimensions
- Clickability signals: do buttons, links and controls look distinct from static content, and are there false or missing affordances?
- State visibility: are default, hover, active, focus, disabled and selected states distinct, with a high contrast focus state?
- CTA clarity: is there one dominant CTA, with a specific label such as Save changes instead of OK?
- Action discoverability: can available actions be found without instruction, including on touch screens?
Output format
For each dimension the skill asks for three parts. The observation is neutral and factual, the problem says what is broken and why it matters, and the fix is a specific, actionable change. Each dimension is then rated pass, minor issue or major issue.
Who the critique-affordance skill is for
Best for
- Reviewing an existing rendered screen for interactivity cues.
- Checking that the primary CTA is dominant and that secondary actions use ghost or text variants.
- Auditing hover, focus and disabled states, including focus rings and touch targets of at least 44×44px on mobile.
Not for
- Sizing and positioning targets in new work, which is the job of the fitts-law skill in the interaction-design plugin.
- Emphasis and eye flow across a screen, which critique-visual-hierarchy reviews.
- Contrast ratios and palette coherence, which critique-color reviews.
Failure patterns it flags
- 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.
- Empty states that explain nothing and offer no path forward.
How to install Critique Affordance Skill: Review What Looks Clickable
/plugin marketplace add Owl-Listener/designer-skills
/plugin install visual-critique@designer-skills/visual-critique:critique-screen, which runs all seven visual critiques on a screen and outputs a prioritized fix list.Add the marketplace
Run
/plugin marketplace add Owl-Listener/designer-skillsin your AI coding agent. This only tells the agent where the skills live and installs nothing yet.Install the visual-critique plugin
Run
/plugin install visual-critique@designer-skills. The critique-affordance skill ships inside this plugin. You can also type/plugin, open the Discover tab, tick the plugin with space and press enter.Using Gemini CLI instead
Each plugin is also a Gemini CLI extension. Clone the repository, create
.gemini/extensionsin your project root and copy the cloned.gemini/extensionscontents into it.Ask for the skill by task
Describe or provide the screen and say which part to review. For example: critique the affordances on this settings page.
Check that it loaded
Give the agent a rendered screen. Expect an observation, a problem and a fix for each dimension, and a rating of pass, minor issue or major issue. The four dimensions should be Clickability Signals, State Visibility, CTA Clarity and Action Discoverability.
Key features
- Clickability signalsChecks whether buttons, links and controls look distinct from static content through color, shape, underline or elevation, and whether touch targets are at least 44×44px on mobile.
- False and missing affordancesFlags elements that look interactive but are not, and elements that are interactive but look static.
- State visibilityChecks that default, hover, active, focus, disabled and selected states are visually distinct, and that disabled states do not rely on color alone.
- Focus and loading statesAsks whether the focus state is visible and high contrast, not just the browser default ring on a colored background, and whether loading and skeleton states exist where async content is expected.
- CTA clarityLooks for one dominant CTA per view, a filled style for the primary action with ghost or text variants for secondary ones, and action-oriented labels.
- CTA placementChecks that the CTA sits where users expect it: bottom right on forms and inline after content blocks.
- Action discoverabilityFlags actions hidden behind hover states or tooltips that mobile users cannot reach, and contextual actions such as edit, delete and share that stay hidden until hover.
- Empty and destructive actionsAsks whether empty states tell the user what to do next, and whether destructive actions such as delete and remove look different from constructive ones.
- Structured findingsEvery dimension gets an observation, a problem and a fix, plus a rating of pass, minor issue or major issue.
Frequently asked questions
What is the critique-affordance skill?
It is a SKILL.md in the visual-critique plugin of the Owl-Listener/designer-skills repository. It has an AI coding agent critique a rendered screen's affordances, covering what looks clickable, state visibility, CTA clarity and action discoverability, and it proposes a specific fix for each problem it finds.
How do I install critique-affordance?
Run /plugin marketplace add Owl-Listener/designer-skills, then /plugin install visual-critique@designer-skills. The first command only registers where the skills live. You can also type /plugin, open the Discover tab, tick the plugin with space and press enter. Gemini CLI users copy the plugin's extension folder instead.
What does critique-affordance check?
It checks four dimensions. Clickability signals asks whether interactive elements look interactive. State visibility covers default, hover, active, focus, disabled and selected states. CTA clarity looks for one dominant action with a specific label. Action discoverability asks whether actions can be found without instruction.
What does the critique-affordance output look like?
For each of the four dimensions the agent gives an observation that is neutral and factual, a problem that says what is broken and why it matters, and a fix that is specific and actionable. It then rates the dimension pass, minor issue or major issue.
Which CTA problems does critique-affordance catch?
It asks whether one CTA dominates each view or several actions compete at the same visual weight, whether the primary action uses a filled style while secondary ones use ghost or text variants, whether the label is specific such as Save changes instead of OK, and whether the position matches expectations.
When should I use critique-affordance?
Use it when reviewing an existing, rendered screen. It does not size or position targets in new work, since the fitts-law skill in the interaction-design plugin covers that. Reach for it when you need a verdict on what looks clickable, which states are visible and how clear the CTA is.
Which AI coding agents can use critique-affordance?
The designer-skills pack is written for Claude Code and Gemini CLI. In Claude Code you add the marketplace and install the visual-critique plugin by name. Each plugin is also a Gemini CLI extension, which you copy into a .gemini/extensions folder in your project.
What license does critique-affordance use?
It is MIT licensed. The Owl-Listener/designer-skills repository declares the MIT license on GitHub, and the visual-critique plugin ships from that repository. The critique-affordance skill is installed with that plugin through the designer-skills marketplace, as the install steps above describe.