critique-affordance

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha 353bfcf4d7fc · 31 Oct 2026Report an issue or request a re-scan

• Publisherowl-listener GitHub userOwner of the repository this skill is read from
• Source folderowl-listener/designer-skills/visual-critique/skills/critique-affordanceThe exact folder we audited
• LicenceMITAs the repository states it
• Commit pinned for this verdict353bfcf4d7fcA new audit runs when the source changes
• Repository statusNot archivedLast push 55 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its 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…

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

Excerpt, first 3,219 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

git clone https://github.com/owl-listener/designer-skills
git -C designer-skills checkout 353bfcf4d7fc

Works in

1. 2026-10-31
   ✓SAFE B 89 / 100

   first audit · source 353bfcf4d7fc

Questions about critique-affordance

• github.com/owl-listener/designer-skills/tree/main/visual-critiqu — the audited source at commit 353bfcf4d7fc and every finding aboveObserved · 31 Oct 2026

Spotted something wrong? Report a correction · Methodology