Machine Readiness
Stored receipt and evidence
30
100
0
0
0
Top Sites
UX Patterns for Developers - Documentation & Guides | UX Patterns for Developers
Samples
Offer samples
No stored offer samples.
Samples
Action samples
No stored action samples.
Samples
Product samples
No stored product samples.
Document
robots.txt
User-Agent: DotBot Disallow: / User-Agent: MJ12bot Disallow: / User-Agent: BlexBot Disallow: / User-Agent: Googlebot Allow: / Disallow: /api/* Disallow: !/api/og/* Disallow: /private User-Agent: Bingbot Allow: / Disallow: /api/* Disallow: !/api/og/* Disallow: /private User-Agent: AhrefsBot Allow: / Disallow: /api/* Disallow: !/api/og/* Disallow: /private Disallow: /admin Crawl-delay: 2 User-Agent: SemrushBot Allow: / Disallow: /api/* Disallow: !/api/og/* Disallow: /private Disallow: /admin Crawl-delay: 2 User-Agent: * Allow: / Disallow: /404 Disallow: /500 Disallow: /api/* Disallow: !/api/og/* Disallow: /_next Disallow: /private Crawl-delay: 1 Sitemap: https://uxpatterns.dev/sitemap.xml
Document
llms.txt
# UX Patterns for Developers - [llms-full.txt](https://uxpatterns.dev/llms-full.txt): Expanded AI-friendly index with per-pattern skills, install commands, and reference links. ## pattern-guide - [Text vs Number vs Email Input: When to Use Each HTML5 Type](/pattern-guide/choosing-input-types): Select the most appropriate HTML input type based on your data collection needs and user experience requirements - [Choose the Right Pattern](/pattern-guide): Comparison guides for common product decisions, from overlays and search to loading and data display. - [Dropdown vs Radio vs Checkbox: Choosing the Right Form Input](/pattern-guide/input-selection-guide): Learn how to select the most appropriate input types for your web forms. Get guidance on when to use text fields, dropdowns, checkboxes, and other form controls. - [Modal vs Popover vs Tooltip: Which Overlay Pattern Should You Use?](/pattern-guide/modal-vs-popover-guide): Choose the overlay pattern that matches attention level, interaction complexity, and contextual relevance. - [Pagination vs Infinite Scroll vs Load More: Which Pattern Should You Use?](/pattern-guide/pagination-vs-infinite-scroll-vs-load-more): Choose the right content loading pattern based on user intent, navigation needs, SEO, and implementation trade-offs. - [Pagination vs Infinite Scroll: When to Use Each Pattern](/pattern-guide/pagination-vs-infinite-scroll): Choose the right content loading pattern based on your user needs and content type - [Search Field vs Command Palette: Which Pattern Should You Use?](/pattern-guide/search-field-vs-command-palette): Choose between visible search and a keyboard-first command surface based on user intent, product complexity, and discoverability. - [Table vs List View vs Card Grid: Which Data Display Pattern Should You Use?](/pattern-guide/table-vs-list-vs-cards): Choose the right data display pattern based on comparison needs, scanability, visual density, and device constraints. ## patterns - [UX Books for Developers](/patterns/books): A curated list of essential UX books to help developers improve their design and implementation skills. - [Getting Started](/patterns/getting-started): UX Patterns for Devs is a comprehensive resource that helps developers implement effective, accessible, and usable UI components - [Introduction to Patterns](/patterns): A library of UX patterns for developers building effective, accessible, and usable interfaces. - [When to Use What?](/patterns/when-to-use-what): Guide for choosing the right UI pattern for your needs - [Command Palette](/patterns/advanced/command-palette): Learn how to implement command palettes. Discover best practices for keyboard shortcuts, fuzzy search, and command discovery. - [Search Results](/patterns/advanced/search-results): Learn how to implement search results pages. Discover best practices for result ranking, filtering, and pagination. - [Wizard / Stepper](/patterns/advanced/wizard): Learn how to implement wizards and steppers. Discover best practices for multi-step forms, progress tracking, and step validation. - [Account Settings](/patterns/authentication/account-settings): Learn how to implement account settings. Discover best practices for preference management, privacy controls, and account configuration. - [Login Form](/patterns/authentication/login): Learn how to implement secure and user-friendly login forms. Discover best practices for authentication, password fields, and remember me functionality. - [Password Reset](/patterns/authentication/password-reset): Learn how to implement secure password reset functionality. Discover best practices for recovery emails, token validation, and security considerations. - [Sign Up Flow](/patterns/authentication/signup): Learn how to implement effective sign-up flows. Discover best practices for user registration, form validation, and onboarding experiences. - [Social Login](/patterns/authentication/social-login): Learn how to implement social login. Discover best practices for OAuth flows, provider integration, and account linking. - [Two-Factor Authentication](/patterns/authentication/two-factor): Learn how to implement two-factor authentication. Discover best practices for TOTP, SMS verification, and security keys. - [User Profile](/patterns/authentication/user-profile): Learn how to implement user profile interfaces. Discover best practices for displaying user information, avatars, and account settings. - [AI Chat Interface](/patterns/ai-intelligence/ai-chat): Learn how to implement AI chat interfaces. Discover best practices for message threading, context management, and conversational UX. - [AI Error States](/patterns/ai-intelligence/ai-error-states): Learn how to implement AI error states. Discover best practices for rate limits, model errors, and graceful degradation. - [AI Loading States](/patterns/ai-intelligence/ai-loading-states): Learn how to implement AI-specific loading states. Discover best practices for thinking animations, progress indicators, and stream initialization. - [AI Suggestions](/patterns/ai-intelligence/ai-suggestions): Learn how to implement AI suggestions. Discover best practices for predictive text, smart completions, and recommendation interfaces. - [Context Window](/patterns/ai-intelligence/context-window): Learn how to implement context window management. Discover best practices for conversation history, context limits, and memory management. - [Model Selector](/patterns/ai-intelligence/model-selector): Learn how to implement model selectors. Discover best practices for model comparison, capability display, and settings management. - [Prompt Input](/patterns/ai-intelligence/prompt-input): Learn how to implement prompt input interfaces. Discover best practices for multiline inputs, prompt templates, and input enhancements. - [Response Feedback](/patterns/ai-intelligence/response-feedback): Learn how to implement response feedback. Discover best practices for ratings, regeneration, and improvement signals. - [Streaming Response](/patterns/ai-intelligence/streaming-response): Learn how to implement streaming AI responses. Discover best practices for progressive rendering, markdown formatting, and stream interruption. - [Token Counter](/patterns/ai-intelligence/token-counter): Learn how to implement token counters. Discover best practices for usage indicators, limit warnings, and cost estimation. - [Accordion](/patterns/content-management/accordion): Create effective accordion components for your web applications. Learn best practices for implementing expandable content sections with proper accessibility and keyboard support. - [Carousel](/patterns/content-management/carousel): Build effective carousel components for your web applications. Learn best practices for implementing accessible, responsive carousels with proper navigation and touch support. - [Drag and Drop](/patterns/content-management/drag-and-drop): Build intuitive drag and drop functionality with accessibility and touch support. - [Expandable Text](/patterns/content-management/expandable-text): Create expandable text components with progressive disclosure and accessibility features for better content management. - [Modal](/patterns/content-management/modal): Build accessible modal dialogs with proper focus management, keyboard interactions, and user experience best practices. - [Popover](/patterns/content-management/popover): Implement user-friendly popover components in your web applications. Learn best practices for contextual information display, positioning, and accessibility with practical examples. - [Tooltip](/patterns/content-management/tooltip): Implement effective tooltip components in your web applications. Learn best practices for contextual help, positioning strategies, and accessibility considerations. - [Calendar View](/patterns/data-display/calendar): Learn how to implement calendar views. Discover best practices for date navigation, event display, and calendar interactions. - [Card Grid](/patterns/data-display/card-grid): Learn how to implement card grids for content display. Discover best practices for responsive layouts, card designs, and grid systems. - [Charts & Graphs](/patterns/data-display/chart): Learn how to implement accessible charts and graphs. Discover best practices for data visualization, chart types, and responsive designs. - [Comparison Table](/patterns/data-display/comparison-table): Learn how to implement comparison tables. Discover best practices for feature comparisons, pricing tables, and decision matrices. - [Dashboard Layout](/patterns/data-display/dashboard): Learn how to implement dashboard layouts. Discover best practices for widget organization, responsive grids, and data visualization. - [Filter Panel](/patterns/data-display/filter-panel): Learn how to implement filter panels for data refinement. Discover best practices for faceted search, filter UI, and dynamic filtering. - [Kanban Board](/patterns/data-display/kanban-board): Learn how to implement kanban boards. Discover best practices for drag-and-drop, task management, and workflow visualization. - [List View](/patterns/data-display/list-view): Learn how to implement list views for data display. Discover best practices for list layouts, item selection, and virtual scrolling. - [Statistics Display](/patterns/data-display/statistics): Learn how to implement statistics displays. Discover best practices for metric cards, KPI dashboards, and data visualization. - [Data Table](/patterns/data-display/table): Learn how to implement accessible and performant data tables. Discover best practices for sorting, filtering, pagination, and responsive table designs. - [Timeline](/patterns/data-display/timeline): Learn how to implement timelines for showing chronological data. Discover best practices for activity feeds, history logs, and event sequences. - [Tree View](/patterns/data-display/tree-view): Learn how to implement tree views for hierarchical data. Discover best practices for expandable nodes, selection states, and keyboard navigation. - [Checkout Flow](/patterns/e-commerce/checkout): Learn how to implement checkout flows. Discover best practices for payment forms, order review, and conversion optimization. - [Product Card](/patterns/e-commerce/product-card): Learn how to implement effective product cards. Discover best practices for product images, pricing display, and quick actions. - [Shopping Cart](/patterns/e-commerce/shopping-cart): Learn how to implement shopping cart functionality. Discover best practices for cart management, item updates, and persistent storage. - [Autocomplete](/patterns/forms/autocomplete): Build user-friendly autocomplete with search suggestions, keyboard navigation, and accessibility features. - [Button](/patterns/forms/button): Create accessible and user-friendly buttons with proper states, design patterns, and implementation guidelines. - [Checkbox](/patterns/forms/checkbox): Learn how to implement accessible checkbox inputs in your web applications. Discover best practices for multiple selection controls, states handling, and accessibility. - [Code Confirmation](/patterns/forms/code-confirmation): Implement user-friendly code confirmation inputs for verification codes and OTPs. Learn best practices for segmented inputs, auto-focus behavior, and accessibility. - [Color Picker](/patterns/forms/color-picker): Select colors with visual feedback - [Currency Input](/patterns/forms/currency-input): Create currency input fields with number formatting and international currency handling. - [Date Input](/patterns/forms/date-input): Build date input fields with validation, formatting, and localization features. - [Date Picker](/patterns/forms/date-picker): Create user-friendly date pickers with calendar interfaces and keyboard navigation. - [Date Range](/patterns/forms/date-range): Build date range selection with calendar interfaces and validation features. - [File Input](/patterns/forms/file-input): Create user-friendly file upload components for your web applications. Learn best practices for file selection, drag-and-drop, progress indicators, and validation. - [Form Validation](/patterns/forms/form-validation): Learn how to implement effective form validation in your web applications. Discover best practices for error handling, real-time validation, and user feedback. - [Multi-select Input](/patterns/forms/multi-select-input): Implement multi-select components for multiple item selection in your web applications. Learn best practices for list management, keyboard navigation, and accessibility. - [Password](/patterns/forms/password): Build secure and user-friendly password fields with validation, strength indicators, and accessibility features. - [Phone Number](/patterns/forms/phone-number): Create phone number inputs with international format support and validation features. - [Radio Button](/patterns/forms/radio): Implement accessible radio button groups in your web applications. Learn best practices for single-choice selection controls, keyboard navigation, and ARIA attributes. - [Rating Input](/patterns/forms/rating-input): Build user-friendly rating components with star ratings and accessibility features. - [Rich Text Editor](/patterns/forms/rich-text-editor): Create accessible rich text editors with text formatting tools and keyboard shortcuts. - [Search Field](/patterns/forms/search-field): Learn how to implement effective search fields in your web applications. Discover best practices for search input design, real-time suggestions, and accessibility. - [Selection Input](/patterns/forms/selection-input): Learn how to implement user-friendly selection inputs in your web applications. Discover best practices for dropdowns, comboboxes, and list boxes with accessibility and usability guidelines. - [Signature Pad](/patterns/forms/signature-pad): Build touch-enabled signature capture with canvas drawing and validation features. - [Slider](/patterns/forms/slider): Learn how to implement accessible range slider inputs in your web applications. Discover best practices for continuous value selection, touch interactions, and accessibility. - [Tag Input](/patterns/forms/tag-input): Create tag input components for dynamic keyword entry with validation and accessibility support. - [Text Field](/patterns/forms/text-field): Implement accessible text input fields with validation, error handling, and user experience best practices. - [Textarea](/patterns/forms/textarea): Learn how to implement accessible textarea components for collecting long-form content, comments, and detailed responses. Discover best practices for multi-line text input with proper validation and user experience. - [Time Input](/patterns/forms/time-input): Build user-friendly time input fields with validation and accessibility features. - [Toggle](/patterns/forms/toggle): Implement toggle switches for binary state control in your web applications. Learn best practices for toggle buttons, state management, and accessibility. - [Back to Top](/patterns/navigation/back-to-top): Implement a Back to Top button for enhanced navigation on long pages with best practices for placement and accessibility. - [Breadcrumb](/patterns/navigation/breadcrumb): Create effective breadcrumb navigation for better site orientation. Learn implementation techniques, accessibility requirements, and design best practices for clear hierarchical navigation. - [Hamburger Menu](/patterns/navigation/hambuger-menu): Create accessible mobile menus with smooth animations and touch-friendly interactions. - [Infinite scroll](/patterns/navigation/infinite-scroll): Create seamless content loading with infinite scroll, focusing on performance, accessibility, and user experience best practices. - [Link](/patterns/navigation/link): Build accessible links with proper styling, hover states, and keyboard navigation support. - [Load More](/patterns/navigation/load-more): Build efficient content loading with the Load More pattern, focusing on user experience and performance optimization. - [Megamenu](/patterns/navigation/megamenu): Build accessible and responsive megamenus with keyboard navigation and mobile-friendly adaptations. - [Navigation Menu](/patterns/navigation/navigation-menu): Build effective navigation menus for your website. Learn best practices for creating accessible, responsive navigation with proper keyboard support and mobile-friendly interactions. - [Pagination](/patterns/navigation/pagination): Learn best practices for building accessible, user-friendly page navigation with clear guidelines for design and performance. - [Sidebar](/patterns/navigation/sidebar): Build responsive and accessible sidebar navigation with collapsible sections and keyboard navigation support. - [Tabs](/patterns/navigation/tabs): Create accessible tab interfaces with keyboard navigation, ARIA attributes, and responsive design patterns. - [Image Gallery](/patterns/media/image-gallery): Learn how to implement image galleries. Discover best practices for lightboxes, thumbnails, and image navigation. - [Image Upload](/patterns/media/image-upload): Learn how to implement image upload interfaces. Discover best practices for drag-and-drop, preview, and validation. - [Video Player](/patterns/media/video-player): Learn how to implement video players. Discover best practices for playback controls, captions, and responsive video. - [Activity Feed](/patterns/social/activity-feed): Learn how to implement activity feeds. Discover best practices for real-time updates, infinite scrolling, and engagement tracking. - [Comment System](/patterns/social/comment-system): Learn how to implement comment systems. Discover best practices for threaded discussions, moderation, and user interactions. - [Like Button](/patterns/social/like-button): Learn how to implement like buttons and reactions. Discover best practices for engagement tracking, animations, and accessibility. - [Share Dialog](/patterns/social/share-dialog): Learn how to implement share dialogs. Discover best practices for social media integration, copy links, and sharing analytics. - [Cookie Consent](/patterns/user-feedback/cookie-consent): Implement effective cookie consent banners in your web applications. Learn best practices for GDPR compliance, user privacy, and consent management. - [Empty States](/patterns/user-feedback/empty-states): Create effective empty state experiences in your web applications. Learn best practices for handling no-content scenarios with helpful messaging and clear actions. - [Loading Indicator](/patterns/user-feedback/loading-indicator): Build effective loading indicators for your web applications. Learn best practices for implementing loading states, spinners, and progress feedback with proper accessibility. - [Notification](/patterns/user-feedback/notification): Implement effective notification systems in your web applications. Learn best practices for toast messages, alerts, and user notifications with proper timing and accessibility. - [Progress Indicator](/patterns/user-feedback/progress-indicator): Create effective progress indicators for your web applications. Learn best practices for implementing progress bars, step indicators, and completion feedback with proper accessibility. - [Skeleton](/patterns/user-feedback/skeleton): Build effective skeleton loading states for your web applications. Learn best practices for implementing content placeholders and loading animations with proper accessibility. ## glossary - [UX Patterns Glossary](/glossary): A comprehensive glossary of UX patterns, design principles, and web development terminology. - [ARIA Attributes](/glossary/a/aria-attributes): HTML attributes that provide accessibility information to assistive technologies - [Canonical Tags](/glossary/c/canonical-tags): HTML elements that specify the preferred URL for duplicate or similar content to prevent SEO issues - [CLS (Cumulative Layout Shift)](/glossary/c/cls-cumulative-layout-shift): A Core Web Vital metric that measures visual stability by quantifying unexpected layout shifts during page load - [Design Tokens](/glossary/d/design-tokens): Platform-agnostic variables that store design decisions for consistent implementation across products and teams - [DOM (Document Object Model)](/glossary/d/dom): A programming interface that represents HTML and XML documents as a tree structure, allowing JavaScript to interact with and modify page content - [Keyboard Navigation](/glossary/k/keyboard-navigation): The ability to navigate and interact with a website or application using only keyboard input, without requiring a mouse - [Lazy Loading](/glossary/l/lazy-loading): A performance optimization technique that delays loading of non-critical resources until they are needed - [Live Regions](/glossary/l/live-regions): ARIA attributes that announce dynamic content changes to screen reader users without requiring focus - [Pagination](/glossary/p/pagination): A navigation pattern that divides content into separate pages to improve usability and performance - [Progressive Loading](/glossary/p/progressive-loading): A technique that loads content gradually to improve initial page load times and user experience - [Screen Reader](/glossary/s/screen-reader): Assistive technology that converts digital text and interface elements into speech or braille output for users with visual impairments - [Semantic HTML](/glossary/s/semantic-html): HTML elements that carry meaning about their content structure and purpose - [Skeleton Screen](/glossary/s/skeleton-screen): A loading state UI pattern that displays placeholder content shapes while actual content is being fetched - [Throttle and Debounce](/glossary/t/throttle-debounce): Performance optimization techniques that limit how often a function can be executed in response to continuous events - [Touch Targets](/glossary/t/touch-targets): Interactive UI elements sized and spaced appropriately for touch interaction on mobile devices - [Viewport](/glossary/v/viewport): The visible area of a web page within a browser window or mobile device screen
Document
llms-full.txt
# UX Patterns for Developers - Global skill: `ux-patterns` - Install global skill: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill ux-patterns` - Global reference: https://uxpatterns.dev/skills/ux-patterns ## Pattern skills ### advanced - [Command Palette](https://uxpatterns.dev/patterns/advanced/command-palette): Learn how to implement command palettes. Discover best practices for keyboard shortcuts, fuzzy search, and command discovery. Skill: `command-palette`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill command-palette`. Reference: https://uxpatterns.dev/skills/command-palette. Related: https://uxpatterns.dev/patterns/content-management/modal, https://uxpatterns.dev/patterns/forms/search-field, https://uxpatterns.dev/patterns/navigation/navigation-menu. - [Search Results](https://uxpatterns.dev/patterns/advanced/search-results): Learn how to implement search results pages. Discover best practices for result ranking, filtering, and pagination. Skill: `search-results`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill search-results`. Reference: https://uxpatterns.dev/skills/search-results. Related: https://uxpatterns.dev/patterns/data-display/filter-panel, https://uxpatterns.dev/patterns/forms/search-field, https://uxpatterns.dev/patterns/navigation/pagination. - [Wizard / Stepper](https://uxpatterns.dev/patterns/advanced/wizard): Learn how to implement wizards and steppers. Discover best practices for multi-step forms, progress tracking, and step validation. Skill: `wizard`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill wizard`. Reference: https://uxpatterns.dev/skills/wizard. Related: https://uxpatterns.dev/patterns/e-commerce/checkout, https://uxpatterns.dev/patterns/forms/form-validation, https://uxpatterns.dev/patterns/user-feedback/progress-indicator. ### ai-intelligence - [AI Chat Interface](https://uxpatterns.dev/patterns/ai-intelligence/ai-chat): Learn how to implement AI chat interfaces. Discover best practices for message threading, context management, and conversational UX. Skill: `ai-chat`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill ai-chat`. Reference: https://uxpatterns.dev/skills/ai-chat. Related: https://uxpatterns.dev/patterns/ai-intelligence/prompt-input, https://uxpatterns.dev/patterns/ai-intelligence/response-feedback, https://uxpatterns.dev/patterns/ai-intelligence/streaming-response. - [AI Error States](https://uxpatterns.dev/patterns/ai-intelligence/ai-error-states): Learn how to implement AI error states. Discover best practices for rate limits, model errors, and graceful degradation. Skill: `ai-error-states`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill ai-error-states`. Reference: https://uxpatterns.dev/skills/ai-error-states. Related: https://uxpatterns.dev/patterns/ai-intelligence/ai-loading-states, https://uxpatterns.dev/patterns/ai-intelligence/response-feedback, https://uxpatterns.dev/patterns/user-feedback/notification. - [AI Loading States](https://uxpatterns.dev/patterns/ai-intelligence/ai-loading-states): Learn how to implement AI-specific loading states. Discover best practices for thinking animations, progress indicators, and stream initialization. Skill: `ai-loading-states`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill ai-loading-states`. Reference: https://uxpatterns.dev/skills/ai-loading-states. Related: https://uxpatterns.dev/patterns/ai-intelligence/streaming-response, https://uxpatterns.dev/patterns/user-feedback/loading-indicator, https://uxpatterns.dev/patterns/user-feedback/skeleton. - [AI Suggestions](https://uxpatterns.dev/patterns/ai-intelligence/ai-suggestions): Learn how to implement AI suggestions. Discover best practices for predictive text, smart completions, and recommendation interfaces. Skill: `ai-suggestions`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill ai-suggestions`. Reference: https://uxpatterns.dev/skills/ai-suggestions. Related: https://uxpatterns.dev/patterns/ai-intelligence/model-selector, https://uxpatterns.dev/patterns/ai-intelligence/prompt-input, https://uxpatterns.dev/patterns/forms/autocomplete. - [Context Window](https://uxpatterns.dev/patterns/ai-intelligence/context-window): Learn how to implement context window management. Discover best practices for conversation history, context limits, and memory management. Skill: `context-window`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill context-window`. Reference: https://uxpatterns.dev/skills/context-window. Related: https://uxpatterns.dev/patterns/ai-intelligence/ai-chat, https://uxpatterns.dev/patterns/ai-intelligence/streaming-response, https://uxpatterns.dev/patterns/ai-intelligence/token-counter. - [Model Selector](https://uxpatterns.dev/patterns/ai-intelligence/model-selector): Learn how to implement model selectors. Discover best practices for model comparison, capability display, and settings management. Skill: `model-selector`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill model-selector`. Reference: https://uxpatterns.dev/skills/model-selector. Related: https://uxpatterns.dev/patterns/ai-intelligence/prompt-input, https://uxpatterns.dev/patterns/ai-intelligence/response-feedback, https://uxpatterns.dev/patterns/ai-intelligence/token-counter. - [Prompt Input](https://uxpatterns.dev/patterns/ai-intelligence/prompt-input): Learn how to implement prompt input interfaces. Discover best practices for multiline inputs, prompt templates, and input enhancements. Skill: `prompt-input`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill prompt-input`. Reference: https://uxpatterns.dev/skills/prompt-input. Related: https://uxpatterns.dev/patterns/ai-intelligence/ai-suggestions, https://uxpatterns.dev/patterns/forms/text-field, https://uxpatterns.dev/patterns/forms/textarea. - [Response Feedback](https://uxpatterns.dev/patterns/ai-intelligence/response-feedback): Learn how to implement response feedback. Discover best practices for ratings, regeneration, and improvement signals. Skill: `response-feedback`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill response-feedback`. Reference: https://uxpatterns.dev/skills/response-feedback. Related: https://uxpatterns.dev/patterns/ai-intelligence/ai-error-states, https://uxpatterns.dev/patterns/social/like-button, https://uxpatterns.dev/patterns/user-feedback/notification. - [Streaming Response](https://uxpatterns.dev/patterns/ai-intelligence/streaming-response): Learn how to implement streaming AI responses. Discover best practices for progressive rendering, markdown formatting, and stream interruption. Skill: `streaming-response`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill streaming-response`. Reference: https://uxpatterns.dev/skills/streaming-response. Related: https://uxpatterns.dev/patterns/ai-intelligence/ai-chat, https://uxpatterns.dev/patterns/ai-intelligence/ai-loading-states, https://uxpatterns.dev/patterns/ai-intelligence/context-window. - [Token Counter](https://uxpatterns.dev/patterns/ai-intelligence/token-counter): Learn how to implement token counters. Discover best practices for usage indicators, limit warnings, and cost estimation. Skill: `token-counter`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill token-counter`. Reference: https://uxpatterns.dev/skills/token-counter. Related: https://uxpatterns.dev/patterns/ai-intelligence/context-window, https://uxpatterns.dev/patterns/ai-intelligence/model-selector, https://uxpatterns.dev/patterns/ai-intelligence/prompt-input. ### authentication - [Account Settings](https://uxpatterns.dev/patterns/authentication/account-settings): Learn how to implement account settings. Discover best practices for preference management, privacy controls, and account configuration. Skill: `account-settings`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill account-settings`. Reference: https://uxpatterns.dev/skills/account-settings. Related: https://uxpatterns.dev/patterns/authentication/password-reset, https://uxpatterns.dev/patterns/authentication/social-login, https://uxpatterns.dev/patterns/authentication/two-factor, https://uxpatterns.dev/patterns/authentication/user-profile. - [Login Form](https://uxpatterns.dev/patterns/authentication/login): Learn how to implement secure and user-friendly login forms. Discover best practices for authentication, password fields, and remember me functionality. Skill: `login`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill login`. Reference: https://uxpatterns.dev/skills/login. Related: https://uxpatterns.dev/patterns/authentication/password-reset, https://uxpatterns.dev/patterns/authentication/signup, https://uxpatterns.dev/patterns/authentication/social-login, https://uxpatterns.dev/patterns/authentication/two-factor. - [Password Reset](https://uxpatterns.dev/patterns/authentication/password-reset): Learn how to implement secure password reset functionality. Discover best practices for recovery emails, token validation, and security considerations. Skill: `password-reset`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill password-reset`. Reference: https://uxpatterns.dev/skills/password-reset. Related: https://uxpatterns.dev/patterns/authentication/login, https://uxpatterns.dev/patterns/authentication/social-login, https://uxpatterns.dev/patterns/authentication/two-factor. - [Sign Up Flow](https://uxpatterns.dev/patterns/authentication/signup): Learn how to implement effective sign-up flows. Discover best practices for user registration, form validation, and onboarding experiences. Skill: `signup`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill signup`. Reference: https://uxpatterns.dev/skills/signup. Related: https://uxpatterns.dev/patterns/authentication/account-settings, https://uxpatterns.dev/patterns/authentication/login, https://uxpatterns.dev/patterns/authentication/social-login. - [Social Login](https://uxpatterns.dev/patterns/authentication/social-login): Learn how to implement social login. Discover best practices for OAuth flows, provider integration, and account linking. Skill: `social-login`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill social-login`. Reference: https://uxpatterns.dev/skills/social-login. Related: https://uxpatterns.dev/patterns/authentication/login, https://uxpatterns.dev/patterns/authentication/signup, https://uxpatterns.dev/patterns/authentication/two-factor. - [Two-Factor Authentication](https://uxpatterns.dev/patterns/authentication/two-factor): Learn how to implement two-factor authentication. Discover best practices for TOTP, SMS verification, and security keys. Skill: `two-factor`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill two-factor`. Reference: https://uxpatterns.dev/skills/two-factor. Related: https://uxpatterns.dev/patterns/authentication/account-settings, https://uxpatterns.dev/patterns/authentication/login, https://uxpatterns.dev/patterns/authentication/password-reset, https://uxpatterns.dev/patterns/authentication/social-login. - [User Profile](https://uxpatterns.dev/patterns/authentication/user-profile): Learn how to implement user profile interfaces. Discover best practices for displaying user information, avatars, and account settings. Skill: `user-profile`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill user-profile`. Reference: https://uxpatterns.dev/skills/user-profile. Related: https://uxpatterns.dev/patterns/authentication/account-settings, https://uxpatterns.dev/patterns/authentication/login, https://uxpatterns.dev/patterns/authentication/signup. ### content-management - [Accordion](https://uxpatterns.dev/patterns/content-management/accordion): Create effective accordion components for your web applications. Learn best practices for implementing expandable content sections with proper accessibility and keyboard support. Skill: `accordion`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill accordion`. Reference: https://uxpatterns.dev/skills/accordion. Aliases: collapsible panels. Related: https://uxpatterns.dev/patterns/content-management/expandable-text, https://uxpatterns.dev/patterns/content-management/modal, https://uxpatterns.dev/patterns/navigation/tabs. - [Carousel](https://uxpatterns.dev/patterns/content-management/carousel): Build effective carousel components for your web applications. Learn best practices for implementing accessible, responsive carousels with proper navigation and touch support. Skill: `carousel`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill carousel`. Reference: https://uxpatterns.dev/skills/carousel. Aliases: slider, slideshow, image rotator. Related: https://uxpatterns.dev/patterns/content-management/accordion, https://uxpatterns.dev/patterns/content-management/expandable-text, https://uxpatterns.dev/patterns/data-display/card-grid, https://uxpatterns.dev/patterns/navigation/infinite-scroll, https://uxpatterns.dev/patterns/navigation/load-more, https://uxpatterns.dev/patterns/navigation/pagination, https://uxpatterns.dev/patterns/navigation/tabs. - [Drag and Drop](https://uxpatterns.dev/patterns/content-management/drag-and-drop): Build intuitive drag and drop functionality with accessibility and touch support. Skill: `drag-and-drop`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill drag-and-drop`. Reference: https://uxpatterns.dev/skills/drag-and-drop. Related: https://uxpatterns.dev/patterns/data-display/kanban-board, https://uxpatterns.dev/patterns/data-display/list-view, https://uxpatterns.dev/patterns/media/image-upload. - [Expandable Text](https://uxpatterns.dev/patterns/content-management/expandable-text): Create expandable text components with progressive disclosure and accessibility features for better content management. Skill: `expandable-text`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill expandable-text`. Reference: https://uxpatterns.dev/skills/expandable-text. Aliases: collapsible text, Read More/Read Less. Related: https://uxpatterns.dev/patterns/content-management/accordion, https://uxpatterns.dev/patterns/content-management/modal, https://uxpatterns.dev/patterns/content-management/tooltip. - [Modal](https://uxpatterns.dev/patterns/content-management/modal): Build accessible modal dialogs with proper focus management, keyboard interactions, and user experience best practices. Skill: `modal`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill modal`. Reference: https://uxpatterns.dev/skills/modal. Aliases: dialog, dialog box, overlay, popup. Related: https://uxpatterns.dev/patterns/content-management/popover, https://uxpatterns.dev/patterns/content-management/tooltip, https://uxpatterns.dev/patterns/user-feedback/loading-indicator. - [Popover](https://uxpatterns.dev/patterns/content-management/popover): Implement user-friendly popover components in your web applications. Learn best practices for contextual information display, positioning, and accessibility with practical examples. Skill: `popover`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill popover`. Reference: https://uxpatterns.dev/skills/popover. Related: https://uxpatterns.dev/patterns/content-management/modal, https://uxpatterns.dev/patterns/content-management/tooltip, https://uxpatterns.dev/patterns/forms/selection-input. - [Tooltip](https://uxpatterns.dev/patterns/content-management/tooltip): Implement effective tooltip components in your web applications. Learn best practices for contextual help, positioning strategies, and accessibility considerations. Skill: `tooltip`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill tooltip`. Reference: https://uxpatterns.dev/skills/tooltip. Aliases: hover hint, info bubble. Related: https://uxpatterns.dev/patterns/content-management/modal, https://uxpatterns.dev/patterns/content-management/popover, https://uxpatterns.dev/patterns/forms/selection-input. ### data-display - [Calendar View](https://uxpatterns.dev/patterns/data-display/calendar): Learn how to implement calendar views. Discover best practices for date navigation, event display, and calendar interactions. Skill: `calendar`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill calendar`. Reference: https://uxpatterns.dev/skills/calendar. Related: https://uxpatterns.dev/patterns/data-display/filter-panel, https://uxpatterns.dev/patterns/data-display/list-view, https://uxpatterns.dev/patterns/data-display/timeline. - [Card Grid](https://uxpatterns.dev/patterns/data-display/card-grid): Learn how to implement card grids for content display. Discover best practices for responsive layouts, card designs, and grid systems. Skill: `card-grid`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill card-grid`. Reference: https://uxpatterns.dev/skills/card-grid. Related: https://uxpatterns.dev/patterns/data-display/list-view, https://uxpatterns.dev/patterns/data-display/table, https://uxpatterns.dev/patterns/e-commerce/product-card. - [Charts & Graphs](https://uxpatterns.dev/patterns/data-display/chart): Learn how to implement accessible charts and graphs. Discover best practices for data visualization, chart types, and responsive designs. Skill: `chart`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill chart`. Reference: https://uxpatterns.dev/skills/chart. Related: https://uxpatterns.dev/patterns/data-display/dashboard, https://uxpatterns.dev/patterns/data-display/statistics, https://uxpatterns.dev/patterns/data-display/table. - [Comparison Table](https://uxpatterns.dev/patterns/data-display/comparison-table): Learn how to implement comparison tables. Discover best practices for feature comparisons, pricing tables, and decision matrices. Skill: `comparison-table`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill comparison-table`. Reference: https://uxpatterns.dev/skills/comparison-table. Related: https://uxpatterns.dev/patterns/data-display/list-view, https://uxpatterns.dev/patterns/data-display/table, https://uxpatterns.dev/patterns/e-commerce/product-card. - [Dashboard Layout](https://uxpatterns.dev/patterns/data-display/dashboard): Learn how to implement dashboard layouts. Discover best practices for widget organization, responsive grids, and data visualization. Skill: `dashboard`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill dashboard`. Reference: https://uxpatterns.dev/skills/dashboard. Related: https://uxpatterns.dev/patterns/data-display/chart, https://uxpatterns.dev/patterns/data-display/filter-panel, https://uxpatterns.dev/patterns/data-display/statistics. - [Data Table](https://uxpatterns.dev/patterns/data-display/table): Learn how to implement accessible and performant data tables. Discover best practices for sorting, filtering, pagination, and responsive table designs. Skill: `table`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill table`. Reference: https://uxpatterns.dev/skills/table. Aliases: data grids. Related: https://uxpatterns.dev/patterns/content-management/accordion, https://uxpatterns.dev/patterns/content-management/expandable-text, https://uxpatterns.dev/patterns/content-management/modal, https://uxpatterns.dev/patterns/content-management/tooltip, https://uxpatterns.dev/patterns/data-display/card-grid, https://uxpatterns.dev/patterns/data-display/dashboard, https://uxpatterns.dev/patterns/data-display/filter-panel, https://uxpatterns.dev/patterns/data-display/list-view, https://uxpatterns.dev/patterns/data-display/tree-view, https://uxpatterns.dev/patterns/forms/checkbox, https://uxpatterns.dev/patterns/forms/search-field, https://uxpatterns.dev/patterns/navigation/pagination, https://uxpatterns.dev/patterns/user-feedback/empty-states, https://uxpatterns.dev/patterns/user-feedback/notification, https://uxpatterns.dev/patterns/user-feedback/skeleton. - [Filter Panel](https://uxpatterns.dev/patterns/data-display/filter-panel): Learn how to implement filter panels for data refinement. Discover best practices for faceted search, filter UI, and dynamic filtering. Skill: `filter-panel`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill filter-panel`. Reference: https://uxpatterns.dev/skills/filter-panel. Related: https://uxpatterns.dev/patterns/advanced/search-results, https://uxpatterns.dev/patterns/data-display/list-view, https://uxpatterns.dev/patterns/navigation/pagination. - [Kanban Board](https://uxpatterns.dev/patterns/data-display/kanban-board): Learn how to implement kanban boards. Discover best practices for drag-and-drop, task management, and workflow visualization. Skill: `kanban-board`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill kanban-board`. Reference: https://uxpatterns.dev/skills/kanban-board. Related: https://uxpatterns.dev/patterns/content-management/drag-and-drop, https://uxpatterns.dev/patterns/data-display/dashboard, https://uxpatterns.dev/patterns/data-display/list-view. - [List View](https://uxpatterns.dev/patterns/data-display/list-view): Learn how to implement list views for data display. Discover best practices for list layouts, item selection, and virtual scrolling. Skill: `list-view`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill list-view`. Reference: https://uxpatterns.dev/skills/list-view. Related: https://uxpatterns.dev/patterns/data-display/card-grid, https://uxpatterns.dev/patterns/data-display/table, https://uxpatterns.dev/patterns/data-display/timeline. - [Statistics Display](https://uxpatterns.dev/patterns/data-display/statistics): Learn how to implement statistics displays. Discover best practices for metric cards, KPI dashboards, and data visualization. Skill: `statistics`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill statistics`. Reference: https://uxpatterns.dev/skills/statistics. Related: https://uxpatterns.dev/patterns/data-display/chart, https://uxpatterns.dev/patterns/data-display/comparison-table, https://uxpatterns.dev/patterns/data-display/dashboard. - [Timeline](https://uxpatterns.dev/patterns/data-display/timeline): Learn how to implement timelines for showing chronological data. Discover best practices for activity feeds, history logs, and event sequences. Skill: `timeline`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill timeline`. Reference: https://uxpatterns.dev/skills/timeline. Related: https://uxpatterns.dev/patterns/data-display/calendar, https://uxpatterns.dev/patterns/data-display/list-view, https://uxpatterns.dev/patterns/social/activity-feed. - [Tree View](https://uxpatterns.dev/patterns/data-display/tree-view): Learn how to implement tree views for hierarchical data. Discover best practices for expandable nodes, selection states, and keyboard navigation. Skill: `tree-view`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill tree-view`. Reference: https://uxpatterns.dev/skills/tree-view. Related: https://uxpatterns.dev/patterns/data-display/list-view, https://uxpatterns.dev/patterns/data-display/table, https://uxpatterns.dev/patterns/navigation/navigation-menu. ### e-commerce - [Checkout Flow](https://uxpatterns.dev/patterns/e-commerce/checkout): Learn how to implement checkout flows. Discover best practices for payment forms, order review, and conversion optimization. Skill: `checkout`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill checkout`. Reference: https://uxpatterns.dev/skills/checkout. Related: https://uxpatterns.dev/patterns/advanced/wizard, https://uxpatterns.dev/patterns/e-commerce/shopping-cart, https://uxpatterns.dev/patterns/forms/form-validation. - [Product Card](https://uxpatterns.dev/patterns/e-commerce/product-card): Learn how to implement effective product cards. Discover best practices for product images, pricing display, and quick actions. Skill: `product-card`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill product-card`. Reference: https://uxpatterns.dev/skills/product-card. Related: https://uxpatterns.dev/patterns/data-display/card-grid, https://uxpatterns.dev/patterns/data-display/comparison-table, https://uxpatterns.dev/patterns/e-commerce/shopping-cart. - [Shopping Cart](https://uxpatterns.dev/patterns/e-commerce/shopping-cart): Learn how to implement shopping cart functionality. Discover best practices for cart management, item updates, and persistent storage. Skill: `shopping-cart`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill shopping-cart`. Reference: https://uxpatterns.dev/skills/shopping-cart. Related: https://uxpatterns.dev/patterns/e-commerce/checkout, https://uxpatterns.dev/patterns/e-commerce/product-card, https://uxpatterns.dev/patterns/user-feedback/notification. ### forms - [Autocomplete](https://uxpatterns.dev/patterns/forms/autocomplete): Build user-friendly autocomplete with search suggestions, keyboard navigation, and accessibility features. Skill: `autocomplete`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill autocomplete`. Reference: https://uxpatterns.dev/skills/autocomplete. Aliases: autosuggest. Related: https://uxpatterns.dev/patterns/autocomplete/do-dont-accessibility-1, https://uxpatterns.dev/patterns/autocomplete/do-dont-content-1, https://uxpatterns.dev/patterns/autocomplete/do-dont-visual-design-2, https://uxpatterns.dev/patterns/forms/date-picker, https://uxpatterns.dev/patterns/forms/multi-select-input, https://uxpatterns.dev/patterns/forms/text-field. - [Button](https://uxpatterns.dev/patterns/forms/button): Create accessible and user-friendly buttons with proper states, design patterns, and implementation guidelines. Skill: `button`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill button`. Reference: https://uxpatterns.dev/skills/button. Related: https://uxpatterns.dev/patterns/forms/toggle, https://uxpatterns.dev/patterns/navigation/link. - [Checkbox](https://uxpatterns.dev/patterns/forms/checkbox): Learn how to implement accessible checkbox inputs in your web applications. Discover best practices for multiple selection controls, states handling, and accessibility. Skill: `checkbox`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill checkbox`. Reference: https://uxpatterns.dev/skills/checkbox. Aliases: tick box, selection box. Related: https://uxpatterns.dev/patterns/forms/button, https://uxpatterns.dev/patterns/forms/form-validation, https://uxpatterns.dev/patterns/forms/multi-select-input, https://uxpatterns.dev/patterns/forms/radio, https://uxpatterns.dev/patterns/forms/selection-input, https://uxpatterns.dev/patterns/forms/toggle, https://uxpatterns.dev/patterns/navigation/pagination. - [Code Confirmation](https://uxpatterns.dev/patterns/forms/code-confirmation): Implement user-friendly code confirmation inputs for verification codes and OTPs. Learn best practices for segmented inputs, auto-focus behavior, and accessibility. Skill: `code-confirmation`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill code-confirmation`. Reference: https://uxpatterns.dev/skills/code-confirmation. Related: https://uxpatterns.dev/patterns/forms/text-field. - [Color Picker](https://uxpatterns.dev/patterns/forms/color-picker): Select colors with visual feedback Skill: `color-picker`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill color-picker`. Reference: https://uxpatterns.dev/skills/color-picker. Related: https://uxpatterns.dev/patterns/forms/selection-input, https://uxpatterns.dev/patterns/forms/text-field. - [Currency Input](https://uxpatterns.dev/patterns/forms/currency-input): Create currency input fields with number formatting and international currency handling. Skill: `currency-input`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill currency-input`. Reference: https://uxpatterns.dev/skills/currency-input. Related: https://uxpatterns.dev/patterns/forms/text-field. - [Date Input](https://uxpatterns.dev/patterns/forms/date-input): Build date input fields with validation, formatting, and localization features. Skill: `date-input`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill date-input`. Reference: https://uxpatterns.dev/skills/date-input. Related: https://uxpatterns.dev/patterns/forms/date-picker, https://uxpatterns.dev/patterns/forms/date-range, https://uxpatterns.dev/patterns/forms/text-field. - [Date Picker](https://uxpatterns.dev/patterns/forms/date-picker): Create user-friendly date pickers with calendar interfaces and keyboard navigation. Skill: `date-picker`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill date-picker`. Reference: https://uxpatterns.dev/skills/date-picker. Related: https://uxpatterns.dev/patterns/forms/date-input, https://uxpatterns.dev/patterns/forms/date-range, https://uxpatterns.dev/patterns/forms/text-field. - [Date Range](https://uxpatterns.dev/patterns/forms/date-range): Build date range selection with calendar interfaces and validation features. Skill: `date-range`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill date-range`. Reference: https://uxpatterns.dev/skills/date-range. Related: https://uxpatterns.dev/patterns/forms/date-input, https://uxpatterns.dev/patterns/forms/date-picker, https://uxpatterns.dev/patterns/forms/selection-input. - [File Input](https://uxpatterns.dev/patterns/forms/file-input): Create user-friendly file upload components for your web applications. Learn best practices for file selection, drag-and-drop, progress indicators, and validation. Skill: `file-input`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill file-input`. Reference: https://uxpatterns.dev/skills/file-input. Related: https://uxpatterns.dev/patterns/forms/text-field. - [Form Validation](https://uxpatterns.dev/patterns/forms/form-validation): Learn how to implement effective form validation in your web applications. Discover best practices for error handling, real-time validation, and user feedback. Skill: `form-validation`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill form-validation`. Reference: https://uxpatterns.dev/skills/form-validation. Related: https://uxpatterns.dev/patterns/forms/button, https://uxpatterns.dev/patterns/forms/date-input, https://uxpatterns.dev/patterns/forms/text-field. - [Multi-select Input](https://uxpatterns.dev/patterns/forms/multi-select-input): Implement multi-select components for multiple item selection in your web applications. Learn best practices for list management, keyboard navigation, and accessibility. Skill: `multi-select-input`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill multi-select-input`. Reference: https://uxpatterns.dev/skills/multi-select-input. Related: https://uxpatterns.dev/patterns/forms/autocomplete, https://uxpatterns.dev/patterns/forms/checkbox, https://uxpatterns.dev/patterns/forms/radio, https://uxpatterns.dev/patterns/forms/selection-input. - [Password](https://uxpatterns.dev/patterns/forms/password): Build secure and user-friendly password fields with validation, strength indicators, and accessibility features. Skill: `password`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill password`. Reference: https://uxpatterns.dev/skills/password. Related: https://uxpatterns.dev/patterns/forms/code-confirmation, https://uxpatterns.dev/patterns/forms/text-field. - [Phone Number](https://uxpatterns.dev/patterns/forms/phone-number): Create phone number inputs with international format support and validation features. Skill: `phone-number`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill phone-number`. Reference: https://uxpatterns.dev/skills/phone-number. Related: https://uxpatterns.dev/patterns/forms/form-validation, https://uxpatterns.dev/patterns/forms/selection-input, https://uxpatterns.dev/patterns/forms/text-field. - [Radio Button](https://uxpatterns.dev/patterns/forms/radio): Implement accessible radio button groups in your web applications. Learn best practices for single-choice selection controls, keyboard navigation, and ARIA attributes. Skill: `radio`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill radio`. Reference: https://uxpatterns.dev/skills/radio. Related: https://uxpatterns.dev/patterns/forms/checkbox, https://uxpatterns.dev/patterns/forms/form-validation, https://uxpatterns.dev/patterns/forms/selection-input, https://uxpatterns.dev/patterns/forms/toggle. - [Rating Input](https://uxpatterns.dev/patterns/forms/rating-input): Build user-friendly rating components with star ratings and accessibility features. Skill: `rating-input`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill rating-input`. Reference: https://uxpatterns.dev/skills/rating-input. Related: https://uxpatterns.dev/patterns/forms/radio, https://uxpatterns.dev/patterns/forms/slider, https://uxpatterns.dev/patterns/social/like-button. - [Rich Text Editor](https://uxpatterns.dev/patterns/forms/rich-text-editor): Create accessible rich text editors with text formatting tools and keyboard shortcuts. Skill: `rich-text-editor`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill rich-text-editor`. Reference: https://uxpatterns.dev/skills/rich-text-editor. Related: https://uxpatterns.dev/patterns/forms/button, https://uxpatterns.dev/patterns/forms/tag-input, https://uxpatterns.dev/patterns/forms/textarea. - [Search Field](https://uxpatterns.dev/patterns/forms/search-field): Learn how to implement effective search fields in your web applications. Discover best practices for search input design, real-time suggestions, and accessibility. Skill: `search-field`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill search-field`. Reference: https://uxpatterns.dev/skills/search-field. Aliases: search input. Related: https://uxpatterns.dev/patterns/advanced/command-palette, https://uxpatterns.dev/patterns/advanced/search-results, https://uxpatterns.dev/patterns/forms/autocomplete, https://uxpatterns.dev/patterns/forms/text-field. - [Selection Input](https://uxpatterns.dev/patterns/forms/selection-input): Learn how to implement user-friendly selection inputs in your web applications. Discover best practices for dropdowns, comboboxes, and list boxes with accessibility and usability guidelines. Skill: `selection-input`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill selection-input`. Reference: https://uxpatterns.dev/skills/selection-input. Aliases: dropdown, select. Related: https://uxpatterns.dev/patterns/forms/autocomplete, https://uxpatterns.dev/patterns/forms/multi-select-input. - [Signature Pad](https://uxpatterns.dev/patterns/forms/signature-pad): Build touch-enabled signature capture with canvas drawing and validation features. Skill: `signature-pad`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill signature-pad`. Reference: https://uxpatterns.dev/skills/signature-pad. Related: https://uxpatterns.dev/patterns/forms/button, https://uxpatterns.dev/patterns/forms/file-input, https://uxpatterns.dev/patterns/forms/form-validation. - [Slider](https://uxpatterns.dev/patterns/forms/slider): Learn how to implement accessible range slider inputs in your web applications. Discover best practices for continuous value selection, touch interactions, and accessibility. Skill: `slider`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill slider`. Reference: https://uxpatterns.dev/skills/slider. Related: https://uxpatterns.dev/patterns/forms/rating-input, https://uxpatterns.dev/patterns/forms/selection-input, https://uxpatterns.dev/patterns/forms/toggle. - [Tag Input](https://uxpatterns.dev/patterns/forms/tag-input): Create tag input components for dynamic keyword entry with validation and accessibility support. Skill: `tag-input`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill tag-input`. Reference: https://uxpatterns.dev/skills/tag-input. Related: https://uxpatterns.dev/patterns/forms/autocomplete, https://uxpatterns.dev/patterns/forms/multi-select-input, https://uxpatterns.dev/patterns/forms/text-field. - [Text Field](https://uxpatterns.dev/patterns/forms/text-field): Implement accessible text input fields with validation, error handling, and user experience best practices. Skill: `text-field`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill text-field`. Reference: https://uxpatterns.dev/skills/text-field. Related: https://uxpatterns.dev/patterns/forms/autocomplete, https://uxpatterns.dev/patterns/forms/checkbox, https://uxpatterns.dev/patterns/forms/currency-input, https://uxpatterns.dev/patterns/forms/date-picker, https://uxpatterns.dev/patterns/forms/multi-select-input, https://uxpatterns.dev/patterns/forms/radio, https://uxpatterns.dev/patterns/forms/selection-input. - [Textarea](https://uxpatterns.dev/patterns/forms/textarea): Learn how to implement accessible textarea components for collecting long-form content, comments, and detailed responses. Discover best practices for multi-line text input with proper validation and user experience. Skill: `textarea`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill textarea`. Reference: https://uxpatterns.dev/skills/textarea. Related: https://uxpatterns.dev/patterns/forms/form-validation, https://uxpatterns.dev/patterns/forms/rich-text-editor, https://uxpatterns.dev/patterns/forms/text-field. - [Time Input](https://uxpatterns.dev/patterns/forms/time-input): Build user-friendly time input fields with validation and accessibility features. Skill: `time-input`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill time-input`. Reference: https://uxpatterns.dev/skills/time-input. Related: https://uxpatterns.dev/patterns/forms/date-input, https://uxpatterns.dev/patterns/forms/date-picker, https://uxpatterns.dev/patterns/forms/form-validation. - [Toggle](https://uxpatterns.dev/patterns/forms/toggle): Implement toggle switches for binary state control in your web applications. Learn best practices for toggle buttons, state management, and accessibility. Skill: `toggle`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill toggle`. Reference: https://uxpatterns.dev/skills/toggle. Related: https://uxpatterns.dev/patterns/forms/button, https://uxpatterns.dev/patterns/forms/checkbox, https://uxpatterns.dev/patterns/forms/radio. ### media - [Image Gallery](https://uxpatterns.dev/patterns/media/image-gallery): Learn how to implement image galleries. Discover best practices for lightboxes, thumbnails, and image navigation. Skill: `image-gallery`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill image-gallery`. Reference: https://uxpatterns.dev/skills/image-gallery. Related: https://uxpatterns.dev/patterns/content-management/carousel, https://uxpatterns.dev/patterns/content-management/modal, https://uxpatterns.dev/patterns/media/image-upload. - [Image Upload](https://uxpatterns.dev/patterns/media/image-upload): Learn how to implement image upload interfaces. Discover best practices for drag-and-drop, preview, and validation. Skill: `image-upload`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill image-upload`. Reference: https://uxpatterns.dev/skills/image-upload. Related: https://uxpatterns.dev/patterns/content-management/drag-and-drop, https://uxpatterns.dev/patterns/forms/file-input, https://uxpatterns.dev/patterns/user-feedback/progress-indicator. - [Video Player](https://uxpatterns.dev/patterns/media/video-player): Learn how to implement video players. Discover best practices for playback controls, captions, and responsive video. Skill: `video-player`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill video-player`. Reference: https://uxpatterns.dev/skills/video-player. Related: https://uxpatterns.dev/patterns/media/image-gallery, https://uxpatterns.dev/patterns/user-feedback/loading-indicator, https://uxpatterns.dev/patterns/user-feedback/progress-indicator. ### navigation - [Back to Top](https://uxpatterns.dev/patterns/navigation/back-to-top): Implement a Back to Top button for enhanced navigation on long pages with best practices for placement and accessibility. Skill: `back-to-top`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill back-to-top`. Reference: https://uxpatterns.dev/skills/back-to-top. Related: https://uxpatterns.dev/patterns/navigation/breadcrumb, https://uxpatterns.dev/patterns/navigation/infinite-scroll, https://uxpatterns.dev/patterns/navigation/pagination. - [Breadcrumb](https://uxpatterns.dev/patterns/navigation/breadcrumb): Create effective breadcrumb navigation for better site orientation. Learn implementation techniques, accessibility requirements, and design best practices for clear hierarchical navigation. Skill: `breadcrumb`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill breadcrumb`. Reference: https://uxpatterns.dev/skills/breadcrumb. Related: https://uxpatterns.dev/patterns/navigation/back-to-top, https://uxpatterns.dev/patterns/navigation/pagination, https://uxpatterns.dev/patterns/navigation/tabs. - [Hamburger Menu](https://uxpatterns.dev/patterns/navigation/hambuger-menu): Create accessible mobile menus with smooth animations and touch-friendly interactions. Skill: `hambuger-menu`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill hambuger-menu`. Reference: https://uxpatterns.dev/skills/hambuger-menu. Related: https://uxpatterns.dev/patterns/navigation/navigation-menu, https://uxpatterns.dev/patterns/navigation/sidebar, https://uxpatterns.dev/patterns/navigation/tabs. - [Infinite scroll](https://uxpatterns.dev/patterns/navigation/infinite-scroll): Create seamless content loading with infinite scroll, focusing on performance, accessibility, and user experience best practices. Skill: `infinite-scroll`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill infinite-scroll`. Reference: https://uxpatterns.dev/skills/infinite-scroll. Aliases: continuous scrolling. Related: https://uxpatterns.dev/patterns/navigation/load-more, https://uxpatterns.dev/patterns/navigation/pagination. - [Link](https://uxpatterns.dev/patterns/navigation/link): Build accessible links with proper styling, hover states, and keyboard navigation support. Skill: `link`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill link`. Reference: https://uxpatterns.dev/skills/link. Related: https://uxpatterns.dev/patterns/forms/button, https://uxpatterns.dev/patterns/navigation/breadcrumb, https://uxpatterns.dev/patterns/navigation/navigation-menu. - [Load More](https://uxpatterns.dev/patterns/navigation/load-more): Build efficient content loading with the Load More pattern, focusing on user experience and performance optimization. Skill: `load-more`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill load-more`. Reference: https://uxpatterns.dev/skills/load-more. Related: https://uxpatterns.dev/patterns/content-management/accordion, https://uxpatterns.dev/patterns/forms/button, https://uxpatterns.dev/patterns/navigation/infinite-scroll, https://uxpatterns.dev/patterns/navigation/pagination. - [Megamenu](https://uxpatterns.dev/patterns/navigation/megamenu): Build accessible and responsive megamenus with keyboard navigation and mobile-friendly adaptations. Skill: `megamenu`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill megamenu`. Reference: https://uxpatterns.dev/skills/megamenu. Related: https://uxpatterns.dev/patterns/navigation/hambuger-menu, https://uxpatterns.dev/patterns/navigation/navigation-menu, https://uxpatterns.dev/patterns/navigation/sidebar. - [Navigation Menu](https://uxpatterns.dev/patterns/navigation/navigation-menu): Build effective navigation menus for your website. Learn best practices for creating accessible, responsive navigation with proper keyboard support and mobile-friendly interactions. Skill: `navigation-menu`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill navigation-menu`. Reference: https://uxpatterns.dev/skills/navigation-menu. Related: https://uxpatterns.dev/patterns/navigation/breadcrumb, https://uxpatterns.dev/patterns/navigation/hambuger-menu, https://uxpatterns.dev/patterns/navigation/sidebar, https://uxpatterns.dev/patterns/navigation/tabs. - [Pagination](https://uxpatterns.dev/patterns/navigation/pagination): Learn best practices for building accessible, user-friendly page navigation with clear guidelines for design and performance. Skill: `pagination`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill pagination`. Reference: https://uxpatterns.dev/skills/pagination. Related: https://uxpatterns.dev/patterns/navigation/infinite-scroll, https://uxpatterns.dev/patterns/navigation/load-more. - [Sidebar](https://uxpatterns.dev/patterns/navigation/sidebar): Build responsive and accessible sidebar navigation with collapsible sections and keyboard navigation support. Skill: `sidebar`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill sidebar`. Reference: https://uxpatterns.dev/skills/sidebar. Related: https://uxpatterns.dev/patterns/navigation/hambuger-menu, https://uxpatterns.dev/patterns/navigation/navigation-menu, https://uxpatterns.dev/patterns/navigation/tabs. - [Tabs](https://uxpatterns.dev/patterns/navigation/tabs): Create accessible tab interfaces with keyboard navigation, ARIA attributes, and responsive design patterns. Skill: `tabs`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill tabs`. Reference: https://uxpatterns.dev/skills/tabs. Related: https://uxpatterns.dev/patterns/advanced/wizard, https://uxpatterns.dev/patterns/content-management/accordion, https://uxpatterns.dev/patterns/navigation/navigation-menu, https://uxpatterns.dev/patterns/navigation/sidebar. ### social - [Activity Feed](https://uxpatterns.dev/patterns/social/activity-feed): Learn how to implement activity feeds. Discover best practices for real-time updates, infinite scrolling, and engagement tracking. Skill: `activity-feed`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill activity-feed`. Reference: https://uxpatterns.dev/skills/activity-feed. Related: https://uxpatterns.dev/patterns/navigation/infinite-scroll, https://uxpatterns.dev/patterns/social/comment-system, https://uxpatterns.dev/patterns/user-feedback/notification. - [Comment System](https://uxpatterns.dev/patterns/social/comment-system): Learn how to implement comment systems. Discover best practices for threaded discussions, moderation, and user interactions. Skill: `comment-system`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill comment-system`. Reference: https://uxpatterns.dev/skills/comment-system. Related: https://uxpatterns.dev/patterns/forms/textarea, https://uxpatterns.dev/patterns/social/activity-feed, https://uxpatterns.dev/patterns/user-feedback/notification. - [Like Button](https://uxpatterns.dev/patterns/social/like-button): Learn how to implement like buttons and reactions. Discover best practices for engagement tracking, animations, and accessibility. Skill: `like-button`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill like-button`. Reference: https://uxpatterns.dev/skills/like-button. Related: https://uxpatterns.dev/patterns/ai-intelligence/response-feedback, https://uxpatterns.dev/patterns/forms/rating-input, https://uxpatterns.dev/patterns/user-feedback/notification. - [Share Dialog](https://uxpatterns.dev/patterns/social/share-dialog): Learn how to implement share dialogs. Discover best practices for social media integration, copy links, and sharing analytics. Skill: `share-dialog`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill share-dialog`. Reference: https://uxpatterns.dev/skills/share-dialog. Related: https://uxpatterns.dev/patterns/content-management/modal, https://uxpatterns.dev/patterns/social/like-button, https://uxpatterns.dev/patterns/user-feedback/notification. ### user-feedback - [Cookie Consent](https://uxpatterns.dev/patterns/user-feedback/cookie-consent): Implement effective cookie consent banners in your web applications. Learn best practices for GDPR compliance, user privacy, and consent management. Skill: `cookie-consent`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill cookie-consent`. Reference: https://uxpatterns.dev/skills/cookie-consent. Related: https://uxpatterns.dev/patterns/content-management/modal, https://uxpatterns.dev/patterns/forms/toggle, https://uxpatterns.dev/patterns/user-feedback/notification. - [Empty States](https://uxpatterns.dev/patterns/user-feedback/empty-states): Create effective empty state experiences in your web applications. Learn best practices for handling no-content scenarios with helpful messaging and clear actions. Skill: `empty-states`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill empty-states`. Reference: https://uxpatterns.dev/skills/empty-states. Related: https://uxpatterns.dev/patterns/data-display/filter-panel, https://uxpatterns.dev/patterns/user-feedback/loading-indicator, https://uxpatterns.dev/patterns/user-feedback/notification. - [Loading Indicator](https://uxpatterns.dev/patterns/user-feedback/loading-indicator): Build effective loading indicators for your web applications. Learn best practices for implementing loading states, spinners, and progress feedback with proper accessibility. Skill: `loading-indicator`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill loading-indicator`. Reference: https://uxpatterns.dev/skills/loading-indicator. Aliases: loader, loading, spinner. Related: https://uxpatterns.dev/patterns/user-feedback/notification, https://uxpatterns.dev/patterns/user-feedback/progress-indicator, https://uxpatterns.dev/patterns/user-feedback/skeleton. - [Notification](https://uxpatterns.dev/patterns/user-feedback/notification): Implement effective notification systems in your web applications. Learn best practices for toast messages, alerts, and user notifications with proper timing and accessibility. Skill: `notification`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill notification`. Reference: https://uxpatterns.dev/skills/notification. Aliases: toast. Related: https://uxpatterns.dev/patterns/content-management/modal, https://uxpatterns.dev/patterns/forms/form-validation, https://uxpatterns.dev/patterns/user-feedback/loading-indicator. - [Progress Indicator](https://uxpatterns.dev/patterns/user-feedback/progress-indicator): Create effective progress indicators for your web applications. Learn best practices for implementing progress bars, step indicators, and completion feedback with proper accessibility. Skill: `progress-indicator`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill progress-indicator`. Reference: https://uxpatterns.dev/skills/progress-indicator. Related: https://uxpatterns.dev/patterns/advanced/wizard, https://uxpatterns.dev/patterns/user-feedback/loading-indicator, https://uxpatterns.dev/patterns/user-feedback/skeleton. - [Skeleton](https://uxpatterns.dev/patterns/user-feedback/skeleton): Build effective skeleton loading states for your web applications. Learn best practices for implementing content placeholders and loading animations with proper accessibility. Skill: `skeleton`. Install: `npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill skeleton`. Reference: https://uxpatterns.dev/skills/skeleton. Related: https://uxpatterns.dev/patterns/data-display/card-grid, https://uxpatterns.dev/patterns/user-feedback/empty-states, https://uxpatterns.dev/patterns/user-feedback/loading-indicator.