UXUI-Experience - Design Intelligence

Comprehensive design database with Bootstrap 5, Font Awesome, SweetAlert2 support. 57+ UI styles, 95 palettes, 56 font pairings, 183 icons, 25 alert patterns.

Slash Command

Use

/ux-ui-exp

followed by sub-command:

Generate Design System

/ux-ui-exp generate {description} for {project-name} using {stack}
/ux-ui-exp generate SaaS dashboard for MyApp using bootstrap5
/ux-ui-exp gen fintech platform for FinApp

---

Instructions for AI

When user invokes this skill with

/ux-ui-exp

:

Step 1: Parse Command

Detect command pattern:

• generate/gen → Use

  ui_ux_generate_design_system

• search → Use

  ui_ux_search

• stack → Use

  ui_ux_get_stack_guidelines

• icons → Use

  ui_ux_get_icons

• colors → Search domain 'color'
• alerts → Use

  ui_ux_get_alerts

• fonts/typography → Search domain 'typography'
• bs5/bootstrap → Stack 'bootstrap5'

Step 2: Extract Parameters

From command text, extract:

• Project name: Look for "for {name}" pattern
• Stack: bootstrap5|react|nextjs|vue|svelte|shadcn|flutter|swiftui
• Domain: style|color|typography|icons|landing|alerts
• Query: Remaining text after command

Step 3: Execute MCP Tool

Call appropriate MCP tool:

For generate commands:

ui_ux_generate_design_system({
  query: extracted_description,
  projectName: extracted_project_name || "MyProject",
  stack: extracted_stack || "html-tailwind",
  format: "markdown"
})

For search commands:

ui_ux_search({
  domain: extracted_domain,
  query: extracted_query,
  maxResults: 5
})

For stack commands:

ui_ux_get_stack_guidelines({
  stack: extracted_stack,
  category: extracted_category || "",
  maxResults: 10
})

For icons commands:

ui_ux_get_icons({
  query: extracted_query,
  library: "all",
  maxResults: 10
})

For alerts commands:

ui_ux_get_alerts({
  type: extracted_type || "",
  maxResults: 5
})

Step 4: Format Output

Present results in user-friendly format:

• Markdown tables for guidelines/icons
• Code blocks for examples
• Checklists for best practices
• Highlighted key information

---

Available Stacks

• bootstrap5

  - Bootstrap 5 (NEW!)

• html-tailwind

  - HTML + Tailwind CSS

• react

  - React.js

• nextjs

  - Next.js

• vue

  - Vue.js

• svelte

  - Svelte

• nuxtjs

  - Nuxt.js

• shadcn

  - shadcn/ui

• flutter

  - Flutter

• swiftui

  - SwiftUI

• react-native

  - React Native

Search Domains

• style

  - UI styles (glassmorphism, neumorphism, etc.)

• color

  - Color palettes by industry

• typography

  - Font pairings

• icons

  - Icons from Lucide + Font Awesome (183 total)

• landing

  - Landing page patterns

• alerts

  - SweetAlert2 alert patterns (25 types)

Examples

/ux-ui-exp generate SaaS CRM dashboard for CRMPro using bootstrap5
→ Full design system with Bootstrap 5 guidelines

/ux-ui-exp search icons shopping cart
→ Shopping cart icons from both Lucide and Font Awesome

/ux-ui-exp stack bootstrap5 components
→ Bootstrap 5 component best practices

/ux-ui-exp alerts confirm delete
→ SweetAlert2 delete confirmation patterns

/ux-ui-exp colors healthcare
→ Color palettes for healthcare apps

/ux-ui-exp fonts luxury
→ Typography for luxury brands

Notes

• Bootstrap 5: 40 guidelines covering layout, components, utilities, accessibility
• Font Awesome: 90 popular icons added (faHouse, faUser, faShoppingCart, etc.)
• SweetAlert2: 25 patterns (success, error, confirm, toast, input, etc.)
• All icons include import code and usage examples
• Design systems include anti-patterns and pre-delivery checklists