ui-ux-pro-max

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha 7196f765fc11 · 31 Oct 2026Report an issue or request a re-scan

• Publisherathevon GitHub userOwner of the repository this skill is read from
• Source folderathevon/genjutsu/skills/_jutsu/ui-ux-pro-maxThe exact folder we audited
• LicenceNOASSERTIONAs the repository states it
• Commit pinned for this verdict7196f765fc11A new audit runs when the source changes
• Repository statusNot archivedLast push 25 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its description: UI/UX design-system intelligence - 84 styles, 192 palettes, 74 font pairings, 25 charts, 99 UX guidelines across 22 stacks (searchable dataset + CLI). Internal genjutsu module: loaded by /genjutsu:cast and…

---
name: ui-ux-pro-max
description: "UI/UX design-system intelligence - 84 styles, 192 palettes, 74 font pairings, 25 charts, 99 UX guidelines across 22 stacks (searchable dataset + CLI). Internal genjutsu module: loaded by /genjutsu:cast and /genjutsu:paint, not invoked directly."
metadata:
  internal: true
---

> **Version-sensitive.** Every API name, SDK gate and browser-support claim below was
> verified on **2026-09-08** against primary sources. What against, and when, is in
> `_jutsu/VERSIONS.md`. If that date is old, re-verify before acting on a version number.

# UI/UX Pro Max - Design Intelligence

Comprehensive design guide for web and mobile applications. Contains 84 styles, 192 color palettes, 74 font pairings, 99 UX guidelines, and 25 chart types across 22 technology stacks. Searchable database with priority-based recommendations.

## When to Apply

Reference these guidelines when:
- Designing new UI components or pages
- Choosing color palettes and typography
- Reviewing code for UX issues
- Building landing pages or dashboards
- Implementing accessibility requirements

## Rule Categories by Priority

| Priority | Category | Impact | Domain |
|----------|----------|--------|--------|
| 1 | Accessibility | CRITICAL | `ux` |
| 2 | Touch & Interaction | CRITICAL | `ux` |
| 3 | Performance | HIGH | `ux` |
| 4 | Layout & Responsive | HIGH | `ux` |
| 5 | Typography & Color | MEDIUM | `typography`, `color` |
| 6 | Animation | MEDIUM | `ux` |
| 7 | Style Selection | MEDIUM | `style`, `product` |
| 8 | Charts & Data | LOW | `chart` |

## Quick Reference

### 1. Accessibility (CRITICAL)

- `color-contrast` - Minimum 4.5:1 ratio for normal text
- `focus-states` - Visible focus rings on interactive elements
- `alt-text` - Descriptive alt text for meaningful images
- `aria-labels` - aria-label for icon-only buttons
- `keyboard-nav` - Tab order matches visual order
- `form-labels` - Use label with for attribute

### 2. Touch & Interaction (CRITICAL)

- `touch-target-size` - Minimum 44x44px touch targets
- `hover-vs-tap` - Use click/tap for primary interactions
- `loading-buttons` - Disable button during async operations
- `error-feedback` - Clear error messages near problem
- `cursor-pointer` - Add cursor-pointer to clickable elements

### 3. Performance (HIGH)

- `image-optimization` - Use WebP, srcset, lazy loading
- `reduced-motion` - Check prefers-reduced-motion
- `content-jumping` - Reserve space for async content

### 4. Layout & Responsive (HIGH)

- `viewport-meta` - width=device-width initial-scale=1
- `readable-font-size` - Minimum 16px body text on mobile
- `horizontal-scroll` - Ensure content fits viewport width
- `z-index-management` - Define z-index scale (10, 20, 30, 50)

### 5. Typography & Color (MEDIUM)

- `line-height` - Use 1.5-1.75 for body text
- `line-length` - Limit to 65-75 characters per line
- `font-pairing` - Match heading/body font personalities

### 6. Animation (MEDIUM)

- `duration-timing` - Use 150-300ms for micro-interactions
- `transform-performance` - Use transform/opacity, not width/height
- `loading-states` - Skeleton screens or spinners

### 7. Style Selection (MEDIUM)

- `style-match` - Match style to product type
- `consistency` - Use same style across all pages
- `no-emoji-icons` - Use SVG icons, not emojis

### 8. Charts & Data (LOW)

- `chart-type` - Match chart type to data type
- `color-guidance` - Use accessible color palettes
- `data-table` - Provide table alternative for accessibility

## How to Use

Search specific domains using the CLI tool below.

---

## Prerequisites

Requires `python3` (available by default in the Claude Code shell and in claude.ai's code-execution sandbox). This skill does not install anything.

**Always pass `-f markdown` on `--design-system`.** The default is `ascii`, which is built for a
terminal: it emits about 7,000 bytes carrying raw ANSI colour escapes, and `hex_to_ansi` has no
isatty guard, so those escapes survive being piped and land in the context window as garbage.
`-f markdown` returns the same information in about 2,100 bytes of clean markdown. The consumer
here is a model, not a terminal, so this is a 3.3x token reduction on the most-run command in
this skill.

---

## How to Use This Skill

When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:

**Every command below runs in the same shell call as this block.** Shell state does not survive
between calls, and the working directory is not guaranteed to either, so `UIUX_DIR` is derived
again each time and every command names the script by its full path. The block tries, in order:
`$SKILL_BASE/ui-ux-pro-max` when an orchestrator's skill-base block ran earlier in the same call;
a directory you name yourself by putting `UIUX_DIR='/absolute/path/to/ui-ux-pro-max'` in front of
the block; this skill's own directory when the host substitutes `CLAUDE_SKILL_DIR` (a standalone
install); then a bounded search of the usual skills
directories. When you already know the absolute path, you may write it in place of `$UIUX_DIR`.

<!-- genjutsu:uiux-dir:start -->
```bash
# Commands run from the project, so --persist writes to the project root and
# never into the skill directory.
PROJECT_ROOT="$PWD"
uiux_given="${UIUX_DIR:-}"
UIUX_DIR=""
for uiux_c in "${SKILL_BASE:+$SKILL_BASE/ui-ux-pro-max}" "$uiux_given" "${CLAUDE_SKILL_DIR}"; do
  [ -n "$uiux_c" ] && [ -f "$uiux_c/scripts/search.py" ] && { UIUX_DIR="$uiux_c"; break; }
done
if [ -z "$UIUX_DIR" ]; then
  for uiux_root in "$HOME/.agents/skills" "$HOME/.claude/skills" "$HOME/.claude/plugins" /mnt/skills; do
    [ -d "$uiux_root" ] || continue
    uiux_hit="$(find -L "$uiux_root" -maxdepth 9 -type f -path '*/ui-ux-pro-max/scripts/search.py' 2>/dev/null | sort -V | tail -1)"
    [ -n "$uiux_hit" ] && { UIUX_DIR="${uiux_hit%/scripts/search.py}"; break; }
  done
fi
[ -n "$UIUX_DIR" ] || echo "genjutsu: ui-ux-pro-max not found. Say so in one line and derive the design sys

Excerpt, first 6,000 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

1. 2026-10-31
   ✓SAFE B 89 / 100

   first audit · source 7196f765fc11

Questions about ui-ux-pro-max

• github.com/athevon/genjutsu/tree/main/skills/_jutsu/ui-ux-pro-ma — the audited source at commit 7196f765fc11 and every finding aboveObserved · 31 Oct 2026

Spotted something wrong? Report a correction · Methodology