Skip to content
cccskills
FreePublished on GitHubEnglish overview

design-critique

Review a screen, user flow, or component against the user's task. Assess visual hierarchy, interaction cues, error handling, accessibility, and consistency, then provide prioritized fixes with reasons and identify strengths worth preserving.

OriginalShow the original description

Give a structured product design critique — user job clarity, hierarchy, affordance, error states, accessibility, and consistency — focused on what to change, in what order, and why.

Run score Not tested

See how to install

Good for

  • Getting feedback on a screen or mockup
  • Checking usability before a feature launches
  • Reviewing a flow where users may drop off
  • Prioritizing design fixes and preserving strengths

Overview

What it does

Review screens, user flows, and component designs to identify what should change, in what order, and why. The skill first establishes the user's role, the task they want to complete, what success looks like, and the steps before and after the screen. It then examines visual hierarchy, cues showing what can be operated, forms, error messages, accessibility, consistency, and wording. Findings are grouped into fixes required before release, fixes to make before a wider rollout, and improvements to make when time allows. Each issue includes a suggested fix. The review also identifies strengths to preserve in the next revision.

When it helps

Use it when designers or engineers need specific feedback on a screen proposal or working UI. It also helps check usability before a feature is released, or examine a flow suspected of causing drop-off before further research.

Example requests

  • “Review this application screen against the goals of a first-time user.”
  • “Prioritize the fixes needed before release and tell me which strengths to preserve.”

Notes

You need a concrete screen, mockup, or similar artifact, plus information about the user and their goal. Missing context is clarified first. The skill proposes improvements; redesign and implementation are outside its scope. A review is not release approval.

This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.

Document check

AI checked the SKILL.md for operations that need care and for setup requirements. The score comes only from actually running the skill (hands-on test).

SafetyAre sending data, deleting files, and running commands disclosed?
AGoodIt limits work to recommendations, prohibits rebuilding, and includes no instructions to transmit or delete data.
Easy setupDoes it need few tools or API keys, and are they documented?
AGoodIt requires a concrete design artifact and user context, with no additional tools specified.

Not counted in the score. Rated by AI (OpenAI Codex) as of Oct 20, 2026. Treat it as a guide and read the original before installing.

Disagree? Request a re-evaluation

Tell us which point is wrong and why. No login needed. We will check it against the SKILL.md, redo the evaluation, and show the result here.

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

Files included (1)

  • SKILL.md4.7 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Product Design Critique

A structured critique pass for a screen, flow, or component. The output is a prioritized list of changes a designer or engineer can act on — not adjectives. Critique is not redesign; recommend, do not rebuild.

When to use

  • A designer or engineer asks for feedback on a screen, mock, or live UI.
  • A feature is shipping and someone wants a final UX read.
  • A flow is suspected of causing user drop-off and you want a pre-research read before instrumentation.

When not to use

  • The user wants a redesign. That is a design project, not a critique.
  • The work is so early that no concrete artifact exists. Sketch with them instead of critiquing air.
  • You have no context on the user job. Ask for it first; design critique without user context devolves into taste.

Pre-critique context

Before opening a screen, get:

  • Who is the user. Specific role and competence, not "users".
  • What job they are doing on this screen. One sentence.
  • What success looks like. What the user can do after this screen that they could not before.
  • Where this screen sits in the larger flow. What precedes and follows.

If any of these is missing, ask. Critique without these is opinion.

The pass (in order)

  1. Clarity of the user job.

    • Within 3 seconds of opening, is it obvious what this screen is for?
    • Does the primary action match the user's actual job, or a designer's preferred path?
  2. Visual hierarchy.

    • The most important thing on the screen should be the most prominent (size, weight, position, color).
    • Secondary actions should look secondary. Tertiary should be findable but not loud.
    • Headings should chunk content into the right groups for the task.
  3. Affordance and signifiers.

    • Clickable things look clickable.
    • Disabled things look disabled and explain why on hover/focus.
    • Drag, scroll, or swipe interactions are discoverable, not hidden.
  4. States.

    • Empty state (no data) is designed, not a blank rectangle.
    • Loading state communicates progress, not just spins.
    • Error states say what went wrong and what to do next, in the user's words.
    • Success state confirms without celebrating banal actions.
  5. Inputs and forms.

    • Labels visible, not just placeholders.
    • Validation runs at the right time (on blur, not on every keystroke unless the user is in a known-format field).
    • Required fields marked.
    • Field order matches the user's mental order, not the database order.
  6. Accessibility.

    • Sufficient color contrast (WCAG AA at minimum; AAA where reasonable).
    • Focus order is logical for keyboard navigation.
    • Interactive elements are reachable without a mouse.
    • Critical information is not color-only (icons, text, position back it up).
    • Touch targets at least 44×44 px on mobile.
  7. Consistency.

    • Tokens, components, and patterns match the rest of the product.
    • "Borrowed" patterns from other products are intentional, not accidental drift.
  8. Copy.

    • Buttons are verbs that name the outcome ("Save changes" beats "Submit").
    • Microcopy explains, does not decorate.
    • Tone matches the product voice.
  9. Edge cases.

    • Long content (long names, many items, RTL languages).
    • Tiny content (one item, zero items).
    • Slow network and offline behavior.
    • Permissions denied.

Output format

Group findings by severity, then by category. Each finding is one issue and one suggested fix.

## Design critique: <screen name>

### Must-fix (blocks ship)
- **<category>:** <one-line issue>. **Try:** <one-line suggestion>.

### Should-fix (before broader rollout)
- **<category>:** <one-line issue>. **Try:** <one-line suggestion>.

### Nice-to-fix (when there's room)
- **<category>:** <one-line issue>. **Try:** <one-line suggestion>.

### Strengths to keep
- <one-line thing the design got right>

Always include the "strengths to keep" section. It is not flattery — it is signal to the designer about what not to change in the next round.

Anti-patterns

  • "I would do it differently" without saying what or why. That is preference, not critique.
  • Long critiques that bury must-fix items under nice-to-haves.
  • Suggesting net-new features under the guise of a critique.
  • Ignoring user context and grading on taste.
  • Treating a critique as approval. State approval explicitly if asked; otherwise critique is feedback, not sign-off.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Add or extend Paperclip end-to-end evaluations that exercise real browser workflows across the server, database, and runner. Define expected outcomes, check independent evidence, and connect results to the existing reporting pipeline for local or Daytona execution.

  • Adding an evaluation for a complete user workflow
  • Updating test data and outcome checks
  • Including screenshots and artifacts in evaluation reports
paperclipai/paperclip106.6KUpdated Oct 23, 2026

add-runner-eval

FreeSummary

Add or extend Paperclip Runner evaluations that test real sessions against a mock control service. Define observable pass conditions, validate cases and run selections, and retain source revisions, evidence, and costs for authorized live runs.

  • Adding a focused Runner protocol evaluation
  • Testing grading rules with valid and invalid evidence
  • Updating evaluation selections and campaign membership
paperclipai/paperclip106.6KUpdated Oct 23, 2026

agent-browser

FreeSummary

Use a real browser to verify web pages and apps through short, supervised interactions. Capture screenshots, inspect errors and network requests, and document reproducible steps for UI bugs or expected behavior checks.

  • Capture screenshots to verify UI changes
  • Read content rendered by JavaScript
  • Reproduce UI bugs and record errors
paperclipai/paperclip106.6KUpdated Oct 23, 2026

agentmail

FreeSummary

Read email linked to assigned Paperclip tasks, send new messages or replies through an assigned AgentMail inbox, and check delivery outcomes. Follow task permissions and preserve retry identifiers to avoid duplicate sends.

  • Reading email context attached to an assigned task
  • Sending a new email from an assigned inbox
  • Replying to a specific message in a conversation
paperclipai/paperclip106.6KUpdated Oct 23, 2026

check-pr

FreeSummary

Inspect proposed changes in GitHub, GitLab, or Perforce for review feedback, failed automated checks, and incomplete descriptions. It separates actionable findings from informational or resolved comments, then helps fix issues and close addressed review threads when requested.

  • Inspect a change before submission
  • Identify failed checks and required fixes
  • Organize human and bot review feedback
paperclipai/paperclip106.6KUpdated Oct 23, 2026

company-creator

FreeSummary

Create an AI agent company or team package from an idea or an existing repository. Define roles, reporting lines, skills, and work handoffs, then generate structured files that follow the Agent Companies specification.

  • Build an agent company from an idea
  • Turn a repository into an agent team package
  • Define agent roles and work handoffs
paperclipai/paperclip106.6KUpdated Oct 23, 2026

See all skills by paperclipai

Report a problem with this skill