Skills suchen.../

Design Critique | Skills Pool

Skill-Datei

Design Critique

Structured design critique and feedback. Activate when reviewing designs, mockups, screenshots, PRs, or UI implementations.

Personaut0 Sterne16.03.2026

Beruf
Kategorien: Bildung

Skill-Inhalt

Design Critique Skill

Provide structured, actionable design feedback using a consistent framework.

When to Activate

User shares a design, mockup, or screenshot for review
User asks for feedback on UI/UX
User shares a PR or implementation to review from a design perspective
User asks "what do you think?" about a visual or interaction

Critique Framework

1. What Works (Strengths)

Start positive. Identify what is working well — layout, hierarchy, color usage, interaction patterns. Be specific, not generic.

2. Usability Review

Information hierarchy: Is the most important content most prominent?
User flow: Can the user accomplish their goal without friction?
Cognitive load: Is the interface asking the user to think too hard?

Verwandte Skills

Schnellinstallation

Design Critique

npx skills add Personaut/design-manager

Skill herunterladen Repository öffnen

Autor: Personaut
Sterne: 0
Aktualisiert: 16.03.2026
Beruf

Auf dieser Seite

01Design Critique Skill

Consistency: Does it follow existing patterns or introduce new ones unnecessarily?

Affordances: Can users tell what is clickable, draggable, or editable?

3. Accessibility Check

Color contrast: Does text meet WCAG 2.1 AA (4.5:1 for body, 3:1 for large text)?
Touch targets: Are interactive elements at least 44x44px on mobile?
Screen reader flow: Does the content order make sense read linearly?
Keyboard navigation: Can all interactions be completed without a mouse?
Motion: Is animation reduced for users who prefer reduced motion?

4. Responsive Considerations

How does this adapt from mobile (320px) to desktop (1440px+)?
Are there breakpoint-specific layout changes needed?
Does touch interaction differ from mouse interaction?

5. State Coverage

Loading: What does the user see while data loads?
Empty: What happens when there is no data?
Error: How are errors communicated?
Overflow: What happens with long text, many items, or large images?

6. Actionable Recommendations

Prioritize feedback:

Must fix: Issues that block shipping or harm usability
Should fix: Issues that degrade the experience but are not blockers
Could improve: Polish items for future iteration

Guidelines

Be direct but kind. Frame critiques as design decisions, not personal failures.
Always suggest an alternative when identifying a problem.
Use the "Yes, and..." approach — build on what exists rather than tearing it down.
Reference the 90s when appropriate: "This layout reminds me of early Amazon — functional but we can do better."

02

When to Activate

03Critique Framework

041. What Works (Strengths)

052. Usability Review

063. Accessibility Check

074. Responsive Considerations

085. State Coverage

096. Actionable Recommendations

Web- und digitale Interface-Designer

Update Skills

Create or update repository skills and instructions when major learnings are discovered during a session. Use when the user says "learn!", when a significant pattern or pitfall is identified, or when reusable domain knowledge should be captured for future sessions.

microsoft184.0k

Eval Harness

Eval-driven development (EDD) ilkelerini uygulayan Claude Code oturumları için formal değerlendirme çerçevesi

Ecc Tools Cost Audit

Evidence-first ECC Tools burn and billing audit workflow. Use when investigating runaway PR creation, quota bypass, premium-model leakage, duplicate jobs, or GitHub App cost spikes in the ECC Tools repo.

Code Tour

Create CodeTour `.tour` files — persona-targeted, step-by-step walkthroughs with real file and line anchors. Use for onboarding tours, architecture walkthroughs, PR tours, RCA tours, and structured "explain how this works" requests.

Rules Distill

Scan skills to extract cross-cutting principles and distill them into rules — append, revise, or create new rule files

Design System

Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.

Web- und digitale Interface-Designer