ui-design-patterns

Name: ui-design-patterns
Availability: InStock
Author: andrej1601

Implement reusable UI design patterns with semantic HTML and ARIA roles.

Updated Aug 27, 2025

Search Tags:#accessibility #design-patterns #ui-components #ui-patterns #pattern-documentation #design-systems

Ready to run

npx skills add https://github.com/Andrej1601/HTMLSignage --skill ui-design-patterns-andrej1601

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-design-patterns
Source: https://github.com/Andrej1601/HTMLSignage/tree/main/.agents/skills/ui-design-patterns
Command: npx skills add https://github.com/Andrej1601/HTMLSignage --skill ui-design-patterns-andrej1601

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Centralize and standardize UI patterns to speed up development, improve consistency, and enhance accessibility across web and mobile interfaces.

Core Features & Use Cases

Catalog of navigation, form, data display, feedback, and interaction patterns with accessibility guidance.
Production-ready EXAMPLES.md with complete HTML/CSS/JS samples for multiple patterns.
Design-system integration guidance including tokens, naming conventions, and accessibility best practices.

Quick Start

Review the pattern catalog and implement accessible UI components using the provided examples.

Frequently Asked Questions about ui-design-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What are UI design patterns and how do they improve web accessibility?▼

UI design patterns are reusable solutions for common interface challenges like navigation and forms. They improve accessibility by prescribing semantic HTML, ARIA roles, and keyboard navigation to ensure consistent, screen-reader friendly experiences.

How do I implement accessible navigation and form patterns for mobile and web?▼

Implement accessible navigation and form patterns by applying semantic HTML structures, ARIA roles, and keyboard navigation guidelines. Use the provided production-ready HTML, CSS, and JS samples to ensure responsive layouts across web and mobile contexts.

Can I integrate these UI components into an existing design system?▼

Yes, you can integrate these UI components into an existing design system. The guidance includes design tokens, naming conventions, and accessibility best practices to help standardize components within your current architecture.

What is the best way to document UI patterns for development teams?▼

The best way to document UI patterns is to use a centralized catalog covering navigation, forms, and feedback scenarios. Include production-ready HTML/CSS/JS samples and testing checklists to ensure consistent implementation.

Does this UI pattern catalog include examples for data display and feedback interactions?▼

Yes, the catalog includes specific patterns for data display, feedback, and interaction scenarios. Each pattern comes with accessibility guidance and complete HTML/CSS/JS samples to accelerate development.

Why do I need ARIA roles and semantic HTML for design pattern implementation?▼

You need ARIA roles and semantic HTML for design pattern implementation to ensure screen reader compatibility and proper keyboard navigation. These accessibility practices guarantee that reusable components remain usable across all platforms.