agentsorg/benji

1

dense-ui Use when designing tables and dashboards: column alignment, tabular numerals, row density, sticky headers, bulk actio…

agentsorg/benji

6

2

ui-polish Use when a UI works but feels unfinished and no single dimension is obviously wrong: optical corrections, hairlines, …

agentsorg/benji

6

3

design-critique Use when judging a rendered screen or screenshot rather than code: what to look at in what order, naming what feels w…

agentsorg/benji

5

4

design-tokens Use when naming or structuring theme variables: primitive vs semantic vs component tiers, CSS custom properties, Tail…

agentsorg/benji

5

5

layout Use when composing a page: grid, container width, column structure, alignment, z-index layering, and where the eye la…

agentsorg/benji

5

6

spacing Use when sizing gaps and density: the spacing scale, padding-to-gap ratios, optical alignment, section rhythm, and co…

agentsorg/benji

5

7

surfaces Use when defining the visual plane: elevation, shadow recipes, borders versus hairlines, corner radii, blur and trans…

agentsorg/benji

5

8

ui-review Use when reviewing non-motion UI code and a Before/After/Why table plus an explicit verdict is required.

agentsorg/benji

5

9

ui-states Use when specifying non-happy-path states: empty, loading, skeleton versus spinner, error, offline, partial data, and…

agentsorg/benji

5

10

a11y Use when a UI must work without a mouse or without sight: keyboard order, focus management, focus-visible, ARIA roles…

agentsorg/benji

4

11

ai-tells Use when checking whether a UI looks machine-generated: `transition: all`, `scale(0)`, pure-black shadows, default vi…

agentsorg/benji

4

12

color Use when picking, converting, or repairing color values: OKLCH ramps, hue and chroma tuning, contrast ratios, P3 gamu…

agentsorg/benji

4

13

forms Use when building inputs and validation: field layout, labels, validation timing, error recovery, autofill, keyboard …

agentsorg/benji

4

14

gestures Use when motion follows a finger or cursor: drag, swipe-to-dismiss, sheets, momentum, velocity thresholds, rubber-ban…

agentsorg/benji

4

15

imagery Use when handling photos and illustration: aspect ratios, cropping, placeholders and blur-up, avatars, device frames,…

agentsorg/benji

4

16

marketing-pages Use when building a landing, pricing, or launch page: hero structure, section rhythm, social proof, scroll behavior, …

agentsorg/benji

4

17

modal-or-page Use when deciding where a flow lives: modal, drawer, sheet, popover, inline expand, or full page - plus dismissal, fo…

agentsorg/benji

4

18

motion Use when adding or tuning one element's motion: whether to animate at all, easing curve, duration, enter/exit shape, …

agentsorg/benji

4

19

motion-opportunities Use when a UI feels static and you need to find where motion is missing. Proposes candidates and rejects most of them.

agentsorg/benji

4

20

native-feel Use when web UI must pass as a native app: momentum scroll, keyboard avoidance, back gesture, platform control conven…

agentsorg/benji

4

21

navigation Use when structuring how users move through an app: tabs, sidebars, breadcrumbs, hierarchy depth, active state, back …

agentsorg/benji

4

22

responsive Use when a layout must adapt across widths: breakpoints, fluid type and space, container queries, reflow order, and s…

agentsorg/benji

4

23

search-filter Use when building search and filtering: query input, facets and chips, result ranking display, zero results, async st…

agentsorg/benji

4

24

touch-input Use when the pointer is a finger: hit-target size, thumb reach, hover gating on touch, tap latency, scroll conflicts,…

agentsorg/benji

4

25

transitions Use when moving between states, views, or routes: shared-element continuity, morphing, stagger, spatial direction, an…

agentsorg/benji

4

26

typography Use when setting type: scale, weight, line-height, measure, tracking, numerals, font loading, and hierarchy carried b…

agentsorg/benji

4

27

brand-identity Use when translating a brand into interface: accent discipline, logo usage, voice-to-visual mapping, illustration sty…

agentsorg/benji

3

28

charts Use when visualizing data: chart type choice, axes and gridlines, color encoding, sparklines, tooltips, and interpola…

agentsorg/benji

3

29

component-api Use when designing a component's props and composition: defaults, variants, controlled versus uncontrolled, slots, an…

agentsorg/benji

3

30

dark-mode Use when deriving or fixing a dark theme: lightness mapping, elevation by surface lightness, shadow replacement, imag…

agentsorg/benji

3

31

delight Use when deciding whether a moment earns extra craft: the delight-impact curve, easter eggs, celebration, sound and h…

agentsorg/benji

3

32

iconography Use when choosing or drawing icons: stroke weight, pixel grid, optical sizing, icon-versus-label, and morphing one ic…

agentsorg/benji

3

33

motion-audit Use when auditing motion across an existing codebase and a prioritized fix plan is required, not a per-diff verdict.

agentsorg/benji

3

34

motion-review Use when reviewing a diff that contains animation code and a Block or Approve verdict with a Before/After/Why table i…

agentsorg/benji

3

35

naming Use when someone describes an effect or pattern without knowing its name and wants the exact term. For naming a thing…

agentsorg/benji

3

36

notifications Use when designing notification surfaces: toasts, badges, push, inbox, frequency and batching, priority, quiet hours,…

agentsorg/benji

3

37

onboarding Use when designing a first run: activation path, progressive disclosure, empty-state coaching over tours, permission …

agentsorg/benji

3

38

perf Use when a UI measurably janks or loads slowly: compositing, layout thrash, virtualization, image loading, and bundle…

agentsorg/benji

3

39

pick-library Use ONLY when explicitly asked which library or dependency to use for a frontend task. Never invoke on your own.

agentsorg/benji

3

40

prototype-variants Use ONLY when explicitly asked to explore several directions for one interface problem. Never invoke on your own.

agentsorg/benji

3

41

ui-copy Use when writing interface strings: button labels, error messages, empty-state text, toasts, tooltips, confirmations,…

agentsorg/benji

3

42

benji Load when the task touches how a product looks, moves, or reads — visual design, layout, spacing, colour, type, motio…

agentsorg/benji

1