skills.rest
prapanch
prapanchCOMMUNITY
Explore all skills by this author →
GitHub

ux-patterns

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
One-click install
npx skills add https://github.com/prapanch/agent-forma --skill ux-patterns-prapanch
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
apexradiusapexradius

design-system

Generate CSS custom properties and a component library from a brand name.

Official
Intermediate
0xharryriddle0xharryriddle
3

web-design-guidelines

Evaluates UI code against Web Interface Guidelines for accessibility and UX issues.

Community
Intermediate
1479089714790897
7

kwp-design-design-system

Audit component libraries for naming inconsistencies and missing documentation.

Community
Intermediate
slgoodrichslgoodrich
121

usability-frameworks

Plan and evaluate usability testing for user interfaces using Nielsen's heuristics.

Community
Basic