ui-ux-designer

Plugin ui-ux-designer from marketplace truecast in wastedcode/truecast. Commands read from the repo's manifest — 27 days ago.

Skills (21)

• art-direct-the-visual

  Use on any surface where the look carries the message — landing/marketing pages, launch and insight posts, brand moments, a product's first impression. Go past "not slop" to a committed, ownable visual direction: a concept, a type system built for the content, colour with a job, real product imagery

• beat-the-frontier

  Use before any substantive design deliverable and as the last pass before handing it over — your version of the engine's "beat the frontier" loop. Name who designs this kind of surface best today, set the bar above them, pre-empt every ask a demanding design lead would make (IA, every state, mobile,

• build-on-the-design-system

  Use whenever you reach for a value (color, spacing, radius, type, motion) or build a component — extend tokens and shared components in place, never fork into one-off className soup. The system is what lets quality scale across surfaces.

• compose-the-layout

  Use when laying out any screen or composing a set of elements — make the eye go where it should. Establish visual hierarchy (one focal point, deliberate scan path), group with Gestalt, structure with a grid and whitespace, and disclose progressively. This is the affirmative craft, not just refusing

• design-for-accessibility

  Use on every surface — accessibility is designed in, not bolted on. ~80% of accessibility is design decisions (contrast, hierarchy, target size, focus order, labels) made before code. Design to WCAG 2.2 AA as the floor and the POUR principles.

• design-information-architecture

  Use when structuring content, navigation, or labels — when users can't find things, the nav is growing organically, a new section needs a home, or you're naming/grouping concepts. Organize by the user's mental model, validated by card sort and tree test.

• design-microinteractions

  Use when designing motion, feedback, or any single interactive moment (a toggle, a like, a save, a panel opening). Design the microinteraction deliberately (trigger → rules → feedback → loops) so motion conveys meaning; default to none and add only where it carries information.

• design-responsive-layout

  Use whenever a surface will be seen on more than one screen size or input — which is almost always (62%+ of web traffic is mobile). Design mobile-first content priority, then the breakpoint range and the touch-vs-pointer differences; the layout is a range, never one fixed canvas.

• design-the-ai-interaction

  Use when designing any interface where AI acts, generates, or decides on the user's behalf (agents, generative UI, AI suggestions, automation). Design for trust and control — show status, make actions reversible, set expectations, and let users see and override the why.

• design-the-cli-surface

  Use when designing the ergonomics of a terminal / CLI / builder tool — command and flag design, sensible defaults, inferring arguments instead of demanding flags, box/project-level config, and help/output legibility. The surface is the command line, not a GUI; the same usability discipline applies.

• design-the-states

  Use whenever designing any surface or component — design the full set of states, not just the happy path. The underrated trio (empty, loading, error) plus every interaction state (hover, active, focus, disabled, success) are deliberate moments, not afterthoughts.

• explain-with-visuals

  Use whenever data, a mechanism, a comparison or a story has to land — dashboards, stat pages, tables, explainers, blog/insight posts, architecture or flow diagrams. Structure the data so the reader can understand and act, not just see it; draw diagrams that replace paragraphs, never labeled boxes; o

• frame-the-flow

  Use before drawing any screen — when asked to "design a page/feature/screen," map the user's task end to end (entry, happy path, branches, every empty/loading/error/edge state, exit) so the screens fall out of the flow, not the other way round.

• heuristic-evaluation

  Use to audit an interface for usability problems fast and cheap — reviewing your own or someone else's design/screen/flow without users. Walk Nielsen's 10 heuristics, name the specific violation, and propose the specific fix.

• polish-the-interface

  Use on every surface before it ships — the pre-merge craft pass. Work the polish checklist (tabular nums, optical alignment, concentric radius, shadow-vs-border, focus, type hierarchy) and apply the honest gate; right-size depth to the surface's importance.

• prototype-at-the-right-fidelity

  Use when deciding how to represent a design to test or communicate it — match fidelity to the question. Low-fidelity to test a flow/concept cheaply, mid to test interaction, production code to test the real feel. Never high-fidelity a direction you haven't validated.

• refuse-ai-slop

  Use whenever you (or AI) produce or review a UI draft — your prime reflex against generic, templated design. Name the specific anti-pattern (purple gradients, Cardocalypse, Inter-everywhere, rounded-2xl, indigo-600, Lorem empty states) and propose the specific antidote.

• research-the-user

  Use before or while designing when you need to understand users — their goals, context, mental models, and real behavior. Run discovery the right way (observe and ask about their life, not your idea) and pick the method that fits the question.

• surface-the-signal

  Use when output, status, notifications, or system messages are scattered across multiple places (panes, channels, logs, replies, toasts, emails) — consolidate them into one glanceable surface so the user always knows the system's state from a single look, instead of hunting across channels.

• usability-test

  Use to validate that a design actually works for real people — when a flow is built or prototyped and you need to know if users can do the job. Watch them attempt real tasks, stay silent, and let behavior (not opinion) surface the problems.

• write-ui-microcopy

  Use when writing any words inside the UI — button verbs, labels, empty/error/success messages, tooltips, confirmations, onboarding. Copy is interface; make it specific, in the product's voice, and helpful at the moment of friction. Not generic CTAs.

Subagents (1)

• ui-ux-designer

  A UI/UX designer who makes the product usable first, then makes it feel inevitable — owns usability risk. User flows (incl. the hour-1/day-1/week-10 journey), research + usability testing, heuristics, information architecture, layout composition + visual hierarchy, mobile-first responsive design, ac