skills.rest
Andrej1601
Andrej1601COMMUNITY
Explore all skills by this author →
GitHub

ui-design-patterns

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
One-click install
npx skills add https://github.com/Andrej1601/HTMLSignage --skill ui-design-patterns-andrej1601
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
massCodeIOmassCodeIO
6.9k

ui-foundations

Enforce massCode UI foundations for typography, renderer styling, and TailwindCSS v4 tokens.

Official
Intermediate
SPeeDoA1SPeeDoA1
6

accessibility-check

Audit web applications for WCAG compliance and generate remediation checklists.

Community
Basic
Dev-Dennis-040Dev-Dennis-040
10

design-ux-architect

Define a CSS design system and layout framework for frontend projects.

Community
Advanced
89jobrien89jobrien
4

web-accessibility

Audit web content for WCAG 2.1/2.2 conformance and accessibility issues.

Community
Advanced