ui-design-patterns_skill

Overview

This skill provides a concise, practical guide to common UI design patterns, navigation and form patterns, data display techniques, feedback patterns, and accessibility considerations for web and mobile apps. It distills proven components and interaction models into actionable advice for designers and engineers. Use it to standardize interfaces, improve usability, and accelerate implementation of consistent design systems.

How this skill works

The skill categorizes patterns by purpose (navigation, forms, data display, feedback, accessibility) and describes when to use each, anatomy, best practices, and accessibility rules. It highlights implementation-ready details such as ARIA usage, keyboard behavior, validation timing, and state management to help you build robust, accessible components. Examples and pattern variants guide choices for responsive and scalable UI systems.

When to use it

• Design or review user interfaces to improve consistency and usability
• Build reusable components for a design system or component library
• Structure navigation for complex information architectures
• Design and validate forms, multi-step flows, and inline editing
• Display tables, lists, and dashboards with sorting, filtering, and pagination

Best practices

• Favor familiar patterns that match user expectations to reduce learning cost
• Prioritize accessibility: semantic HTML, ARIA roles, keyboard support, and clear focus management
• Design mobile-first: single-column layouts and responsive navigation alternatives
• Provide clear, actionable feedback for errors, success, and loading states
• Preserve user state (form inputs, tab selection, scroll position) across navigation
• Document usage guidelines and code examples in your design system

Example use cases

• Implement tabbed product views with ARIA roles and keyboard navigation
• Create a multi-step checkout flow with progress indicators and save-draft support
• Build an accessible accordion FAQ section with aria-expanded and keyboard control
• Design a data table with sorting, filtering, row selection, and pagination
• Add inline editing to a profile page with clear edit/save/cancel states and validation