ux-patterns

Name: ux-patterns
Availability: InStock
Author: prapanch

Organize UX patterns and anti-patterns by surface type with YAML frontmatter.

Updated Aug 27, 2026

Search Tags:#navigation #usability #forms #modals #design-patterns #ui-patterns #ux-patterns

Ready to run

npx skills add https://github.com/prapanch/agent-forma --skill ux-patterns-prapanch

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ux-patterns
Source: https://github.com/prapanch/agent-forma/tree/main/ux-patterns
Command: npx skills add https://github.com/prapanch/agent-forma --skill ux-patterns-prapanch

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This entry catalogs common UX patterns and anti-patterns by surface type to help teams craft consistent, user-friendly interfaces and avoid guidance gaps.

Core Features & Use Cases

Pattern libraries organized by surfaces (navigation, forms, data tables, modals, loading states, and notifications) to guide design decisions.
Clear distinctions between patterns that work and anti-patterns to reduce usability risks early in product development.
Implementation notes and practical examples to translate guidance into concrete UI decisions across projects.

Quick Start

Review the ux-patterns guidance when starting a new interface to select appropriate surface-specific patterns and avoid common anti-patterns.

Frequently Asked Questions about ux-patterns

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

FAQPage Schema

What are common UX anti-patterns to avoid during UI design?▼

Common UX anti-patterns include misusing modals, building complex navigation structures, and designing inefficient loading states. Organizing UX patterns by surface type helps identify these anti-patterns early to reduce usability risks and prevent design mistakes in product development.

How do I choose the right UX patterns for forms and data tables?▼

To select UX patterns for forms and data tables, review surface-specific pattern libraries that provide clear distinctions between effective designs and anti-patterns. Implementation notes and practical examples help translate this guidance into concrete UI decisions across your projects.

Can I use these UX design patterns for frontend implementation and component library development?▼

Yes, these UX design patterns are applicable during frontend implementation and component library development. They provide implementation notes and practical examples to guide concrete UI decisions across navigation, forms, data tables, modals, and loading states.

When do I need to review UX patterns for navigation and modals?▼

You need to review UX patterns for navigation and modals when starting a new interface design. Selecting appropriate surface-specific patterns early helps avoid common anti-patterns and prevents guidance gaps during UI design reviews.

What is the best way to organize UX patterns to prevent design mistakes?▼

The best way to organize UX patterns to prevent design mistakes is by cataloging them according to surface type. Grouping patterns for navigation, forms, data tables, modals, and loading states helps teams craft consistent, user-friendly interfaces and avoid guidance gaps.