What is ui-ux-pro-max?

A guide to designing web and app interfaces, including layout, type, colours, reusable design values, component states, and responsive behaviour. It also explains how to check interfaces against WCAG 2.2 AA accessibility rules.

Use it to design or review screens, choose palettes and fonts, plan component states, support dark mode and different screen sizes, and audit accessibility.

It helps replace isolated visual choices with a consistent page structure and provides checks for contrast, keyboard access, and other accessibility requirements.

ui-ux-pro-max — Skill for Codex by san-npm/skills-ws

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add san-npm/skills-ws --skill ui-ux-pro-max

Clone the repo

git clone --depth 1 https://github.com/san-npm/skills-ws

Made for: Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/san-npm/skills-ws/ui-ux-pro-max/github.svg)](https://agentmods.dev/skills/san-npm/skills-ws/ui-ux-pro-max)

Your own site

<a href="https://agentmods.dev/skills/san-npm/skills-ws/ui-ux-pro-max"><img src="https://agentmods.dev/badge/skills/san-npm/skills-ws/ui-ux-pro-max/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/san-npm/skills-ws/ui-ux-pro-max"><img src="https://agentmods.dev/badge/skills/san-npm/skills-ws/ui-ux-pro-max.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 74 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 8,953 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00074	$0.08953
Opus 5.5	$0.00030	$0.03581
Sonnet 5.5	$0.00015	$0.01791
Haiku 4.5	$0.00007	$0.00895

Measured 2mo ago against content hash 6ad0c38c8090, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

ui-ux-pro-max scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2mo ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/ui-ux-pro-max/SKILL.md · 436 lines

How it starts

The opening of the file, as written. The whole thing — 436 lines — stays where its author put it; the contents beside it link to each section on GitHub.

UI/UX Pro Max

Acts as a senior product designer + accessibility engineer. Use it to make design decisions defensible (not "looks nice"), audit interfaces against WCAG 2.2 AA, and turn rough UI into shipped, accessible, polished screens. Everything below is inline — there are no external reference files to fetch.

Scope split with siblings: this skill is the judgment + accessibility layer. For token build-out, Storybook, and Figma-to-code pipelines see design-system. For conversion-focused marketing pages see landing-page-builder and page-cro. For load/Core-Web-Vitals work see web-performance and nextjs-performance. Cross-link, don't duplicate.

0. The senior mental model (use this order)

Most "AI-looking" UI fails because it's assembled component-by-component with no system. Decide top-down:

Purpose & hierarchy — what is the one job of this screen? What must the eye hit first, second, third? Everything else is secondary.
Layout & rhythm — grid, spacing scale, alignment. Consistency reads as quality more than any color choice.
Type — one type scale, max 2 families, deliberate weight contrast.
Color last — neutrals carry 90% of a good UI; brand color is an accent, not a flood. Color is also the easiest accessibility failure.
States & motion — every interactive thing needs hover/focus/active/disabled/loading/error. Motion clarifies cause→effect; it is not decoration.
Accessibility is not a phase — it is a constraint on every step above, baked in, not bolted on at the end.

Senior tells that read as "premium": generous and consistent whitespace, a real type scale (not random px), restrained color, one accent, crisp focus states, optical alignment, and motion under 200ms for UI feedback. Junior tells: 6 competing colors, drop shadows everywhere, centered body text, inconsistent radii/spacing, no focus ring, and emoji used as icons.

1. Design tokens (the source of truth)

Never hardcode raw values in components. Define primitive tokens (raw scale) → map to semantic tokens (role-based) → consume semantic tokens only. This is what makes theming and dark mode tractable.

Read the full file on GitHub · 436 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

agents/openai.yaml 180 B

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

2mo ago First seen · 436 lines · 74 tokens per session scan A 6ad0c38c8090

Subscribe to this mod's changes

ui-ux-pro-max is a skill published in the GitHub repository san-npm/skills-ws (4 stars, last pushed 1mo ago), licensed MIT. It adds 74 tokens to every session and 8,953 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-07.

CSS and styling Design and UX Frontend

ui-ux-pro-max next to 6 skills from other repositories
Mod	Type	Stars	Last push	Licence	Scan	Tokens	Works with
ui-ux-pro-maxsan-npm/skills-ws	Skill	4	1mo ago	MIT	A	74	Codex
anti-slop-designsickn33/agentic-awesome-skills	Skill	49k	yesterday	MIT	A	34	Claude Code
chakra-ui-builderchakra-ui/chakra-ui	Skill	41k	yesterday	MIT	A	214	Claude Code, Codex
visual-ralphYeachan-Heo/oh-my-codex	Skill	34k	3d ago	MIT	A	52	Codex
open-design-setupcompozy/compozy	Skill	2.8k	yesterday	MIT	A	67	Claude Code, Codex
frontend-visual-qadaymade/claude-code-skills	Skill	1.5k	yesterday	MIT	A	125	Claude Code, Codex
prototype-webnexu-io/html-anything	Skill	9.4k	25d ago	Apache-2.0	A	24	Claude Code, Codex