Ux Patterns

UX Patterns Global

This skill aggregates 92 UX patterns across the site and helps choose the right implementation path without guessing from memory.

Workflow

1. Start with the user problem, task flow, and constraints instead of jumping straight to a component. 2. Narrow candidate patterns by category, aliases, and related-pattern links. 3. Compare tradeoffs before implementation when multiple patterns could fit. 4. Install the specific pattern skill once the direction is clear, then implement from its reference file. 5. Validate accessibility, performance, and testing guidance before shipping.

Coverage

• advanced: 3 patterns
• ai-intelligence: 10 patterns
• authentication: 7 patterns
• content-management: 7 patterns
• data-display: 12 patterns
• e-commerce: 3 patterns
• forms: 26 patterns
• media: 3 patterns
• navigation: 11 patterns
• social: 4 patterns
• user-feedback: 6 patterns

---

See references/categories.md for the pattern-by-category index.

Site index: https://uxpatterns.dev/llms-full.txt

UX Patterns Global Reference

This category index maps installable pattern skills back to their canonical docs.

advanced

• Command Palette
• URL: https://uxpatterns.dev/patterns/advanced/command-palette
• Skill: command-palette
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill command-palette
• Search Results
• URL: https://uxpatterns.dev/patterns/advanced/search-results
• Skill: search-results
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill search-results
• Wizard / Stepper
• URL: https://uxpatterns.dev/patterns/advanced/wizard
• Skill: wizard
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill wizard

ai-intelligence

• AI Chat Interface
• URL: https://uxpatterns.dev/patterns/ai-intelligence/ai-chat
• Skill: ai-chat
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill ai-chat
• AI Error States
• URL: https://uxpatterns.dev/patterns/ai-intelligence/ai-error-states
• Skill: ai-error-states
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill ai-error-states
• AI Loading States
• URL: https://uxpatterns.dev/patterns/ai-intelligence/ai-loading-states
• Skill: ai-loading-states
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill ai-loading-states
• AI Suggestions
• URL: https://uxpatterns.dev/patterns/ai-intelligence/ai-suggestions
• Skill: ai-suggestions
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill ai-suggestions
• Context Window
• URL: https://uxpatterns.dev/patterns/ai-intelligence/context-window
• Skill: context-window
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill context-window
• Model Selector
• URL: https://uxpatterns.dev/patterns/ai-intelligence/model-selector
• Skill: model-selector
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill model-selector
• Prompt Input
• URL: https://uxpatterns.dev/patterns/ai-intelligence/prompt-input
• Skill: prompt-input
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill prompt-input
• Response Feedback
• URL: https://uxpatterns.dev/patterns/ai-intelligence/response-feedback
• Skill: response-feedback
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill response-feedback
• Streaming Response
• URL: https://uxpatterns.dev/patterns/ai-intelligence/streaming-response
• Skill: streaming-response
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill streaming-response
• Token Counter
• URL: https://uxpatterns.dev/patterns/ai-intelligence/token-counter
• Skill: token-counter
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill token-counter

authentication

• Account Settings
• URL: https://uxpatterns.dev/patterns/authentication/account-settings
• Skill: account-settings
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill account-settings
• Login Form
• URL: https://uxpatterns.dev/patterns/authentication/login
• Skill: login
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill login
• Password Reset
• URL: https://uxpatterns.dev/patterns/authentication/password-reset
• Skill: password-reset
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill password-reset
• Sign Up Flow
• URL: https://uxpatterns.dev/patterns/authentication/signup
• Skill: signup
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill signup
• Social Login
• URL: https://uxpatterns.dev/patterns/authentication/social-login
• Skill: social-login
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill social-login
• Two-Factor Authentication
• URL: https://uxpatterns.dev/patterns/authentication/two-factor
• Skill: two-factor
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill two-factor
• User Profile
• URL: https://uxpatterns.dev/patterns/authentication/user-profile
• Skill: user-profile
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill user-profile

content-management

• Accordion
• URL: https://uxpatterns.dev/patterns/content-management/accordion
• Skill: accordion
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill accordion
• Carousel
• URL: https://uxpatterns.dev/patterns/content-management/carousel
• Skill: carousel
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill carousel
• Drag and Drop
• URL: https://uxpatterns.dev/patterns/content-management/drag-and-drop
• Skill: drag-and-drop
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill drag-and-drop
• Expandable Text
• URL: https://uxpatterns.dev/patterns/content-management/expandable-text
• Skill: expandable-text
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill expandable-text
• Modal
• URL: https://uxpatterns.dev/patterns/content-management/modal
• Skill: modal
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill modal
• Popover
• URL: https://uxpatterns.dev/patterns/content-management/popover
• Skill: popover
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill popover
• Tooltip
• URL: https://uxpatterns.dev/patterns/content-management/tooltip
• Skill: tooltip
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill tooltip

data-display

• Calendar View
• URL: https://uxpatterns.dev/patterns/data-display/calendar
• Skill: calendar
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill calendar
• Card Grid
• URL: https://uxpatterns.dev/patterns/data-display/card-grid
• Skill: card-grid
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill card-grid
• Charts & Graphs
• URL: https://uxpatterns.dev/patterns/data-display/chart
• Skill: chart
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill chart
• Comparison Table
• URL: https://uxpatterns.dev/patterns/data-display/comparison-table
• Skill: comparison-table
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill comparison-table
• Dashboard Layout
• URL: https://uxpatterns.dev/patterns/data-display/dashboard
• Skill: dashboard
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill dashboard
• Data Table
• URL: https://uxpatterns.dev/patterns/data-display/table
• Skill: table
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill table
• Filter Panel
• URL: https://uxpatterns.dev/patterns/data-display/filter-panel
• Skill: filter-panel
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill filter-panel
• Kanban Board
• URL: https://uxpatterns.dev/patterns/data-display/kanban-board
• Skill: kanban-board
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill kanban-board
• List View
• URL: https://uxpatterns.dev/patterns/data-display/list-view
• Skill: list-view
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill list-view
• Statistics Display
• URL: https://uxpatterns.dev/patterns/data-display/statistics
• Skill: statistics
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill statistics
• Timeline
• URL: https://uxpatterns.dev/patterns/data-display/timeline
• Skill: timeline
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill timeline
• Tree View
• URL: https://uxpatterns.dev/patterns/data-display/tree-view
• Skill: tree-view
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill tree-view

e-commerce

• Checkout Flow
• URL: https://uxpatterns.dev/patterns/e-commerce/checkout
• Skill: checkout
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill checkout
• Product Card
• URL: https://uxpatterns.dev/patterns/e-commerce/product-card
• Skill: product-card
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill product-card
• Shopping Cart
• URL: https://uxpatterns.dev/patterns/e-commerce/shopping-cart
• Skill: shopping-cart
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill shopping-cart

forms

• Autocomplete
• URL: https://uxpatterns.dev/patterns/forms/autocomplete
• Skill: autocomplete
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill autocomplete
• Button
• URL: https://uxpatterns.dev/patterns/forms/button
• Skill: button
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill button
• Checkbox
• URL: https://uxpatterns.dev/patterns/forms/checkbox
• Skill: checkbox
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill checkbox
• Code Confirmation
• URL: https://uxpatterns.dev/patterns/forms/code-confirmation
• Skill: code-confirmation
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill code-confirmation
• Color Picker
• URL: https://uxpatterns.dev/patterns/forms/color-picker
• Skill: color-picker
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill color-picker
• Currency Input
• URL: https://uxpatterns.dev/patterns/forms/currency-input
• Skill: currency-input
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill currency-input
• Date Input
• URL: https://uxpatterns.dev/patterns/forms/date-input
• Skill: date-input
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill date-input
• Date Picker
• URL: https://uxpatterns.dev/patterns/forms/date-picker
• Skill: date-picker
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill date-picker
• Date Range
• URL: https://uxpatterns.dev/patterns/forms/date-range
• Skill: date-range
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill date-range
• File Input
• URL: https://uxpatterns.dev/patterns/forms/file-input
• Skill: file-input
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill file-input
• Form Validation
• URL: https://uxpatterns.dev/patterns/forms/form-validation
• Skill: form-validation
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill form-validation
• Multi-select Input
• URL: https://uxpatterns.dev/patterns/forms/multi-select-input
• Skill: multi-select-input
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill multi-select-input
• Password
• URL: https://uxpatterns.dev/patterns/forms/password
• Skill: password
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill password
• Phone Number
• URL: https://uxpatterns.dev/patterns/forms/phone-number
• Skill: phone-number
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill phone-number
• Radio Button
• URL: https://uxpatterns.dev/patterns/forms/radio
• Skill: radio
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill radio
• Rating Input
• URL: https://uxpatterns.dev/patterns/forms/rating-input
• Skill: rating-input
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill rating-input
• Rich Text Editor
• URL: https://uxpatterns.dev/patterns/forms/rich-text-editor
• Skill: rich-text-editor
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill rich-text-editor
• Search Field
• URL: https://uxpatterns.dev/patterns/forms/search-field
• Skill: search-field
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill search-field
• Selection Input
• URL: https://uxpatterns.dev/patterns/forms/selection-input
• Skill: selection-input
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill selection-input
• Signature Pad
• URL: https://uxpatterns.dev/patterns/forms/signature-pad
• Skill: signature-pad
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill signature-pad
• Slider
• URL: https://uxpatterns.dev/patterns/forms/slider
• Skill: slider
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill slider
• Tag Input
• URL: https://uxpatterns.dev/patterns/forms/tag-input
• Skill: tag-input
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill tag-input
• Text Field
• URL: https://uxpatterns.dev/patterns/forms/text-field
• Skill: text-field
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill text-field
• Textarea
• URL: https://uxpatterns.dev/patterns/forms/textarea
• Skill: textarea
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill textarea
• Time Input
• URL: https://uxpatterns.dev/patterns/forms/time-input
• Skill: time-input
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill time-input
• Toggle
• URL: https://uxpatterns.dev/patterns/forms/toggle
• Skill: toggle
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill toggle

media

• Image Gallery
• URL: https://uxpatterns.dev/patterns/media/image-gallery
• Skill: image-gallery
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill image-gallery
• Image Upload
• URL: https://uxpatterns.dev/patterns/media/image-upload
• Skill: image-upload
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill image-upload
• Video Player
• URL: https://uxpatterns.dev/patterns/media/video-player
• Skill: video-player
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill video-player

navigation

• Back to Top
• URL: https://uxpatterns.dev/patterns/navigation/back-to-top
• Skill: back-to-top
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill back-to-top
• Breadcrumb
• URL: https://uxpatterns.dev/patterns/navigation/breadcrumb
• Skill: breadcrumb
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill breadcrumb
• Hamburger Menu
• URL: https://uxpatterns.dev/patterns/navigation/hambuger-menu
• Skill: hambuger-menu
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill hambuger-menu
• Infinite scroll
• URL: https://uxpatterns.dev/patterns/navigation/infinite-scroll
• Skill: infinite-scroll
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill infinite-scroll
• Link
• URL: https://uxpatterns.dev/patterns/navigation/link
• Skill: link
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill link
• Load More
• URL: https://uxpatterns.dev/patterns/navigation/load-more
• Skill: load-more
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill load-more
• Megamenu
• URL: https://uxpatterns.dev/patterns/navigation/megamenu
• Skill: megamenu
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill megamenu
• Navigation Menu
• URL: https://uxpatterns.dev/patterns/navigation/navigation-menu
• Skill: navigation-menu
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill navigation-menu
• Pagination
• URL: https://uxpatterns.dev/patterns/navigation/pagination
• Skill: pagination
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill pagination
• Sidebar
• URL: https://uxpatterns.dev/patterns/navigation/sidebar
• Skill: sidebar
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill sidebar
• Tabs
• URL: https://uxpatterns.dev/patterns/navigation/tabs
• Skill: tabs
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill tabs

social

• Activity Feed
• URL: https://uxpatterns.dev/patterns/social/activity-feed
• Skill: activity-feed
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill activity-feed
• Comment System
• URL: https://uxpatterns.dev/patterns/social/comment-system
• Skill: comment-system
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill comment-system
• Like Button
• URL: https://uxpatterns.dev/patterns/social/like-button
• Skill: like-button
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill like-button
• Share Dialog
• URL: https://uxpatterns.dev/patterns/social/share-dialog
• Skill: share-dialog
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill share-dialog

user-feedback

• Cookie Consent
• URL: https://uxpatterns.dev/patterns/user-feedback/cookie-consent
• Skill: cookie-consent
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill cookie-consent
• Empty States
• URL: https://uxpatterns.dev/patterns/user-feedback/empty-states
• Skill: empty-states
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill empty-states
• Loading Indicator
• URL: https://uxpatterns.dev/patterns/user-feedback/loading-indicator
• Skill: loading-indicator
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill loading-indicator
• Notification
• URL: https://uxpatterns.dev/patterns/user-feedback/notification
• Skill: notification
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill notification
• Progress Indicator
• URL: https://uxpatterns.dev/patterns/user-feedback/progress-indicator
• Skill: progress-indicator
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill progress-indicator
• Skeleton
• URL: https://uxpatterns.dev/patterns/user-feedback/skeleton
• Skill: skeleton
• Install: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill skeleton