跳到正文
cccskills
免费在 GitHub 公开

critique-affordance

Review an existing screen to check whether controls look interactive, states are visible, and key actions are easy to find. Receive observations, explanations of problems, specific fixes, and a severity rating for each review dimension.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

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

实测评分 未实测

查看安装方法

适用场景

  • Checking whether buttons and links look interactive
  • Reviewing focus, disabled, and loading states
  • Clarifying the screen's primary action
  • Finding actions hidden from touch users

包含的文件(1)

  • SKILL.md3.2 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

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

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Plan A/B experiments to measure the effect of a design change. Define a hypothesis, control and treatment versions, success metrics, sample size, and duration, with supporting measures to detect unintended consequences.

中文简介正在准备中。当前显示英语简介。

  • Planning a comparison between current and proposed designs
  • Defining success metrics for a change
  • Estimating sample size and test duration
Owl-Listener/designer-skills30552026年9月6日 更新

Assess an existing interface against WCAG 2.2 accessibility guidelines. Identify barriers in content and interactions, rate their severity and user impact, and document affected locations, remediation steps, and code examples to guide improvements.

中文简介正在准备中。当前显示英语简介。

  • Reviewing accessibility in an existing design or build
  • Checking keyboard access and assistive technology compatibility
  • Prioritizing fixes by severity and user impact
Owl-Listener/designer-skills30552026年9月6日 更新

Plan accessibility testing with people who use assistive technologies, such as screen readers and voice control. Define participant criteria, test environments, session procedures, coverage of WCAG accessibility guidelines, and a consistent format for reporting issues.

中文简介正在准备中。当前显示英语简介。

  • Planning test sessions with assistive technology users
  • Defining participant recruitment criteria
  • Mapping key user flows to test environments
Owl-Listener/designer-skills30552026年9月6日 更新

Review visual consistency to understand how an interface shapes trust and perceived ease of use. Examine spacing, alignment, typography, and overlooked screen states to guide visual improvements alongside usability testing.

中文简介正在准备中。当前显示英语简介。

  • Investigating poor feedback on a functional interface
  • Checking visual consistency before launch
  • Reviewing error, empty, and loading states
Owl-Listener/designer-skills30552026年9月6日 更新

Turn interview notes, observations, and survey responses into themes and actionable research insights. Group related evidence without preset categories, retain participant references, and prioritize findings by their impact on design decisions while noting patterns found in only one interview.

中文简介正在准备中。当前显示英语简介。

  • Synthesize findings across multiple interviews
  • Organize observation notes and survey responses
  • Prioritize research insights for design decisions
Owl-Listener/designer-skills30552026年9月6日 更新

Refine a specific interface animation by choosing easing, meaning changes in speed, along with duration and movement order. Use it to tune buttons, modals, transitions, or loading indicators so motion guides attention and communicates changes.

中文简介正在准备中。当前显示英语简介。

  • Tune how a modal enters and exits
  • Adjust button and toggle animations
  • Coordinate the order of related movements
Owl-Listener/designer-skills30552026年9月6日 更新

查看 Owl-Listener 的全部技能

报告此技能的问题