← ClaudeAtlas

ux-ui-explisted

UI/UX design intelligence with Bootstrap 5, Font Awesome, SweetAlert2. Use: /ux-ui-exp {command}
majiayu000/claude-skill-registry-data · ★ 3 · Web & Frontend · score 63
Install: claude install-skill majiayu000/claude-skill-registry-data
# 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: "markd