critique-affordance — Claude Code skill: what it does, how to install

---
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?
### 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