--- name: slopgate-ux description: Inject the ANTI-SLOP UX framework as design directives before generating or modifying any UI. Enforces complete states, action hierarchy, feedback loops, accessibility, performance, and human-centric microcopy — the semantic UX rules a static scanner cannot catch. Use before building or editing components, pages, forms, modals, tables, or any user-facing interface. Complements the slopgate `ux:{}` static rule module (which gates the mechanical subset). --- # slopgate-ux — Anti-Slop UX Directives Prompt-time companion to the slopgate `ux:{}` static module. The static module gates the *mechanical* UX slop a scanner can see (`
`, `` without dimensions, emoji-as-icon, magic px/hex, linear easing). **This skill carries the semantic half** — the cross-component, dataflow, and judgment directives no regex/AST rule can enforce. Run the checklist **silently before outputting UI code**; if any answer is NO, revise before emitting. > Mission: generate human-centric, intuitive, **complete** interfaces. Avoid "UX slop": lazy, incomplete, > or cognitively overwhelming designs optimized only for the happy path. ## Step 0 — Ensure gate initialized (run FIRST) A `/slopgate-*` skill MUST NOT operate on an un-gated repo. Verify the gate; init if absent, so the `ux:{}` static module backs these prompt-time directives. Idempotent — `slopgate init` preserves an existing config and only fills what is missing (it also installs the fail-closed pre-commit hook). Single source of truth = the CLI's own idempotency; this step just calls it. ```bash ROOT=$(git rev-parse --show-toplevel 2>/dev/null) || { echo "slopgate: not a git repo — cannot init gate"; exit 1; } if [ ! -f "$ROOT/.slopgate/config.toml" ]; then echo "slopgate: gate not initialized — running 'slopgate init' first" ( cd "$ROOT" && slopgate init ) || { echo "slopgate: init failed"; exit 1; } fi ``` `config.toml` present → proceed with the checklist below. ## 0. Generic-AI-slop alarm bells — reject on sight Centered hero + two stacked CTAs over a gradient · "Trusted by" logo strip under the hero · bento-box grids (3–4 icon/heading/paragraph cards) · emoji as bullets/section markers/icons · decorative Lucide/Heroicons filling empty space · floating image cards with heavy drop shadows. *(emoji / Trusted-by / drop-shadow are also caught statically by `ux:taste`.)* ## 1. Four states (complete states) Every data-driven view implements **all four**: **Empty** (one sentence, one action, no illustration, written like a person speaks) · **Loading** (skeleton blocks matching final layout, no shimmer, never freeze the UI) · **Error** (friendly, actionable, with retry) · **Populated** (happy path). ## 2. Hierarchy protocol (no "button soup") ONE primary (solid) action per view/section/form. Secondary = outline, tertiary = ghost/text. Tuck low-priority actions in kebab menus. Destructive = visually distinct (red) + confirmation. ## 3. Action–reaction (feedback loop) Every interaction → immediate visual feedback. Distinct hover/focus/active states. During async: disable the trigger + inline loading indicator. Completion: explicit success/error toast or inline alert. *(async-button-without-disable is partially catchable; the rest is judgment.)* ## 4. Friction = risk Low-stakes/high-frequency → zero friction (single click). High-stakes/low-frequency → intentional friction (confirm modal, or type "DELETE"). ## 5. Cognitive load (progressive disclosure) Group into cards/sections. Tabs/accordions/modals/drill-downs for secondary info. ≤5–7 primary actions or major data points per glance. ## 6. Microcopy Human, conversational ("Save changes", not "Submit Data"). No Lorem ipsum in functional drafts — generate realistic, domain-specific placeholder data to test real text wrapping. ## 7. Defensive forms Validate on type/blur, not only on submit. Accept natural formatting (spaces/dashes in phone/CC), strip on the backend. Show input rules up front; don't make the user guess and fail. ## 8. Spatial & touch ergonomics Min 44×44px touch target regardless of icon size. Physically separate destructive actions (Delete, Cancel) from progression actions (Save, Next). ## 9. Data density (anti-scroll) Any list/table >20 items → pagination / infinite scroll / "Load More". Complex tables get ≥2 parsing tools (search, column sort, filter). ## 10. Wayfinding (no dead ends) Every screen/modal/overlay has explicit Cancel/Close/Back — never rely on browser back. Global nav highlights current location. Nesting >2 levels → breadcrumbs. Use an existing breadcrumb primitive; if none exists, **create the primitive first** (never inline ad-hoc breadcrumbs). ## 11. Functional accessibility Semantic HTML first (`