{ "markdown": "
\n\n# uidesign\n\n**Visual UI style knowledge, wired into your AI agent.**\n\n

\n \"MIT\"\n \"1\n \"6\n \"10\n \"no\n

\n\n
\n\n---\n\nA plugin for AI coding agents that knows what each visual style **costs**, not just what it looks like.\n\nAsk an agent for \"a modern UI\" and you get the same purple gradient, the same glass card, the same three feature boxes. This skill makes it choose instead: name the audience and the accessibility floor, pick one style, and say what that choice gives up.\n\n```\n/uidesign:choose a clinic booking app for patients over 70\n\n audience older adults, low-vision common, once-a-month use\n floor WCAG AA, 4.5:1 body, 3:1 controls, 44px targets\n shortlist flat + minimal · skeuomorphic controls\n› recommend flat and minimal, with one skeuomorphic cue on the\n date picker. cost: it will look plain. that is the correct\n trade for an audience that must not guess what is clickable.\n```\n\n## What it knows\n\nTen self-contained reference files, one per style, each with the technique in real values, the\naudience it fits, and the bill it comes with:\n\n`skeuomorphism` · `minimalism` · `neumorphism` · `glassmorphism` · `claymorphism` ·\n`maximalism` · `brutalism` · `liquid-glass` · `spatial-ui` · `choosing`\n\nIt is opinionated where the evidence is one-sided. **Neumorphism** is not recommended anywhere:\nan element the same colour as its background cannot clear the 3:1 non-text contrast a control\nneeds, so the skill names the cost and offers claymorphism instead. That is the register\nthroughout.\n\n## The floor\n\nStyle is negotiable. These are not, and a style that cannot survive them is the finding:\n\n- **4.5:1** body text, **3:1** large text and every control boundary, measured at the **worst**\n point over a gradient, photo, or translucent panel, not an average.\n- A visible `:focus-visible` indicator at 3:1. Deleting the focus ring because it clashes is the\n most common regression in styled interfaces.\n- Roughly **44px** touch targets. Colour is never the only signal for state.\n- `prefers-reduced-motion`, `prefers-reduced-transparency`, `prefers-contrast` and\n `prefers-color-scheme` each get a real fallback that still reads correctly.\n\n## Install\n\nIn **Claude Code**:\n\n```\n/plugin marketplace add mkabumattar/uidesign\n```\n\n```\n/plugin install uidesign@uidesign\n```\n\nThen `/reload-plugins`. Try it:\n\n```\n/uidesign:help\n/uidesign:explain glassmorphism\n/uidesign:compare neumorphism vs claymorphism\n/uidesign:audit src/components\n/uidesign:deslop src/components\n/uidesign:tokens neo-brutalism for a dev tool, accent #FF5C00\n```\n\nUsing a different agent? See **[INSTALL.md](INSTALL.md)**. Every route loads the same\n`skills/ui-design/` directory, so no two agents can drift apart.\n\nOr just talk. The skill activates on questions about the look of an interface, without a command.\n\n## Commands\n\n| Command | What it does |\n|---|---|\n| `/uidesign:explain