Borrowing it
Nothing to install: this file belongs to cdavid817/vanehub-ai. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/cdavid817/vanehub-ai/main/.claude/skills/ui-ux-pro-max/SKILL.mdgit clone --depth 1 https://github.com/cdavid817/vanehub-aiWrote 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.
[](https://agentmods.dev/skills/cdavid817/vanehub-ai/ui-ux-pro-max)<a href="https://agentmods.dev/skills/cdavid817/vanehub-ai/ui-ux-pro-max"><img src="https://agentmods.dev/badge/skills/cdavid817/vanehub-ai/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.
<a href="https://agentmods.dev/skills/cdavid817/vanehub-ai/ui-ux-pro-max"><img src="https://agentmods.dev/badge/skills/cdavid817/vanehub-ai/ui-ux-pro-max.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00132 | $0.11410 |
| Opus 5 | $0.00066 | $0.05705 |
| Sonnet 5 | $0.00026 | $0.02282 |
| Haiku 4.5 | $0.00013 | $0.01141 |
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 11d 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.
This is a copy
83% identical to ui-ux-pro-max — 157 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 686 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI/UX Pro Max - Design Intelligence
Comprehensive design guide for web, mobile, and desktop applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 22 technology stacks. Searchable database with priority-based recommendations.
When to Apply
当任务涉及 UI 结构、视觉设计决策、交互模式或用户体验质量控制 时，应使用此 Skill。
Primary Use Cases
在以下情况此 Skill 最为有用：
- 设计新的页面（Landing Page、Dashboard、Admin、SaaS、Mobile App）
- 创建或重构 UI 组件（按钮、弹窗、表单、表格、图表等）
- 选择配色方案、字体系统、间距规范或布局体系
- 审查 UI 代码的用户体验、可访问性或视觉一致性
- 实现导航结构、动效或响应式行为
- 做产品层级的设计决策（风格、信息层级、品牌表达）
- 提升界面的感知质量、清晰度或可用性
Recommended
在以下情况建议使用此 Skill：
- UI 看起来"不够专业"，但原因不明确
- 收到可用性或体验方面的反馈
- 准备上线前的 UI 质量优化
- 需要对齐跨平台设计（Web / iOS / Android）
- 构建设计系统或可复用组件库
Skip
在以下情况无需使用此 Skill：
- 纯后端逻辑开发
- 仅涉及 API 或数据库设计
- 与界面无关的性能优化
- 基础设施或 DevOps 工作
- 非视觉类脚本或自动化任务
判断准则：如果任务会改变某个功能 看起来如何、使用起来如何、如何运动或如何被交互，就应该使用此 Skill。
Rule Categories by Priority
供人工/AI 查阅：按 1→10 决定先关注哪类规则；需要细则时用 --domain <Domain> 查询。脚本不读取本表。
| Priority | Category | Impact | Domain | Key Checks (Must Have) | Anti-Patterns (Avoid) |
|---|---|---|---|---|---|
| 1 | Accessibility | CRITICAL | ux |
Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels | Removing focus rings, Icon-only buttons without labels |
| 2 | Touch & Interaction | CRITICAL | ux |
Min size 44×44px, 8px+ spacing, Loading feedback | Reliance on hover only, Instant state changes (0ms) |
| 3 | Performance | HIGH | ux |
WebP/AVIF, Lazy loading, Reserve space (CLS < 0.1) | Layout thrashing, Cumulative Layout Shift |
| 4 | Style Selection | HIGH | style, product |
Match product type, Consistency, SVG icons (no emoji) | Mixing flat & skeuomorphic randomly, Emoji as icons |
| 5 | Layout & Responsive | HIGH | ux |
Mobile-first breakpoints, Viewport meta, No horizontal scroll | Horizontal scroll, Fixed px container widths, Disable zoom |
| 6 | Typography & Color | MEDIUM | typography, color |
Base 16px, Line-height 1.5, Semantic color tokens | Text < 12px body, Gray-on-gray, Raw hex in components |
| 7 | Animation | MEDIUM | ux |
Duration 150–300ms, Motion conveys meaning, Spatial continuity | Decorative-only animation, Animating width/height, No reduced-motion |
| 8 | Forms & Feedback | MEDIUM | ux |
Visible labels, Error near field, Helper text, Progressive disclosure | Placeholder-only label, Errors only at top, Overwhelm upfront |
| 9 | Navigation Patterns | HIGH | ux |
Predictable back, Bottom nav ≤5, Deep linking | Overloaded nav, Broken back behavior, No deep links |
| 10 | Charts & Data | LOW | chart |
Legends, Tooltips, Accessible colors | Relying on color alone to convey meaning |
What ships with it
43 files 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.
- data/app-interface.csv 9.5 KB
- data/charts.csv 19 KB
- data/colors.csv 38 KB
- data/google-fonts.csv 726 KB
- data/icons.csv 20 KB
- data/landing.csv 16 KB
- data/motion.csv 10 KB
- data/products.csv 72 KB
- data/react-performance.csv 14 KB
- data/stacks/angular.csv 18 KB
- data/stacks/astro.csv 12 KB
- data/stacks/avalonia.csv 25 KB
- data/stacks/flutter.csv 10 KB
- data/stacks/html-tailwind.csv 11 KB
- data/stacks/javafx.csv 30 KB
- data/stacks/jetpack-compose.csv 8.0 KB
- data/stacks/laravel.csv 18 KB
- data/stacks/nextjs.csv 12 KB
- data/stacks/nuxt-ui.csv 21 KB
- data/stacks/nuxtjs.csv 16 KB
- data/stacks/react-native.csv 9.7 KB
- data/stacks/react.csv 13 KB
- data/stacks/shadcn.csv 16 KB
- data/stacks/svelte.csv 11 KB
- data/stacks/swiftui.csv 11 KB
- data/stacks/threejs.csv 44 KB
- data/stacks/uno.csv 27 KB
- data/stacks/uwp.csv 22 KB
- data/stacks/vue.csv 11 KB
- data/stacks/winui.csv 25 KB
- data/stacks/wpf.csv 22 KB
- data/styles.csv 139 KB
- data/typography.csv 49 KB
- data/ui-reasoning.csv 52 KB
- data/ux-guidelines.csv 18 KB
- scripts/__pycache__/core.cpython-312.pyc 19 KB
- scripts/__pycache__/design_system.cpython-312.pyc 77 KB
- scripts/core.py 18 KB runs code
- scripts/design_system.py 62 KB runs code
- scripts/search.py 8.5 KB runs code
- scripts/tests/test_core.py 5.8 KB runs code
- scripts/tests/test_design_system_mode.py 6.2 KB runs code
- scripts/validate_data.py 4.1 KB runs code
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.
- 11d ago First seen · 686 lines · 132 tokens per session scan A 18a6f7074fff
ui-ux-pro-max is a skill published in the GitHub repository cdavid817/vanehub-ai (116 stars, last pushed 2d ago), licensed Apache-2.0. It adds 132 tokens to every session and 11,410 once invoked, about $0.0007 per session on Opus 5. A static security scan graded it A with 0 findings. It is 83% identical to ui-ux-pro-max, differing in 157 lines, and is treated as a copy.
Other skills, from other repositories
kami-landing
Produce a print-grade single-page kami (紙 / 纸) document — warm parchment canvas, ink-blue accent, serif at one weight, no italic, no cool grays. The output reads like a professional white paper or studio one-pager, not an app UI. Multilingual by design (EN · zh-CN · ja). One self-contained HTML file, zero dependencies.
fs-electric-studio
OpenDesign as an enterprise design platform: a buyer-forwardable proposal for a design-org's economic buyer — pain, value, ROI, rollout. Built as a decision-grade B2B sales deck for economic buyer, design VP, procurement.
hps-bauhaus
A visual-design fundamentals course for new brand designers — grid, type, color, and the exercises that build the eye. Built as a decision-grade professional training deck for junior designers, new hires.
hps-memphis-pop
A pop-culture retrospective on how 1980s design language shaped today's apps — the scenes, the turning point, and the takeaway. Built as a decision-grade story deck for talk audience, design community.
hps-true-blueprint
OpenDesign's engineering blueprint: how the sandbox, sidecar, and daemon fit — the system diagram and the invariants. Built as a decision-grade product management deck for engineering org.
ve-terminal-mono
OpenDesign from the CLI: driving the full design workflow with the od command — scripted, composable, agent-ready. Built as a decision-grade AI literacy deck for developers, power users.