skills.rest
Owl-Listener
Owl-ListenerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

critique-affordance

Reviews rendered screens for affordance failures across clickability, state visibility, CTA clarity, and action discoverability.

2.5k|358|Updated Mar 7, 2026
Search Tags:#usability#design review# accessibility#CTA#affordance#UI critique#Interaction design
One-click install
npx skills add https://github.com/Owl-Listener/designer-skills --skill critique-affordance
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: critique-affordance
Source: https://github.com/Owl-Listener/designer-skills/tree/main/visual-critique/skills/critique-affordance
Command: npx skills add https://github.com/Owl-Listener/designer-skills --skill critique-affordance

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Interactive elements often fail to communicate that they are interactive — buttons look like static text, focus states are invisible, and primary actions compete for attention. This Skill audits a rendered screen for these affordance failures and proposes concrete fixes.

Core Features & Use Cases

  • Clickability Audit: Detects elements that look interactive but are not, and interactive elements that look static, including touch target sizing below 44×44px.
  • State Visibility Review: Checks that hover, focus, active, disabled, loading, and selected states are visually distinct and not reliant on colour alone.
  • CTA and Discoverability Analysis: Evaluates whether a single dominant CTA exists, whether labels are action-oriented, and whether contextual actions are hidden behind hover-only patterns.
  • Use Case: Before shipping a checkout page, run this critique to catch a ghost-button CTA that disappears on a light background and edit actions that mobile users can never reach.

Quick Start

Ask the AI to critique the affordances of a screenshot or rendered screen of your interface and rate each dimension.

Frequently Asked Questions about critique-affordance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check if buttons look clickable in my UI?▼

Review whether buttons and links are visually distinct from static content through colour, shape, underline, or elevation. Also check for false affordances — static elements styled like controls — and confirm touch targets are at least 44×44px on mobile.

What is the difference between affordance critique and Fitts's law analysis?▼

Affordance critique reviews an existing rendered screen for whether interactivity is visually communicated. Fitts's law applies when sizing and positioning targets in new design work, so use it earlier in the design process rather than for reviewing finished screens.

Why are hover-only actions a problem in interface design?▼

Actions hidden behind hover states are inaccessible on touch devices and invisible until accidentally discovered. Contextual actions like edit, delete, and share should be visible or at least indicated without requiring hover.

How should focus states be styled for accessibility?▼

Focus states must be visible and high-contrast, not just the browser default ring on a coloured background. Never suppress outlines with outline: none without providing a replacement state, and avoid communicating disabled states through colour alone.

When should I not use an affordance critique?▼

Do not use it for sizing and positioning targets in new design work — that is the domain of Fitts's law analysis. It is intended for reviewing existing rendered screens, not for generating layouts from scratch.

Related Skills

Explore More Design & Creative Skills→
not-subhunot-subhu

recreate-screenshot

Reconstructs screenshots as functional UI prototypes.

Community
Advanced
TechNickAITechNickAI
1

address-pr-comments

Triage bot and human PR feedback and drive pull requests to a merge-ready state.

Community
Advanced
Claude-Code-Community-IrelandClaude-Code-Community-Ireland
10

accessibility-compliance-accessibility-audit

Audit digital products against WCAG standards and identify accessibility barriers.

Official
Advanced
Objective-ArtsObjective-Arts

interaction

Define interaction design rules for touch, mouse, and keyboard inputs.

Official
Intermediate