ux-ui-exp
UI/UX design intelligence with Bootstrap 5, Font Awesome, SweetAlert2. Use: /ux-ui-exp {command}
Best use case
ux-ui-exp is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
UI/UX design intelligence with Bootstrap 5, Font Awesome, SweetAlert2. Use: /ux-ui-exp {command}
Teams using ux-ui-exp should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/ux-ui-exp/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How ux-ui-exp Compares
| Feature / Agent | ux-ui-exp | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
UI/UX design intelligence with Bootstrap 5, Font Awesome, SweetAlert2. Use: /ux-ui-exp {command}
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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:**
```javascript
ui_ux_generate_design_system({
query: extracted_description,
projectName: extracted_project_name || "MyProject",
stack: extracted_stack || "html-tailwind",
format: "markdown"
})
```
**For search commands:**
```javascript
ui_ux_search({
domain: extracted_domain,
query: extracted_query,
maxResults: 5
})
```
**For stack commands:**
```javascript
ui_ux_get_stack_guidelines({
stack: extracted_stack,
category: extracted_category || "",
maxResults: 10
})
```
**For icons commands:**
```javascript
ui_ux_get_icons({
query: extracted_query,
library: "all",
maxResults: 10
})
```
**For alerts commands:**
```javascript
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 checklistsRelated Skills
bgo
Automates the complete Blender build-go workflow, from building and packaging your extension/add-on to removing old versions, installing, enabling, and launching Blender for quick testing and iteration.
1k-error-handling
Error handling patterns and best practices for OneKey. Use when implementing try/catch blocks, handling async errors, showing error messages, or managing error states in UI. Triggers on error, try, catch, exception, throw, fail, failure, error handling, error boundary, useAsyncCall, toast, fallback, error state.
1k-dev-commands
Development commands for OneKey monorepo. Use when running dev servers, building apps, linting, testing, or troubleshooting build issues. Triggers on yarn, dev, build, lint, test, desktop, mobile, web, extension, ios, android, compile, bundle.
1k-date-formatting
Date and time formatting for OneKey applications. Use when displaying dates, timestamps, or formatting time in UI components. Always use OneKey utilities instead of native JS date methods. Triggers on date, time, timestamp, formatDate, formatTime, toLocaleDateString, toLocaleString, dateUtils, locale, format, display date, show time, datetime, calendar.
1k-cross-platform
Cross-platform development patterns for OneKey. Use when writing platform-specific code, handling platform differences, or working with native/web/desktop/extension platforms. Triggers on platform, native, web, desktop, extension, iOS, Android, Electron, platformEnv, .native.ts, .web.ts, .desktop.ts, .ext.ts, cross-platform, multi-platform.
1k-coding-patterns
Coding patterns and best practices for OneKey development. Use when writing React components, handling promises, error handling, or following code conventions. Triggers on react, component, hooks, promise, async, await, error, pattern, convention, typescript.
1k-architecture
OneKey monorepo architecture and code organization. Use when understanding project structure, package relationships, import rules, or component organization. Triggers on architecture, structure, packages, imports, hierarchy, dependencies, monorepo, organization.
1k-app-upgrade-test
Create test versions to verify app auto-update functionality. Use when testing update flows, version migration, or validating app upgrade mechanisms. Automates version number and build number configuration for testing the auto-update system. Triggers on auto update, app upgrade, update testing, upgrade flow, version migration, test build, 9XXX version.
1k-adding-socket-events
Adds new WebSocket event subscriptions to OneKey. Use when implementing new socket events, handling server push messages, or adding real-time data subscriptions. Socket, WebSocket, event, subscription, push, real-time.
1d-cutting-stock
When the user wants to cut 1D materials optimally, minimize waste in linear cutting, or solve one-dimensional cutting stock problems. Also use when the user mentions "1D cutting," "linear cutting optimization," "rod cutting," "pipe cutting," "beam cutting," "trim loss," "cutting stock problem," "pattern generation," or "column generation for cutting." For 2D problems, see 2d-cutting-stock. For general trim loss, see trim-loss-minimization.
1c-bsl-code-generation
Skill for generating 1C:Enterprise (BSL) code with mandatory validation through MCP tools to prevent hallucinations. Use when generating, editing, or validating 1C BSL code, working with 1C metadata, or answering questions about 1C platform API.
128-java-generics
Use when you need to review, improve, or refactor Java code for generics quality — including avoiding raw types, applying the PECS (Producer Extends Consumer Super) principle for wildcards, using bounded type parameters, designing effective generic methods, leveraging the diamond operator, understanding type erasure implications, handling generic inheritance correctly, preventing heap pollution with @SafeVarargs, and integrating generics with modern Java features like Records, sealed types, and pattern matching. Part of the skills-for-java project