app-uiUse when designing or upgrading application screens (Operate mode) - CRMs, dashboards, admin panels, SaaS apps, back offices, client portals, settings, tables, forms, pipelines, calendars and invoices. Focuses on clarity, density, states and speed of use.
auditUse when asked to score, grade, critique or review the design of a website, app, landing page, dashboard or game UI. Returns a score out of 100 across eight categories, the generic "AI look" tells found, and a fix list ranked by points gained. Read-only; it changes nothing.
directionUse when a project needs a visual direction or design system before building or restyling - choosing colours, fonts, type scale, spacing, radius, shadows and motion as tokens. Produces a short DESIGN.md token plan matched to the product and checked against generic defaults.
game-uiUse when designing or upgrading the interface of a browser or mobile game (Play mode) - title screens, menus, HUDs, scoreboards, settings, pause and game-over screens, shops, and the "juice" (feedback, screen shake, particles, sound cues) that makes play feel good. Works with DOM/CSS overlays, Canva
god-modeUse when someone wants a website, web app, landing page, CRM, dashboard, SaaS product, portfolio or browser game to look significantly better, more premium or less "AI-generated". Runs the full pipeline (read the project, score it, pick a direction, upgrade, polish, verify) and routes to the focused
landingUse when designing or upgrading a landing page, marketing site, pricing page, product launch page or local business website (Persuade mode). Covers hero concepts, section structure, copy, social proof, CTAs and conversion details without generic AI-template patterns.
motionUse when adding, reviewing or fixing animation and transitions in a web UI - hover and press feedback, modals, dropdowns, toasts, page and scroll reveals, springs, easing and durations. Decides whether something should animate at all, then how, with reduced-motion support.
polishUse for the final quality pass on any web UI before shipping - spacing, alignment, interactive states, accessibility, responsive behaviour, performance, copy and the small details that separate good from great. Also use when a design is "almost there" or the user says "make it feel finished".
redesignUse when upgrading the look of an existing website or app in place - restyling a codebase without breaking routes, data, forms or tests. Works with Tailwind, shadcn/ui, CSS modules, plain CSS, Next.js, React, Vue, Svelte, Astro and static HTML. Applies changes in a safe order, system first, screens