YOSSII812001YOSSII812001/claude-code-jarvis/skills/ui-ux-pro-max/SKILL.md

ui-ux-pro-max

Skill1 starsChanged 7 months agoMITView on GitHub

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.

Installs packages

177 other projects use a version of this, 73 of them edited.

Adopted by

Most recently taken up by

cveralyon/axel-setupedited, first seen Nov 8, 2026
podo/design-agent-skillstheir own version, first seen Nov 8, 2026
lingyired/status-triotheir own version, first seen Nov 8, 2026
dalonga-kohi/mawltheir own version, first seen Nov 8, 2026
smart-coder-labs/nexus-mindedited, first seen Nov 8, 2026
blinkboxhq/Blinkboxtheir own version, first seen Nov 8, 2026

Used with

Projects with it also use stock_analysis, ckm:design-system and 10 more.

Other files people use alongside this one.

Liang-MHSkill
stock_analysis
获取 A 股、基金和港股的实时行情和技术分析数据
Also in 5 projects that use this
klauswgSkill
ckm:design-system
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
Also in 24 projects that use this
seikaikyoSkill
banner-design
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional generated or supplied visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage.
Also in 38 projects that use this
dav-niu474Skill
aminer-data-search
使用 AMiner 开放平台 API 进行学术数据查询与分析。当用户需要查询学者信息、论文详情、机构数据、期刊内容或专利信息时使用此 skill。触发场景：提到 AMiner、学术数据查询、查论文/学者/机构/期刊/专利、学术问答搜索、引用分析、科研机构分析、学者画像、论文引用链、期刊投稿分析等。支持 6 大组合工作流（学者全景分析、论文深度挖掘、机构研究力分析、期刊论文监控、学术智能问答、专利链分析）以及 28 个独立 API 的直接调用。即使用户只说"帮我查一下 XXX 学者"或"找找关于 XXX 的论文"，也应主动使用此 skill。
Also in 4 projects that use this
dav-niu474Skill
auto-target-tracker
自动目标进度追踪器。在对话中检测到目标相关图片（笔记、进度、截图、记录）时，自动调用 VLM 识别关键信息并记录到目标日记。适用于学习管理、健身追踪、工作进度、习惯养成、创作记录等所有目标管理场景。
Also in 4 projects that use this
+7 more from dav-niu474

Other versions177 projects use a version of this.
Word for word · 0
None found.
Edited · 73
Forget-C/Jellyfish★ 6.6k56% same
allenpeng0705/EnvoyMesh★ 3.1k46% same
hzm0321/real-time-fund★ 1.8k56% same
qdleader/qdleader★ 1.5k45% same
Jwuthri/Tracely-ai★ 1.3k45% same
hanliang97/MatrixMedia★ 1.3k53% same
jwuthri-cloud/Tracely-ai★ 97945% same
Codennnn/Green-Wall★ 81189% same
coco-research/coco★ 79742% same
Ohh-889/skyroc-admin★ 79545% same
63 more not listed
Wrote their own version · 104
nextlevelbuilder/ui-ux-pro-max-skill★ 147ksame name
awesome-dsh-plugin/awesome-dsh-plugin★ 24ksame name
Galaxy-Dawn/claude-scholar★ 5.9ksame name
lingyired/status-trio★ 1.8ksame name
danieleteti/delphimvcframework★ 1.4ksame name
doccker/cc-use-exp★ 1ksame name
melandlabs/openloomi★ 1ksame name
shobcoder/shob★ 575same name
antgroup/llm-oss-landscape★ 553same name
Sayhi-bzb/Agent-HTML★ 542same name
94 more not listed
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository66 other files it gives its agents.
- CLAUDE.mdCLAUDE.md
- agent-teams-codingSkill
- AI External Brain (Knowledge Base)Skill
- awesome-design-md-jpSkill
- awesome-design-mdSkill
- softbank-invoiceSkill
- claude-for-chromeSkill
- codebase-patrolSkill
- codex-autopilotSkill
- codexSkill
- Context7 Documentation LookupSkill
- design-review-checklistSkill
- detail-design-docSkill
- discord-promotionSkill
- drawioSkill
- e2e-testSkill
- fish-audio-apiSkill
- fish-audio-docsSkill
- fish-audioSkill
- fortress-implementSkill
- fortress-reviewSkill
- freee Developer APISkill
- frontend-skillSkill
- gBizINFO APISkill
- github-cliSkill
- git-worktree-parallelSkill
- google-sheets-apiSkill
- google-sheets-mcpSkill
- graphify-windowsSkill
- issue-autopilot-batchSkill
- issue-flowSkill
- issue-plannerSkill
- Jグランツ APISkill
- Knip - Dead Code DetectionSkill
- liftkitSkill
- llm-vulnerability-testSkill
- MarkItDownSkill
- mba-strategy-consultantSkill
- Obsidian CLI OperationsSkill
- openrouterSkill
- PAY.JP CLI OperationsSkill
- playwright-cliSkill
- playwrightSkill
- qwen-coderSkill
- ryokan-forecastSkill
- security-adversarialSkill
- security-settingsSkill
- skill-improveSkill
- stoic-daily-practiceSkill
- Stripe CLI OperationsSkill
- Stripe PayPay決済Skill
- Supabase CLI OperationsSkill
- tile-terminalsSkill
- timesfmSkill
- usacon-account-mgmtSkill
- usacon-cliSkill
- usacon-discordSkill
- usacon-partner-registrationSkill
- usaconSkill
- ux-psychologySkill
- The first 60 shown.

The file

We split this skill into the rules it gives an agent

8 rules. 0 are common, 6 are distinctive, and 2 are very specific to this project.

0
Common
Most of the 167 edited versions we read keep these.
6
Distinctive
This author's own choices. Worth a look.
2
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Distinctive:
Check if Python is installed:
line 12
Distinctive:
If Python is not installed:
line 24
Distinctive:
When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
line 45
Very specific:
Use search.py multiple times to gather comprehensive information.
line 57
Very specific:
If user doesn't specify a stack, default to html-tailwind.
line 82
Distinctive:
Always check UX: - Search "animation", "z-index", "accessibility" for common issues
line 167
Distinctive:
Iterate: - If first search doesn't match, try different keywords
line 169
Distinctive:
Before delivering UI code, verify these items:
line 215

“Common” is measured: kept by at least 6 in 10 of the 167 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

SKILL.md

UI/UX Pro Max - Design Intelligence

Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices.

Prerequisites

Check if Python is installed:

Windows:

python --version

macOS/Linux:

python3 --version || python --version

If Python is not installed:

Windows:

winget install Python.Python.3.12

macOS:

brew install python3

Ubuntu/Debian:

sudo apt update && sudo apt install python3

How to Use This Skill

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

Step 1: Analyze User Requirements

Extract key information from user request:

Product type: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
Style keywords: minimal, playful, professional, elegant, dark mode, etc.
Industry: healthcare, fintech, gaming, education, etc.
Stack: React, Vue, Next.js, or default to html-tailwind

Step 2: Search Relevant Domains

Use search.py multiple times to gather comprehensive information. Search until you have enough context.

Windows:

python .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> -n <max_results>

macOS/Linux:

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

Recommended search order:

Product - Get style recommendations for product type
Style - Get detailed style guide (colors, effects, frameworks)
Typography - Get font pairings with Google Fonts imports
Color - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
Landing - Get page structure (if landing page)
Chart - Get chart recommendations (if dashboard/analytics)
UX - Get best practices and anti-patterns
Stack - Get stack-specific guidelines (default: html-tailwind)

Step 3: Stack Guidelines (Default: html-tailwind)

If user doesn't specify a stack, default to html-tailwind.

Windows:

python .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind

macOS/Linux:

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind

Available stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter

Search Reference

Available Domains

Domain	Use For	Example Keywords
`product`	Product type recommendations	SaaS, e-commerce, portfolio, healthcare, beauty, service
`style`	UI styles, colors, effects	glassmorphism, minimalism, dark mode, brutalism
`typography`	Font pairings, Google Fonts	elegant, playful, professional, modern
`color`	Color palettes by product type	saas, ecommerce, healthcare, beauty, fintech, service
`landing`	Page structure, CTA strategies	hero, hero-centric, testimonial, pricing, social-proof
`chart`	Chart types, library recommendations	trend, comparison, timeline, funnel, pie
`ux`	Best practices, anti-patterns	animation, accessibility, z-index, loading
`prompt`	AI prompts, CSS keywords	(style name)

Available Stacks

Stack	Focus
`html-tailwind`	Tailwind utilities, responsive, a11y (DEFAULT)
`react`	State, hooks, performance, patterns
`nextjs`	SSR, routing, images, API routes
`vue`	Composition API, Pinia, Vue Router
`svelte`	Runes, stores, SvelteKit
`swiftui`	Views, State, Navigation, Animation
`react-native`	Components, Navigation, Lists
`flutter`	Widgets, State, Layout, Theming

Example Workflow

User request: "Create a minimal SaaS dashboard"

AI should (Windows):

# 1. Search product type
python .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --domain product

# 2. Search style (based on industry: beauty, elegant)
python .claude/skills/ui-ux-pro-max/scripts/search.py "minimal clean" --domain style

# 3. Search typography
python .claude/skills/ui-ux-pro-max/scripts/search.py "professional modern" --domain typography

# 4. Search color palette
python .claude/skills/ui-ux-pro-max/scripts/search.py "saas" --domain color

# 5. Search chart (for dashboard)
python .claude/skills/ui-ux-pro-max/scripts/search.py "trend comparison" --domain chart

# 6. Search UX guidelines
python .claude/skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux
python .claude/skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux

# 7. Search stack guidelines (default: html-tailwind)
python .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind

Then: Synthesize all search results and implement the design.

Tips for Better Results

Be specific with keywords - "healthcare SaaS dashboard" > "app"
Search multiple times - Different keywords reveal different insights
Combine domains - Style + Typography + Color = Complete design system
Always check UX - Search "animation", "z-index", "accessibility" for common issues
Use stack flag - Get implementation-specific best practices
Iterate - If first search doesn't match, try different keywords

Common Rules for Professional UI

These are frequently overlooked issues that make UI look unprofessional:

Icons & Visual Elements

Rule	Do	Don't
No emoji icons	Use SVG icons (Heroicons, Lucide, Simple Icons)	Use emojis like as UI icons
Stable hover states	Use color/opacity transitions on hover	Use scale transforms that shift layout
Correct brand logos	Research official SVG from Simple Icons	Guess or use incorrect logo paths
Consistent icon sizing	Use fixed viewBox (24x24) with w-6 h-6	Mix different icon sizes randomly

Interaction & Cursor

Rule	Do	Don't
Cursor pointer	Add `cursor-pointer` to all clickable/hoverable cards	Leave default cursor on interactive elements
Hover feedback	Provide visual feedback (color, shadow, border)	No indication element is interactive
Smooth transitions	Use `transition-colors duration-200`	Instant state changes or too slow (>500ms)

Light/Dark Mode Contrast

Rule	Do	Don't
Glass card light mode	Use `bg-white/80` or higher opacity	Use `bg-white/10` (too transparent)
Text contrast light	Use `#0F172A` (slate-900) for text	Use `#94A3B8` (slate-400) for body text
Muted text light	Use `#475569` (slate-600) minimum	Use gray-400 or lighter
Border visibility	Use `border-gray-200` in light mode	Use `border-white/10` (invisible)

Layout & Spacing

Rule	Do	Don't
Floating navbar	Add `top-4 left-4 right-4` spacing	Stick navbar to `top-0 left-0 right-0`
Content padding	Account for fixed navbar height	Let content hide behind fixed elements
Consistent max-width	Use same `max-w-6xl` or `max-w-7xl`	Mix different container widths

Pre-Delivery Checklist

Before delivering UI code, verify these items:

Visual Quality

No emojis used as icons (use SVG instead)
All icons from consistent icon set (Heroicons/Lucide)
Brand logos are correct (verified from Simple Icons)
Hover states don't cause layout shift
Use theme colors directly (bg-primary) not var() wrapper

Interaction

All clickable elements have cursor-pointer
Hover states provide clear visual feedback
Transitions are smooth (150-300ms)
Focus states visible for keyboard navigation

Light/Dark Mode

Light mode text has sufficient contrast (4.5:1 minimum)
Glass/transparent elements visible in light mode
Borders visible in both modes
Test both modes before delivery

Layout

Floating elements have proper spacing from edges
No content hidden behind fixed navbars
Responsive at 320px, 768px, 1024px, 1440px
No horizontal scroll on mobile

Accessibility

All images have alt text
Form inputs have labels
Color is not the only indicator
prefers-reduced-motion respected

トラブルシューティング

Q: search.py の実行でエラーが出る

A: (1) Python がインストールされているか確認してください（Windows: python --version、macOS/Linux: python3 --version）。(2) スクリプトのパスが正しいか確認してください（.claude/skills/ui-ux-pro-max/scripts/search.py）。(3) Windows で python コマンドが動かない場合は py コマンドを試してください。

Q: どのスタイルを選べばよいか分からない

A: まず --domain product でプロダクトタイプに基づく推奨スタイルを検索してください。業界や用途に応じた推奨が返されます。迷う場合は minimalism（SaaS/ビジネス向け）や glassmorphism（モダンなダッシュボード向け）から始めるのが安全です。

Q: ライトモードとダークモードで見た目が大きく崩れる

A: 「Common Rules for Professional UI」の「Light/Dark Mode Contrast」セクションを確認してください。特にライトモードでは bg-white/10（透明すぎ）や text-gray-400（コントラスト不足）が原因になりがちです。bg-white/80 以上、テキストは slate-900 を基準にしてください。

改訂履歴

日付	版	変更内容
2025-08-15	v1.0	初版作成。50スタイル、21パレット、50フォントペアリング、20チャートタイプ、8スタック対応、search.pyスクリプトを収録
2026-03-04	v1.1	トラブルシューティング、関連スキル、改訂履歴を追加

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free

Adopted by

Most recently taken up by

Used with

stock_analysis

ckm:design-system

banner-design

aminer-data-search

auto-target-tracker

Word for word · 0

Edited · 73

Wrote their own version · 104

The file

8 rules. 0 are common, 6 are distinctive, and 2 are very specific to this project.

UI/UX Pro Max - Design Intelligence

Prerequisites

How to Use This Skill

Step 1: Analyze User Requirements

Step 2: Search Relevant Domains

Step 3: Stack Guidelines (Default: html-tailwind)

Search Reference

Available Domains

Available Stacks

Example Workflow

Tips for Better Results

Common Rules for Professional UI

Icons & Visual Elements

Interaction & Cursor

Light/Dark Mode Contrast

Layout & Spacing

Pre-Delivery Checklist

Visual Quality

Interaction

Light/Dark Mode

Layout

Accessibility

トラブルシューティング

Q: search.py の実行でエラーが出る

Q: どのスタイルを選べばよいか分からない

Q: ライトモードとダークモードで見た目が大きく崩れる

関連スキル

改訂履歴

Does it work?

No reviews yet

Your trail

Now do this for your own.