Ui Design Patterns
This is a reference guide for implementing common UI patterns like tabs, accordions, breadcrumbs, and navigation menus with proper accessibility baked in. It covers the anatomy of each pattern, when to use it, and includes actual HTML examples with ARIA attributes. The accessibility guidance is solid, showing you the specific roles and keyboard interactions each pattern needs. It follows atomic design methodology and treats design systems as component libraries with tokens and guidelines. Useful when you're building from scratch or auditing existing interfaces, though you'll want to adapt the examples to your specific framework rather than copying them directly.
- skills.sh installs
- 854
- GitHub stars
- 63
- last updated
- Aug 21, 2026
Install
$ npx -y skills add manutej/luxor-claude-marketplace --skill ui-design-patterns --agent claude-codeInstalls into .claude/skills of the current project.
Files
UI Design Patterns
A comprehensive guide to common user interface design patterns, component patterns, interaction patterns, and accessibility best practices for building modern web and mobile applications.
When to Use This Skill
Use this skill when you need to:
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/manutej/luxor-claude-marketplace
- Categories
- Frontend Development, Design & UI/UX
- First seen
- May 16, 2026
More from manutej/luxor-claude-marketplace
All 66- Ux Principles838
- Frontend Architecture728
- Axum Web Framework659
- Alembic645
- Oauth2 Authentication603
- Aws Cloud Architecture595
- Fastapi Microservices Development590
- Wireframing568
- Expressjs Development562
- Mobile Design553
- Figma Design544
- Ci Cd Pipeline Patterns538
- Spring Boot Development536
- Enterprise Architecture Patterns530
- Rest Api Design Patterns527
- Responsive Design513
- Vuejs Development511
- Grpc Microservices510
- Hasura Graphql Engine506
- Asyncio Concurrency Patterns491
- Redis State Management490
- Rust Systems Programming488
- Api Gateway Patterns482
- Kafka Stream Processing482
Recommended
More Frontend Development
wot-ui-cliwot-ui/open-wot使用、调试或维护 @wot-ui/cli 与 open-wot 仓库。适用于 wot CLI 命令、Agent/MCP 接入、doctor/usage/lint、组件知识查询、客户端 adapter、离线数据提取、构建测试、发布包检查和仓库开发；如果任务是直接编写 wd-* 组件页面或解释组件 API，应改用 wot-852skills.sh installs
react-pdfmolefrog/skillsGenerate PDF documents using React-PDF library (@react-pdf/renderer). Use when creating PDFs, generating documents, reports, invoices, forms, or when user menti761skills.sh installs
