Agent skill
ui-ux-pro-max
UI/UX design intelligence with 50+ styles, 161 palettes, 57 font pairings, 99 UX guidelines, and 25 chart types. Searchable database with priority-based recommendations for web and mobile.
Install this agent skill to your Project
npx add-skill https://github.com/assafkip/kipi-system/tree/main/plugins/kipi-design/skills/ui-ux-pro-max
SKILL.md
UI/UX Pro Max - Design Intelligence
Comprehensive design guide for web and mobile applications. Contains 50+ styles, 161 color palettes, 57 font pairings, 161 product types with reasoning rules, 99 UX guidelines, and 25 chart types across 10 technology stacks. Searchable database with priority-based recommendations.
When to Apply
This Skill should be used when the task involves UI structure, visual design decisions, interaction patterns, or user experience quality control.
Must Use
This Skill must be invoked in the following situations:
- 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
This Skill is recommended in the following situations:
- 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
This Skill is not needed in the following situations:
- 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, this Skill should be used.
Rule Categories by Priority
For human/AI reference: follow priority 1->10 to decide which rule category to focus on first; use --domain <Domain> to query details when needed. Scripts do not read this table.
| 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 44x44px, 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 |
Reference Files
Read these files for detailed rules, workflow instructions, and checklists:
| File | Contents |
|---|---|
references/ux-guidelines.md |
Full quick reference for all 10 rule categories (accessibility, touch, performance, style, layout, typography, animation, forms, navigation, charts) |
references/workflow.md |
How to use the search CLI, prerequisites, step-by-step workflow (Steps 1-4), domain/stack reference tables |
references/examples.md |
Complete example workflow (AI search homepage) |
references/checklist.md |
Output formats, query tips, common sticking points, professional UI rules (icons, interaction, light/dark mode, layout/spacing), and pre-delivery checklist |
Also available (from ui-styling merge)
| File | Contents |
|---|---|
references/canvas-design-system.md |
Canvas-based design system |
references/shadcn-accessibility.md |
shadcn/ui accessibility patterns |
references/shadcn-components.md |
shadcn/ui component reference |
references/shadcn-theming.md |
shadcn/ui theming guide |
references/tailwind-customization.md |
Tailwind CSS customization |
references/tailwind-responsive.md |
Tailwind responsive patterns |
references/tailwind-utilities.md |
Tailwind utility classes |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
assafkip/kipi-system
council
Multi-persona debate for founder decisions. 4 personas argue a topic across structured rounds.
assafkip/kipi-system
founder-voice
Founder voice enforcement for all written output. Apply to any text another person will read.
assafkip/kipi-system
audhd-executive-function
AUDHD executive function accommodations. Apply to all output the founder will act on.
assafkip/kipi-system
research-mode
Anti-hallucination research mode. Toggle on to enforce citation requirements, source grounding, and "I don't know" behavior. Toggle off for creative work.
assafkip/kipi-system
design
Unified design router: logo, CIP, banners, slides, icons, social photos, design tokens. Use for any visual asset creation, brand identity, or presentation design.
assafkip/kipi-system
brand
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
Didn't find tool you were looking for?