critique-affordance
Critique a screen's interactive affordances — what looks clickable, state visibility, CTA clarity, and action discoverability.
npx skills add Infrasity-Labs/dev-gtm-claude-skills --skill critique-affordance --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 c
- What You Do
- Critique Dimensions
- Clickability Signals
- State Visibility
- CTA Clarity
- Action Discoverability
- Output Format
- Common Failure Patterns
What does the critique-affordance skill do?
Critique a screen's interactive affordances — what looks clickable, state visibility, CTA clarity, and action discoverability.
How do I install it?
Run `npx skills add Infrasity-Labs/dev-gtm-claude-skills --skill critique-affordance --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Infrasity-Labs/dev-gtm-claude-skills, a repository with 97 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.