agentleFS
Sign inStart free
tsukhanitsukhani/jclaw/skills/ui-ux-pro-max/SKILL.md

ui-ux-pro-max

Skill42 starsChanged 8 days agoMITView on GitHub

UI/UX design intelligence for web and mobile. Includes 67 styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 16 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Angular, Laravel, and more). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient.

  • Installs packages

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

Adopted by

Most recently taken up by

Used with

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

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • 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

The file

We split this skill into the rules it gives an agent

12 rules. 0 are common, 6 are distinctive, and 6 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.

  • 6

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Use this skill when the task involves UI structure, visual design decisions, interaction patterns, or user experience quality control.

    line 19
  2. Distinctive:

    Only involving API or database design

    line 42
  3. Distinctive:

    Decision criteria: If the task will change how a feature looks, feels, moves, or is interacted with, use this skill.

    line 47
  4. Very specific:

    When building a specific page, first check design-system/<project>/pages/[page].md

    line 118
  5. Distinctive:

    If the page file exists, its rules override the Master file

    line 119
  6. Very specific:

    If not, use design-system/<project>/MASTER.md exclusively

    line 120
  7. Distinctive:

    After getting the design system, use domain searches for additional details:

    line 124
  8. Distinctive:

    Before delivering UI code, verify:

    line 195
  9. Very specific:

    Use multi-dimensional keywords: "entertainment social vibrant content-dense" not just "app"

    line 236
  10. Very specific:

    Always use --design-system first for full recommendations, then --domain to deep-dive

    line 238
  11. Very specific:

    Add --stack <your-stack> for implementation-specific guidance

    line 239
  12. Very specific:

    Run --domain ux "animation accessibility z-index loading" as a UX validation pass before implementation

    line 240

“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

Comprehensive design guide for web and mobile applications. Contains 67 styles, 161 color palettes, 57 font pairings, 161 product types with reasoning rules, 99 UX guidelines, and 25 chart types across 16 technology stacks. Searchable database with BM25-ranked recommendations and an AI-powered Design System Generator.

When to Apply

Use this skill when the task involves UI structure, visual design decisions, interaction patterns, or user experience quality control.

Must Use

  • Designing new pages (Landing Page, Dashboard, Admin, SaaS, Mobile App)
  • Creating or refactoring UI components (buttons, modals, forms, tables, charts, etc.)
  • Choosing color schemes, typography systems, spacing standards, or layout systems
  • Reviewing UI code for user experience, accessibility, or visual consistency
  • Implementing navigation structures, animations, or responsive behavior
  • Making product-level design decisions (style, information hierarchy, brand expression)
  • Improving perceived quality, clarity, or usability of interfaces

Recommended

  • UI looks "not professional enough" but the reason is unclear
  • Receiving feedback on usability or experience
  • Pre-launch UI quality optimization
  • Aligning cross-platform design (Web / iOS / Android)
  • Building design systems or reusable component libraries

Skip

  • Pure backend logic development
  • Only involving API or database design
  • Performance optimization unrelated to the interface
  • Infrastructure or DevOps work
  • Non-visual scripts or automation tasks

Decision criteria: If the task will change how a feature looks, feels, moves, or is interacted with, use this skill.

Prerequisites

Python 3 is required. Check with:

python3 --version || python --version

If missing, install:

  • macOS: brew install python3
  • Ubuntu/Debian: sudo apt update && sudo apt install python3
  • Windows: winget install Python.Python.3.12

Workflow

Step 1: Analyze User Requirements

Extract from the user's request:

  • Product type: SaaS, e-commerce, fintech, healthcare, gaming, portfolio, beauty, service, etc.
  • Target audience: Consumer, enterprise, age group, usage context
  • Style keywords: playful, vibrant, minimal, dark mode, content-first, immersive, etc.
  • Stack: HTML+Tailwind (default), React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, etc.

Step 2: Generate Design System (REQUIRED for new projects)

Always start with --design-system to get comprehensive AI-powered recommendations:

python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

This command:

  1. Searches 5 domains in parallel (product, style, color, landing, typography)
  2. Applies 161 industry-specific reasoning rules from ui-reasoning.csv
  3. Returns a complete design system: pattern, style, colors, typography, effects
  4. Includes anti-patterns to avoid and a pre-delivery checklist

Example:

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

Markdown output (for documentation):

python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

Step 2b: Persist Design System (Master + Overrides Pattern)

To save the design system for hierarchical retrieval across sessions:

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"

This creates:

  • design-system/<project>/MASTER.md — Global Source of Truth
  • design-system/<project>/pages/ — Folder for page-specific overrides

With page-specific override:

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

How hierarchical retrieval works:

  1. When building a specific page, first check design-system/<project>/pages/[page].md
  2. If the page file exists, its rules override the Master file
  3. If not, use design-system/<project>/MASTER.md exclusively

Step 3: Supplement with Detailed Searches

After getting the design system, use domain searches for additional details:

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
NeedDomainExample
Product type patternsproduct--domain product "entertainment social"
More style optionsstyle--domain style "glassmorphism dark"
Color palettescolor--domain color "entertainment vibrant"
Font pairingstypography--domain typography "playful modern"
Chart recommendationschart--domain chart "real-time dashboard"
UX best practicesux--domain ux "animation accessibility"
Landing structurelanding--domain landing "hero social-proof"
Individual Google Fontsgoogle-fonts--domain google-fonts "sans serif popular"
Icon recommendationsicons--domain icons "navigation arrows"
React/Next.js performancereact--domain react "rerender memo list"
App interface guidelinesweb--domain web "accessibilityLabel touch safe-areas"

Step 4: Stack-Specific Guidelines

Get implementation-specific best practices for your stack:

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

Available stacks: react, nextjs, vue, svelte, astro, swiftui, react-native, flutter, nuxtjs, nuxt-ui, html-tailwind, shadcn, jetpack-compose, threejs, angular, laravel

Search Reference

Available Domains

DomainUse ForExample Keywords
productProduct type recommendationsSaaS, e-commerce, portfolio, healthcare, beauty, service
styleUI styles, colors, effectsglassmorphism, minimalism, dark mode, brutalism
typographyFont pairings, Google Fontselegant, playful, professional, modern
colorColor palettes by product typesaas, ecommerce, healthcare, beauty, fintech, service
landingPage structure, CTA strategieshero, hero-centric, testimonial, pricing, social-proof
chartChart types, library recommendationstrend, comparison, timeline, funnel, pie
uxBest practices, anti-patternsanimation, accessibility, z-index, loading
google-fontsIndividual Google Fonts lookupsans serif, monospace, variable font, popular
iconsIcon library recommendationsnavigation, arrows, social, media
reactReact/Next.js performancewaterfall, bundle, suspense, memo, rerender, cache
webApp interface guidelines (iOS/Android/RN)accessibilityLabel, touch targets, safe areas

Quick Reference: Rule Categories by Priority

PriorityCategoryImpactDomainKey ChecksAnti-Patterns
1AccessibilityCRITICALuxContrast 4.5:1, Alt text, Keyboard nav, Aria-labelsRemoving focus rings, Icon-only buttons without labels
2Touch & InteractionCRITICALuxMin size 44×44px, 8px+ spacing, Loading feedbackReliance on hover only, Instant state changes (0ms)
3PerformanceHIGHuxWebP/AVIF, Lazy loading, Reserve space (CLS < 0.1)Layout thrashing, Cumulative Layout Shift
4Style SelectionHIGHstyle, productMatch product type, Consistency, SVG icons (no emoji)Mixing flat & skeuomorphic, Emoji as icons
5Layout & ResponsiveHIGHuxMobile-first breakpoints, Viewport meta, No horizontal scrollHorizontal scroll, Fixed px containers, Disable zoom
6Typography & ColorMEDIUMtypography, colorBase 16px, Line-height 1.5, Semantic color tokensText < 12px body, Gray-on-gray, Raw hex in components
7AnimationMEDIUMuxDuration 150–300ms, Motion conveys meaning, Spatial continuityDecorative-only animation, Animating width/height, No reduced-motion
8Forms & FeedbackMEDIUMuxVisible labels, Error near field, Helper text, Progressive disclosurePlaceholder-only label, Errors only at top, Overwhelm upfront
9Navigation PatternsHIGHuxPredictable back, Bottom nav ≤5, Deep linkingOverloaded nav, Broken back behavior, No deep links
10Charts & DataLOWchartLegends, Tooltips, Accessible colorsRelying on color alone to convey meaning

Pre-Delivery Checklist

Before delivering UI code, verify:

Visual Quality

  • No emojis used as icons (use SVG: Heroicons/Lucide)
  • All icons from consistent icon family and style
  • Official brand assets used with correct proportions
  • Pressed-state visuals do not shift layout bounds
  • Semantic theme tokens used consistently

Interaction

  • All tappable elements provide clear pressed feedback
  • Touch targets ≥44×44pt (iOS) / ≥48×48dp (Android)
  • Micro-interaction timing 150-300ms with native easing
  • Disabled states visually clear and non-interactive
  • Screen reader focus order matches visual order

Light/Dark Mode

  • Primary text contrast ≥4.5:1 in both modes
  • Secondary text contrast ≥3:1 in both modes
  • Dividers/borders visible in both modes
  • Modal scrim opacity 40-60% black
  • Both themes tested before delivery

Layout

  • Safe areas respected for headers, tab bars, CTAs
  • Scroll content not hidden behind fixed bars
  • Verified on small phone, large phone, tablet (portrait + landscape)
  • 4/8dp spacing rhythm maintained
  • No horizontal scroll on mobile

Accessibility

  • All meaningful images/icons have accessibility labels
  • Form fields have labels, hints, and clear error messages
  • Color is not the only indicator
  • Reduced motion and dynamic text size supported
  • cursor-pointer on all clickable elements (web)

Tips for Better Results

  • Use multi-dimensional keywords: "entertainment social vibrant content-dense" not just "app"
  • Try different keywords for the same need: "playful neon" → "vibrant dark" → "content-first minimal"
  • Always use --design-system first for full recommendations, then --domain to deep-dive
  • Add --stack <your-stack> for implementation-specific guidance
  • Run --domain ux "animation accessibility z-index loading" as a UX validation pass before implementation

Example Workflow

User request: "Build a landing page for my SaaS product."

Step 1: Analyze

  • Product type: SaaS
  • Style keywords: modern, professional, conversion-optimized
  • Stack: HTML + Tailwind (default)

Step 2: Generate Design System

python3 skills/ui-ux-pro-max/scripts/search.py "SaaS B2B modern professional" --design-system -p "MySaaS"

Step 3: Supplement

python3 skills/ui-ux-pro-max/scripts/search.py "conversion optimization" --domain landing
python3 skills/ui-ux-pro-max/scripts/search.py "form validation loading" --domain ux

Step 4: Stack Guidelines

python3 skills/ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind

Then: Synthesize the design system + detailed searches and implement the design.

Output Location

Generated design system files (via --persist) are written to design-system/<project>/ in the current working directory. The skill's own scripts and data live at skills/ui-ux-pro-max/.

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