ux-ui-exp

Featured

UI/UX design intelligence with Bootstrap 5, Font Awesome, SweetAlert2. Use: /ux-ui-exp {command}

Web & Frontend 183 stars 39 forks Updated 1 months ago MIT

Install

View on GitHub

Quality Score: 94/100

Stars 20%
75
Recency 20%
75
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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...

Details

Author
majiayu000
Repository
majiayu000/claude-skill-registry
Created
5 months ago
Last Updated
1 months ago
Language
Python
License
MIT

Integrates with

Related Skills

Web & Frontend Featured

code-to-prd

Reverse-engineer any codebase into a complete Product Requirements Document (PRD). Analyzes routes, components, state management, API integrations, and user interactions to produce business-readable documentation detailed enough for engineers or AI agents to fully reconstruct every page and endpoint. Works with frontend frameworks (React, Vue, Angular, Svelte, Next.js, Nuxt), backend frameworks (NestJS, Django, Express, FastAPI), and fullstack applications. Trigger when users mention: generate PRD, reverse-engineer requirements, code to documentation, extract product specs from code, document page logic, analyze page fields and interactions, create a functional inventory, write requirements from an existing codebase, document API endpoints, or analyze backend routes.

16,173 Updated today
alirezarezvani
Web & Frontend Featured

lifecyclemigrate-from-nextjs

Step-by-step migration from Next.js App Router to TanStack Start: route definition conversion, API mapping, server function conversion from Server Actions, middleware conversion, data fetching pattern changes.

14,498 Updated today
TanStack
Web & Frontend Featured

ckmbanner-design

Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated 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. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.

62,072 Updated 1 months ago
nextlevelbuilder