From nickcrew-claude-ctx-plugin
Provides structured critiques of UI designs, wireframes, mockups, and design systems using UX principles, usability heuristics, hierarchy, accessibility, and consistency checks.
npx claudepluginhub nickcrew/claude-cortexThis skill uses the workspace's default tool permissions.
This skill provides structured, actionable design critiques grounded in UX principles, visual design fundamentals, and usability heuristics. A good design critique is not a list of personal preferences—it connects observations to user impact and business outcomes. This skill helps you evaluate designs across key dimensions: usability, hierarchy, accessibility, consistency, and clarity. Whether ...
Provides structured critiques of UI designs on usability, hierarchy, consistency, and accessibility using Figma URLs, screenshots, or descriptions.
Provides structured, actionable feedback on UI designs, Figma files, wireframes, and user flows using JTBD, Gestalt principles, and Nielsen heuristics with prioritized issues.
Evaluates UI/UX designs assessing visual hierarchy, information architecture, cognitive load, AI slop, anti-patterns with scoring, persona testing, and feedback. Use for design reviews.
Share bugs, ideas, or general feedback.
This skill provides structured, actionable design critiques grounded in UX principles, visual design fundamentals, and usability heuristics. A good design critique is not a list of personal preferences—it connects observations to user impact and business outcomes. This skill helps you evaluate designs across key dimensions: usability, hierarchy, accessibility, consistency, and clarity. Whether you are reviewing a lo-fi wireframe or a polished high-fidelity mockup, the output is prioritized, constructive feedback that the designer can act on immediately.
frontend-design skill instead)| Task | Approach |
|---|---|
| First pass | Evaluate from the user's perspective before looking at individual elements |
| Hierarchy | Check: can you read the page in 5 seconds and know what to do? |
| Accessibility | Contrast ratios (4.5:1 text, 3:1 UI), touch targets (44×44px min), focus order |
| Consistency | Same element, same style everywhere — spot deviations from the design system |
| Usability heuristics | Apply Nielsen's 10: visibility, feedback, control, standards, error prevention, etc. |
| Prioritization | Sev 1 (blocks users) → Sev 2 (frustrates users) → Sev 3 (polish/preference) |
| Tone | Critique the design, not the designer; lead with impact, not judgment |
| Positive feedback | Name what works and why — it's as actionable as what doesn't |
Understand the context before critiquing. Identify: What is this screen trying to accomplish? Who is the user? What stage of the design is this (wireframe vs. polished mockup)? Calibrate the depth of your critique to the fidelity—pixel-perfect feedback on a wireframe wastes everyone's time.
Do a five-second first impression. Look at the design for five seconds, then look away and answer: What is this page for? What is the primary action? What did my eye go to first? If these are unclear, the hierarchy needs work—this is your most important finding.
Evaluate visual hierarchy and layout. Check whether size, color, weight, and whitespace guide the eye through the intended reading order. The primary action should be visually dominant. Group related elements. Ensure spacing is consistent and intentional, not random.
Apply Nielsen's usability heuristics. Systematically check the top relevant heuristics: (1) Visibility of system status, (2) Match between system and real world, (3) User control and freedom, (4) Consistency and standards, (5) Error prevention, (6) Recognition over recall, (7) Flexibility and efficiency, (8) Aesthetic and minimalist design, (9) Error recovery, (10) Help and documentation.
Check accessibility fundamentals. Verify text contrast meets WCAG AA (4.5:1 for normal text, 3:1 for large text). Confirm interactive elements are at least 44×44px for touch. Check that the design communicates information through more than color alone. Identify any content that depends on hover states with no keyboard equivalent.
Assess consistency with the design system. Identify any components, spacing, typography, or color values that deviate from established patterns. Inconsistencies erode trust and make the product feel unpolished—even when users can't articulate why.
Prioritize feedback by severity. Classify every finding: Severity 1 = blocks task completion or causes errors, Severity 2 = creates confusion or frustration, Severity 3 = polish and preference. Lead with Sev 1 findings. Clearly separate preference from principle.
Frame feedback constructively. Use the format: Observation → Impact → Suggestion. "The primary button and secondary button have the same visual weight [observation], which makes it unclear which action to take [impact]. Consider making the primary action visually dominant with a filled style and reserving the outline style for secondary actions [suggestion]."
Input: "Critique this checkout screen. It has: a large product image on the left, a form on the right with fields for name/email/address/card number, a 'Place order' button at the bottom, and a small security badge in the footer. Users are abandoning at this step."
Output:
The layout is clear — it reads as a checkout form. However, the primary action ("Place order") is buried at the bottom, requiring a scroll most mobile users won't complete.
Button placement and visibility The "Place order" CTA is below the fold on mobile. Users who don't scroll never see it. Move the button directly below the last form field, or add a sticky CTA at the bottom of the viewport on mobile.
Form field order Asking for card details before confirming the order summary creates anxiety. Show an order summary (items, total, shipping cost) before payment fields. Users need to confirm what they're paying before they trust you with payment details.
Security badge placement The security badge is in the footer, after the payment form — where users least expect it. Place trust signals (SSL lock icon, accepted card logos, "Secure checkout" language) directly adjacent to the card number field, where purchase anxiety peaks.
No inline validation Card number and email errors appear only after submit. Add real-time validation (confirm email format, format card numbers with spaces as users type). Errors at submit feel punishing; errors in the moment feel helpful.
Field labels vs. placeholders If labels disappear when typing begins (placeholder-only pattern), users lose context mid-form. Use persistent floating labels or label-above-field patterns.
Product image size The large product image on the left takes significant real estate. At checkout, the user has already decided to buy — a smaller image or order summary card serves them better. Consider converting this space to a concise order summary instead.
Input: "Review this dashboard wireframe for a SaaS analytics tool. It shows: a left sidebar with 12 nav items, a top bar with username and settings icon, a main area with 8 metric cards in a 4x2 grid, and a large line chart below. Users say it feels overwhelming."
Output:
The layout signals "analytics tool" immediately, which is good. But 12 sidebar items and 8 metric cards compete equally for attention — there is no clear starting point. Users feeling overwhelmed is a direct symptom of missing hierarchy.
Navigation overload 12 top-level nav items exceeds the cognitive limit for scannable menus (~7 items). Group related items under collapsible sections or move secondary items into a settings area. Consider which 5–7 items represent 80% of user journeys and elevate those.
No primary metric All 8 metric cards are the same size and weight. Users don't know which number matters most. Identify the 1–2 KPIs that define success and make them visually larger or differently styled. This also gives new users an onboarding anchor.
Chart with no context The large line chart shows a trend but (in the wireframe) has no date range selector, no comparison period, and no annotation for significant events. A chart without context is noise. Add: a date range control, a comparison toggle ("vs. previous period"), and a baseline reference line.
Metric card density Eight metrics above the chart pushes the chart below the fold on typical laptop screens. Consider a "key metrics" row of 3–4 metrics, with the remaining metrics accessible in a secondary panel or drill-down.
Top bar real estate The top bar shows only username and settings. Consider adding a search bar (speeds up navigation for power users) and a notification bell (keeps users in context without breaking flow).
Apply progressive disclosure: show the most important 3 metrics prominently, the trend chart below, and offer "View all metrics" to expand. This reduces the visual noise without removing any data.