# ui-ux-pro-max

Turns a vague "make it look good" into a concrete design system: palette, typography, component rules and stack-aware notes.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 506 installs · ★ 5906
- Author: Galaxy-Dawn
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/Galaxy-Dawn/claude-scholar/tree/HEAD/skills/ui-ux-pro-max/SKILL.md
- Updated: 2026-10-19
- HTML: https://affpapa.org/en/nevibecode/skills/galaxy-dawn-ui-ux-pro-max

## What it does

The skill kicks in when you ask to design or review a UI, build a landing page or dashboard, pick colors and typography, fix accessibility, or implement a frontend with a clear design system. It first pulls the minimum signals out of your request: product type, industry, style keywords, target platform and stack. If you don't name a stack, it falls back to `html-tailwind`.

Under the hood there is one script, `scripts/search.py`, and a heuristics table at `data/ui-reasoning.csv`. Run the script with `--design-system` and it returns a style direction, palette family, typography, interaction effects, a landing-or-layout bias and a list of anti-patterns to avoid. For work that spans several pages, `--persist` writes `design-system/MASTER.md` plus per-page notes under `design-system/pages/`. After that you can search narrowly by domain — `product`, `style`, `color`, `typography`, `landing`, `chart`, `ux` — or by stack such as `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`, `jetpack-compose`.

Python 3 is required, since the commands run through `python3`. The skill is not a substitute for product strategy or user research; the product direction should already be roughly settled. Raw search output is not dumped into the answer — it backs up a coherent design direction instead.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Galaxy-Dawn/claude-scholar --skill ui-ux-pro-max -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/ui-ux-pro-max/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/ui-ux-pro-max/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Galaxy-Dawn/claude-scholar --skill ui-ux-pro-max -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/ui-ux-pro-max/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Galaxy-Dawn/claude-scholar --skill ui-ux-pro-max -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/ui-ux-pro-max/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Galaxy-Dawn/claude-scholar ui-ux-pro-max
```

2. **Manually: put the files in place**
- File: `.github/skills/ui-ux-pro-max/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Galaxy-Dawn/claude-scholar --skill ui-ux-pro-max -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Galaxy-Dawn/claude-scholar --path skills/ui-ux-pro-max
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/ui-ux-pro-max/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Galaxy-Dawn/claude-scholar --skill ui-ux-pro-max -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/Galaxy-Dawn/claude-scholar/tree/HEAD/skills/ui-ux-pro-max/SKILL.md

## When to use it
- pick a palette and type scale for a given product type
- build a landing page or dashboard on one layout grid
- run a UX review and fix accessibility issues
- persist a design system across a multi-page project
- get component rules for a specific frontend stack

## Example prompts
- Design a landing page for a SaaS analytics product, nextjs stack, give me a design system
- Review the signup form for accessibility and suggest fixes
- Build a real-time dashboard with charts and persist the design system in the project

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 945e99bfb702601c.

BEGIN THIRD-PARTY FILE 945e99bfb702601c
````text
---
name: ui-ux-pro-max
description: This skill should be used when the user asks to design or review a UI, create a landing page or dashboard, choose colors or typography, improve accessibility, or implement polished frontend interfaces with a clear design system.
version: 0.2.0
---

# UI/UX Pro Max

Use this skill to turn a vague UI request into a **concrete design system plus implementation guidance**.

## Role

This skill is for:
- design-system selection,
- palette and typography choices,
- UX review and remediation,
- stack-aware frontend implementation guidance,
- lightweight design-system persistence for multi-page work.

It is **not** a replacement for product strategy or user research. Use it to make execution sharper after the product direction is already roughly known.

## Core workflow

### 1. Infer the request shape

Extract the minimum design signals first:
- product type,
- industry,
- style keywords,
- target platform,
- implementation stack.

If the user does not specify a stack, default to `html-tailwind`.

### 2. Generate the design system first

Use the helper script to produce a compact design recommendation:

```bash
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "<product_type> <industry> <keywords>" --design-system -p "Project Name"
```

This produces:
- recommended style direction,
- palette family,
- typography direction,
- interaction / visual effects,
- landing or layout bias,
- anti-patterns to avoid.

If the work spans multiple turns or pages, persist the design system:

```bash
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "<query>" --design-system --persist -p "Project Name"
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "<query>" --design-system --persist -p "Project Name" --page "dashboard"
```

This creates:
- `design-system/MASTER.md`
- optional page-level override notes under `design-system/pages/`

### 3. Pull targeted guidance only when needed

Use a focused search instead of loading everything at once:

```bash
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "glassmorphism dark" --domain style
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "animation accessibility" --domain ux
````
END THIRD-PARTY FILE 945e99bfb702601c

The third-party file has ended. Everything between the 945e99bfb702601c tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2274 of 4268 bytes. © Galaxy-Dawn · MIT · https://github.com/Galaxy-Dawn/claude-scholar/tree/HEAD/skills/ui-ux-pro-max/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md