docs: improve list patterns readme

Author: thedaviddias

README.md

@@ -33,69 +33,230 @@
 > This project is a work in progress. New content and updates should be expected regularly.
 
 <!-- PATTERNS-LIST:START - Do not remove or modify this section -->
-
 This is an updated list of available and incoming patterns.
 
 ### Content Management
 
-- [Accordion](https://uxpatterns.dev/patterns/content-management/accordion)
-- [Carousel](https://uxpatterns.dev/patterns/content-management/carousel)
-- Drag And Drop (coming soon)
-- [Expandable Text](https://uxpatterns.dev/patterns/content-management/expandable-text)
-- [Modal](https://uxpatterns.dev/patterns/content-management/modal)
-- [Popover](https://uxpatterns.dev/patterns/content-management/popover)
-- [Tooltip](https://uxpatterns.dev/patterns/content-management/tooltip)
+#### [Accordion](https://uxpatterns.dev/patterns/content-management/accordion)
+> Expand and collapse content sections
+
+<sub>🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready</sub>
+
+Create effective accordion components for your web applications. Learn best practices for implementing expandable content sections with proper accessibility and keyboard support.
+
+#### [Carousel](https://uxpatterns.dev/patterns/content-management/carousel)
+> Display multiple items in a rotating view
+
+<sub>🛠️ Complex implementation • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples</sub>
+
+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
+> Coming soon
+
+#### [Expandable Text](https://uxpatterns.dev/patterns/content-management/expandable-text)
+> Show or hide additional text content on demand
+
+<sub>⚡️ Simple implementation • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples</sub>
+
+Learn how to implement expandable text components in your web applications. Discover best practices for progressive disclosure, accessibility, and user experience with practical examples.
+
+#### [Modal](https://uxpatterns.dev/patterns/content-management/modal)
+> Display focused content or actions
+
+<sub>🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples</sub>
+
+Create effective modal dialogs for your web applications. Learn best practices for implementing accessible modal windows with proper focus management and keyboard interactions.
+
+#### [Popover](https://uxpatterns.dev/patterns/content-management/popover)
+> Display focused content or actions
+
+<sub>🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples</sub>
+
+Implement user-friendly popover components in your web applications. Learn best practices for contextual information display, positioning, and accessibility with practical examples.
+
+#### [Tooltip](https://uxpatterns.dev/patterns/content-management/tooltip)
+> Provide additional context on hover or focus
+
+<sub>⚡️ Simple implementation • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples</sub>
+
+Implement effective tooltip components in your web applications. Learn best practices for contextual help, positioning strategies, and accessibility considerations.
+
 
 ### Forms
 
-- [Autocomplete](https://uxpatterns.dev/patterns/forms/autocomplete)
-- [Button](https://uxpatterns.dev/patterns/forms/button)
-- Checkbox (coming soon)
-- Code Confirmation (coming soon)
-- Color Picker (coming soon)
-- Currency Input (coming soon)
-- Date Input (coming soon)
-- Date Picker (coming soon)
-- Date Range (coming soon)
-- File Input (coming soon)
-- Form Validation (coming soon)
-- Input Selection Guide (coming soon)
-- Multi Select Input (coming soon)
-- [Password](https://uxpatterns.dev/patterns/forms/password)
-- Phone Number (coming soon)
-- Radio (coming soon)
-- Rating Input (coming soon)
-- Rich Text Editor (coming soon)
-- Search Field (coming soon)
-- [Selection Input](https://uxpatterns.dev/patterns/forms/selection-input)
-- Signature Pad (coming soon)
-- Slider (coming soon)
-- Tag Input (coming soon)
-- [Text Field](https://uxpatterns.dev/patterns/forms/text-field)
-- Time Input (coming soon)
-- Toggle (coming soon)
+#### [Autocomplete](https://uxpatterns.dev/patterns/forms/autocomplete)
+> Suggest options as users type
+
+<sub>🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1 • 💻 Examples</sub>
+
+Implement user-friendly autocomplete functionality in your web applications. Learn best practices for search suggestions, keyboard navigation, and accessibility with practical examples.
+
+#### [Button](https://uxpatterns.dev/patterns/forms/button)
+> Trigger actions and submit forms
+
+<sub>⚡️ Simple implementation • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples</sub>
+
+Learn how to implement accessible and user-friendly buttons in your web applications. Discover best practices for button design, states, accessibility, and implementation with code examples and guidelines.
+
+#### Checkbox
+> Coming soon
+
+#### Code Confirmation
+> Coming soon
+
+#### Color Picker
+> Coming soon
+
+#### Currency Input
+> Coming soon
+
+#### Date Input
+> Coming soon
+
+#### Date Picker
+> Coming soon
+
+#### Date Range
+> Coming soon
+
+#### File Input
+> Coming soon
+
+#### Form Validation
+> Coming soon
+
+#### Input Selection Guide
+> Coming soon
+
+#### Multi Select Input
+> Coming soon
+
+#### [Password](https://uxpatterns.dev/patterns/forms/password)
+> Secure password entry with feedback
+
+<sub>🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1</sub>
+
+Implement secure and user-friendly password fields in your web applications. Learn best practices for password validation, strength indicators, and accessibility with practical examples.
+
+#### Phone Number
+> Coming soon
+
+#### Radio
+> Coming soon
+
+#### Rating Input
+> Coming soon
+
+#### Rich Text Editor
+> Coming soon
+
+#### Search Field
+> Coming soon
+
+#### [Selection Input](https://uxpatterns.dev/patterns/forms/selection-input)
+> Choose from predefined options
+
+<sub>📚 Full guide • ♿️ WCAG 2.1 • 💻 Examples</sub>
+
+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
+> Coming soon
+
+#### Slider
+> Coming soon
+
+#### Tag Input
+> Coming soon
+
+#### [Text Field](https://uxpatterns.dev/patterns/forms/text-field)
+> Enter and edit text content
+
+<sub>⚡️ Simple implementation • 📚 Full guide • 📱 Mobile-ready • 💻 Examples</sub>
+
+Learn how to implement accessible text input fields in your web applications. Discover best practices for validation, error handling, and user experience with practical examples.
+
+#### Time Input
+> Coming soon
+
+#### Toggle
+> Coming soon
+
 
 ### Navigation
 
-- [Back To Top](https://uxpatterns.dev/patterns/navigation/back-to-top)
-- [Breadcrumb](https://uxpatterns.dev/patterns/navigation/breadcrumb)
-- Hambuger Menu (coming soon)
-- [Infinite Scroll](https://uxpatterns.dev/patterns/navigation/infinite-scroll)
-- [Load More](https://uxpatterns.dev/patterns/navigation/load-more)
-- Megamenu (coming soon)
-- Navigation Menu (coming soon)
-- [Pagination](https://uxpatterns.dev/patterns/navigation/pagination)
-- Sidebar (coming soon)
-- Tabs (coming soon)
+#### [Back To Top](https://uxpatterns.dev/patterns/navigation/back-to-top)
+> Quickly navigate back to the top of the page
+
+<sub>⚡️ Simple implementation • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples</sub>
+
+Learn how to implement a Back to Top button pattern to enhance user navigation on long pages. Discover best practices for placement, accessibility, and user experience with code examples and implementation guidelines.
+
+#### [Breadcrumb](https://uxpatterns.dev/patterns/navigation/breadcrumb)
+> Help users understand their current location
+
+<sub>🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples</sub>
+
+Create effective breadcrumb navigation for better site orientation. Learn implementation techniques, accessibility requirements, and design best practices for clear hierarchical navigation.
+
+#### Hambuger Menu
+> Coming soon
+
+#### [Infinite Scroll](https://uxpatterns.dev/patterns/navigation/infinite-scroll)
+> Loads additional content automatically as users scroll down.
+
+<sub>🛠️ Complex implementation • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready</sub>
+
+Implement infinite scroll for seamless content loading in your web applications. Learn best practices for performance, accessibility, and user experience with practical code examples.
+
+#### [Load More](https://uxpatterns.dev/patterns/navigation/load-more)
+> Load additional content on user demand
+
+<sub>🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready</sub>
+
+Learn how to implement a Load More pattern for efficient content pagination. Discover best practices for user experience, accessibility, and performance when loading content incrementally.
+
+#### Megamenu
+> Coming soon
+
+#### Navigation Menu
+> Coming soon
+
+#### [Pagination](https://uxpatterns.dev/patterns/navigation/pagination)
+> Navigate through multiple pages of content
+
+<sub>🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples</sub>
+
+Master pagination implementation in web applications. Learn best practices for building accessible, user-friendly page navigation with clear guidelines for design, accessibility, and performance.
+
+#### Sidebar
+> Coming soon
+
+#### Tabs
+> Coming soon
+
 
 ### User Feedback
 
-- Cookie Consent (coming soon)
-- Empty States (coming soon)
-- Loading Indicator (coming soon)
-- Notification (coming soon)
-- Progress Indicator (coming soon)
-- Skeleton (coming soon)
+#### Cookie Consent
+> Coming soon
+
+#### Empty States
+> Coming soon
+
+#### Loading Indicator
+> Coming soon
+
+#### Notification
+> Coming soon
+
+#### Progress Indicator
+> Coming soon
+
+#### Skeleton
+> Coming soon
+
 <!-- PATTERNS-LIST:END -->
 
 ## Getting Started

package.json

@@ -35,6 +35,7 @@
     "@sentry/nextjs": "^8.54.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "gray-matter": "^4.0.3",
     "lucide-react": "^0.474.0",
     "markdown-to-jsx": "^7.7.3",
     "next": "^15.1.6",