critique
MANDATORY PREPARATION
Users start this workflow with /critique. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first. Additionally gather: what the interface is trying to accomplish.
Conduct a holistic design critique, evaluating whether the interface actually works — not just technically, but as a designed experience. Think like a design director giving feedback.
Consult the hierarchy checklist for grayscale tests, action prioritization, and label/value treatment. Consult the text hierarchy and readability for line length, line-height, baseline, alignment, and title restraint. Consult the cognitive load for working-memory limits and the 8-item checklist. Consult the interaction design when evaluating familiar patterns, target sizing, focus treatment, and overlay behavior. Consult the search and findability when the interface depends on site search, command palettes, autosuggest, result relevance, or no-results recovery. Consult the legacy modernization when the critique involves legacy systems, old/new seams, migration candidates, or high-risk operational workflows. Consult the ai slop detection for the consolidated anti-pattern list. Consult the action hierarchy when evaluating primary/secondary/tertiary actions. Consult the semantic color when color is carrying meaning. Consult the surface separation when judging borders, card usage, overlap, or background-shift decisions. Consult the image treatment when screenshots, icons, and media affect readability or polish.
More from aladicf/better-web-ui
polish
Perform a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the work is functionally complete and needs finishing touches—not when the hierarchy, structure, tone, or technical foundation still need major changes.
32frontend-design
Create distinctive, production-grade frontend interfaces with strong hierarchy, thoughtful systems, and polished implementation that avoid generic AI aesthetics. Use when the user wants to build or redesign web pages, flows, components, or full app surfaces, or when another better-web-ui skill needs shared project design context before other better-web-ui skills.
31empty-state
Design focused empty states for zero-data, no-results, permission, and error situations with clear value framing, strong CTAs, and less dead chrome. Use when the user mentions blank pages, zero-data screens, no results, permission states, or dead controls—not broader onboarding strategy.
30normalize
Audit and realign UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system.
30colorize
Build or refine UI color systems, warmth, semantic color, and color-based hierarchy in designs that are too gray, monochromatic, or missing color meaning. Use when the user mentions dull colors, gray UI, missing warmth, weak semantic color, or a need for stronger color hierarchy.
30audit
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants measurable accessibility, performance, responsive, theming, or anti-pattern findings—not when they mainly want an overall UX critique or final visual/detail polish.
30