ui-design-patterns

Codify practical UI design patterns into actionable guidelines for web interfaces.

33|6|Updated Jan 2, 2026

Search Tags:#typography #accessibility #layout #UI/UX #color #design-patterns #design-systems

Ready to run

npx skills add https://github.com/dirnbauer/webconsulting-skills --skill ui-design-patterns-dirnbauer

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle with inconsistent interfaces and unclear guidelines. This Skill provides a curated set of practical UI design patterns inspired by Refactoring UI and Practical UI to help developers deliver polished, accessible interfaces quickly.

Core Features & Use Cases

Pattern Library: reusable guidelines for layout, typography, spacing, color, and accessibility.
Quick Reference: prioritized decisions for common screens (landing pages, forms, dashboards).
Collaboration Aid: aligns product, design, and engineering teams on UI decisions.

Use Cases:

When building a TYPO3 frontend, apply patterns to ensure consistency across pages.
When auditing an interface for accessibility, apply color contrast and semantic structure recommendations.

Quick Start

Apply the ui-design-patterns skill to a provided mockup and return a prioritized UI pattern guide with layout, typography, spacing, and color recommendations.

Frequently Asked Questions about ui-design-patterns

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

FAQPage Schema

How do I apply UI design patterns to fix inconsistent web interfaces?▼

UI design patterns solve inconsistent interfaces by codifying practical guidelines for layout, typography, spacing, and color into actionable rules. You apply these reusable patterns to web components and responsive layouts to ensure visual consistency across pages.

What UI patterns should I use for accessible color contrast and semantic structure?▼

For accessible color contrast and semantic structure, use UI patterns that enforce WCAG-compliant color contrast ratios and clear hierarchical layouts. These design patterns provide prioritized recommendations to audit and improve frontend accessibility without requiring code dependencies.

How do I create a scalable design system for frontend web components?▼

Create a scalable design system by establishing a curated library of UI design patterns for layout, typography, and color. This approach aligns product, design, and engineering teams on prioritized UI decisions, ensuring consistent component creation across web interfaces.

Can I use these UI design patterns for TYPO3 frontend development?▼

Yes, you can use these UI design patterns for TYPO3 frontend development. The patterns support TYPO3 frontend work by providing actionable guidelines for layout, typography, and spacing to ensure interface consistency across pages without requiring external code dependencies.

What is the best way to audit a mockup for UI design consistency?▼

The best way to audit a mockup for UI design consistency is to apply a curated UI design pattern guide. This provides a prioritized reference for layout, typography, spacing, and color, helping teams align on UI decisions and identify inconsistencies quickly.

Do I need external libraries or dependencies to implement these UI design patterns?▼

No, you do not need external libraries or dependencies to implement these UI design patterns. The approach provides a standalone, scalable design system framework with quick-start guidance and best practice references, operating independently of code dependencies.