thedaviddias/ux-patterns-for-developers
93 skills401 installs21.2k starsGitHub
Install
npx skills add https://github.com/thedaviddias/ux-patterns-for-developersSkills in this repo
1Ux Patternsux-patterns is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.32installs2Sidebarsidebar is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.13installs3Buttonbutton is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.11installs4Autocompleteautocomplete is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.10installs5Breadcrumbbreadcrumb is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.10installs6Dashboarddashboard is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.10installs7Notificationnotification is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.10installs8TableCovers designing accessible data tables for scanning, comparing, and acting on datasets. A developer uses it when presenting structured tabular data like user lists, inventory, or analytics.10installs9Tabstabs is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.10installs10Tooltiptooltip is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.10installs11LoginDescribes the login form pattern that authenticates returning users while balancing security and usability. A developer uses it for web apps, SaaS, e-commerce, or admin tools that gate features behind accounts.9installs12Modalmodal is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.9installs13Paginationpagination is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.9installs14Skeletonskeleton is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.9installs15Toggletoggle is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.9installs16Accordionaccordion is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.8installs17Chartchart is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.8installs18Linklink is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.8installs19Wizardwizard is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.8installs20Calendarcalendar is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.7installs21Checkboxcheckbox is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.7installs22CheckoutDescribes the checkout flow pattern for guiding shoppers from cart to confirmed payment for physical goods, digital, and guest or returning buyers. A developer uses it when implementing a multi-step checkout process.7installs23Megamenumegamenu is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.7installs24Passwordpassword is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.7installs25SignupCovers designing a low-friction account registration flow with validation and alternative registration methods. A developer uses it when building new-user account creation for an app or service.7installs26Statisticsstatistics is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.7installs27Textareatextarea is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.7installs28Timelinetimeline is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.7installs29Ai Chatai-chat is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.6installs30Carouselcarousel is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.6installs31Hambuger Menuhambuger-menu is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.6installs32Popoverpopover is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.6installs33Radioradio is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.6installs34Sliderslider is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.6installs35Two FactorCovers designing 2FA enrollment and login verification UX for a second authentication factor. A developer uses it when protecting accounts with an added verification layer beyond a password.5installs36Ai Error Statesai-error-states is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.3installs37Ai Loading Statesai-loading-states is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.3installs38Ai Suggestionsai-suggestions is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.3installs39Back To Topback-to-top is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.3installs40Context Windowcontext-window is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.3installs41Drag And Dropdrag-and-drop is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.3installs42Token Countertoken-counter is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.3installs43Code ConfirmationDescribes the code confirmation (OTP) input pattern with a segmented per-character layout for entering short verification codes. A developer uses it when implementing 2FA, email verification, or password-reset code entry.2installs44Color PickerDescribes the color picker pattern for selecting a color value through visual interaction across native, swatch, text, and spectrum implementations. A developer uses it for theme customization, design tools, or product color configuration.2installs45Command PaletteDescribes the command palette pattern for running commands, navigation, and recent items from one keyboard-first surface. A developer uses it when adding power-user shortcuts to editor or workspace commands.2installs46Comment SystemDescribes the comment system pattern for threaded discussion around content while keeping moderation and authorship visible. A developer uses it when implementing article, team-review, or community comment threads.2installs47Comparison TableDescribes the comparison table pattern for lining up options side by side to evaluate feature, price, or policy differences. A developer uses it for plan comparison, tool evaluation, or product selection.2installs48Cookie ConsentDescribes the cookie consent pattern for explaining optional tracking clearly and capturing a revisable choice. A developer uses it on sites with analytics or marketing cookies or regional consent requirements.2installs49Currency InputDescribes the currency input pattern for entering monetary values with live formatting, locale symbol placement, and financial validation. A developer uses it in checkout, banking, expense, or pricing forms.2installs50Date InputDescribes the date input pattern for direct keyboard entry of known dates using native or masked segmented fields. A developer uses it for birth dates, expiry dates, or high-frequency date entry where a calendar is unnecessary.2installs51Date RangeDescribes the date range pattern for selecting a start and end date with range visualization and validation. A developer uses it for travel booking, reporting periods, or leave requests.2installs52Expandable TextDescribes the expandable text pattern for showing or hiding additional text on demand to improve readability. A developer uses it for long descriptions, article previews, or progressive disclosure of secondary details.2installs53Filter PanelDescribes the filter panel pattern for narrowing a large collection without losing track of active constraints. A developer uses it for search and catalog refinement, analytics scoping, or table narrowing.2installs54Image GalleryDescribes the image gallery pattern for browsing several related images while keeping orientation, context, and performance. A developer uses it for portfolio pages, product image collections, or documentation walkthroughs.2installs55Image UploadDescribes the image upload pattern for selecting, previewing, validating, and replacing images. A developer uses it for profile or avatar uploads, listing management, or documenting work with screenshots.2installs56List ViewDescribes the list view pattern for presenting items in a linear format that favors readability and scanning of a few attributes. A developer uses it for activity and inbox lists, admin records, or mobile-first browsing.2installs57Multi Select InputProvides implementation, accessibility, and performance guidance for a tag/chip-based multi-select form control over a known list of options. A developer uses it when a form needs users to select multiple items such as tags, roles, filters, or recipients.2installs58Password ResetCovers the multi-step password reset UX plus security guardrails like non-enumerating responses, token expiry, and rate limiting. A developer uses it when implementing account recovery for password-based login.2installs59Product CardCovers designing product display cards for category, search, and recommendation listings with clear trust signals and accessibility. A developer uses it when building product grids or shelves in an online store.2installs60Rating InputCovers designing an accessible rating control for reviews and satisfaction surveys. A developer uses it when collecting a quick graded score such as product or service reviews.2installs61Signature PadCovers designing an accessible signature capture surface for consent, delivery, and document signing. A developer uses it when a flow needs a handwritten or consent signature.2installs62Social LoginCovers designing OAuth/OpenID social sign-in to cut registration friction and obtain verified profile data. A developer uses it when adding third-party identity provider login to an app.2installs63Time InputCovers designing an accessible structured time-entry control for scheduling and booking. A developer uses it when collecting a time value such as availability or reminders.2installs64User ProfileCovers designing profile UIs that serve as identity card and self-management tool with privacy controls. A developer uses it when displaying or editing user identity and personal information.2installs65Account SettingsDescribes the account settings pattern as the control center where users manage security, notifications, privacy, and personal data. A developer uses it when implementing account configuration and preference screens.1installs66Activity FeedDescribes the activity feed pattern for surfacing recent actions in a chronological stream for project, team, or community updates. A developer uses it when implementing an updates or changelog-style feed.1installs67Card GridDescribes the card grid pattern for displaying many items in a browseable responsive layout without losing key metadata. A developer uses it when building content libraries, catalogs, or dashboard boards.1installs68Date PickerDescribes the date picker pattern combining a text input with a calendar overlay for context-aware date selection. A developer uses it for appointment scheduling, delivery dates, or booking flows.1installs69Empty StatesDescribes the empty states pattern for converting a blank or zero-result view into a helpful next step instead of a dead end. A developer uses it for first-use screens, zero-match searches, or cleared queues.1installs70File InputDescribes the file input pattern for selecting and uploading one or more files, from native controls to drag-and-drop drop zones. A developer uses it for avatar upload, document submission, media uploads, or bulk import.1installs71Form ValidationDescribes the form validation pattern for delivering field-level and form-level feedback with both client and server rules. A developer uses it for account creation, checkout, and workflow forms.1installs72Infinite ScrollDescribes the infinite scroll pattern for automatically loading more content as users scroll, avoiding manual pagination. A developer uses it for social feeds, news, e-commerce listings, or media galleries.1installs73Kanban BoardDescribes the Kanban board pattern for showing work moving through stages in columns and swimlanes. A developer uses it for task and issue tracking, content production, or service-delivery queues.1installs74Like ButtonDescribes the like button pattern for capturing a lightweight reaction while showing state, count, and an undo path. A developer uses it for social or content reactions and lightweight endorsements.1installs75Loading IndicatorDescribes the loading indicator pattern for showing work is in progress without overstating certainty about duration. A developer uses it for button submissions, panel data fetching, and background sync or uploads.1installs76Load MoreDescribes the load more pattern for fetching additional content on user demand instead of loading everything upfront. A developer uses it for news feeds and product listings where users want explicit control over paging.1installs77Model SelectorDescribes the model selector pattern for helping users pick the right AI model or capability tier without provider jargon. A developer uses it for multi-model workbenches, speed-versus-quality tradeoffs, or feature-gated AI interfaces.1installs78Navigation MenuCovers structuring a primary horizontal or vertical navigation menu with semantic HTML, keyboard support, and sticky/performance guardrails. A developer uses it when adding persistent top-level navigation to a multi-page website or app.1installs79Phone NumberCovers building a phone-number form field with accessible labels, sensible validation timing, and international/autofill handling. A developer uses it on contact, MFA setup, or profile forms that collect phone numbers.1installs80Progress IndicatorCovers when and how to show progress for uploads, multi-step flows, and background jobs with accessible status updates. A developer uses it when an operation has measurable completion worth surfacing to users.1installs81Prompt InputCovers designing a chat/AI prompt composer that collects structured prompts, instructions, and attachments cleanly. A developer uses it when building the input surface for a chat assistant or AI workbench.1installs82Response FeedbackCovers collecting structured quality feedback on AI-generated responses while preserving surrounding context. A developer uses it when adding rating or regeneration controls to AI chat or copilot output.1installs83Rich Text EditorCovers designing a formatted-text editing surface for authoring long-form or knowledge-base content. A developer uses it when users need to write and format text beyond a plain input.1installs84Search FieldCovers designing an accessible search input for site-wide search, list filtering, or command lookup. A developer uses it when adding a query input for retrieving content or objects.1installs85Search ResultsCovers displaying and filtering search results for docs, catalogs, and admin search with good recovery paths. A developer uses it when building the results view for a search experience.1installs86Selection InputCovers designing an accessible single-select dropdown for short predefined option lists. A developer uses it when a form needs one choice from roughly 10-15 known options in limited space.1installs87Share DialogCovers designing a sharing surface for links, native mobile share, and referral flows. A developer uses it when adding social or link sharing to a page or app.1installs88Shopping CartCovers designing cart review, quantity/variant editing, and persistence across sessions with clear price and policy display. A developer uses it when building the cart step before checkout in an online store.1installs89Streaming ResponseCovers designing progressive streaming of AI responses so long output becomes readable as it arrives. A developer uses it when building chat or assistant output that unfolds over time.1installs90Tag InputCovers designing an accessible tag entry control for labels, keywords, and recipients. A developer uses it when users need to add multiple short values inline.1installs91Text FieldCovers designing the fundamental text input used across forms, search, auth, and messaging. A developer uses it whenever users must enter freeform text.1installs92Tree ViewCovers designing an accessible hierarchical tree for nested data navigation and selection. A developer uses it when presenting file/folder structures, categories, or nested permissions.1installs93Video PlayerCovers designing accessible video playback with controls and buffering handling for tutorials, marketing, and walkthroughs. A developer uses it when embedding video that needs custom playback controls.1installs