interaction-patterns-components

Critique UI interaction patterns and reusable components for clarity, accessibility, and consistency.

3|1|Updated Apr 30, 2026
One-click install
npx skills add https://github.com/hueyexe/frontend-agent-skills --skill interaction-patterns-components
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: interaction-patterns-components
Source: https://github.com/hueyexe/frontend-agent-skills/tree/main/interaction-patterns-components
Command: npx skills add https://github.com/hueyexe/frontend-agent-skills --skill interaction-patterns-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Interaction Patterns Components helps agents critique and design reusable UI interaction patterns and components to improve clarity, consistency, and accessibility across products.

Core Features & Use Cases

  • Critique, redesign, or UX review of app screens, patterns, and components such as navigation, menus, dashboards, modals, flows, states, and component behavior.
  • Guidance on selecting reusable components and designing system-wide interaction behavior, accessibility, and responsive patterns.
  • Frontend guidance for interaction behavior, APIs, and task-based pattern recommendations across web, mobile, SaaS, or design-system contexts.

Quick Start

Ask for a focused UX critique or design recommendation for a given screen or component, including the user task, context, and constraints.

Frequently Asked Questions about interaction-patterns-components

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

FAQPage Schema
How do I critique UI interaction patterns for accessibility and consistency?

To critique UI interaction patterns, evaluate component defaults, states, accessibility, and responsive behavior. Assessing navigation, modals, and tables against design tokens ensures system-wide consistency and clarity across web, mobile, or SaaS products.

What is the best way to design reusable components for a design system?

Design reusable components by defining consistent interaction behaviors, accessible states, and responsive rules. Aligning elements like cards and tables with design system tokens provides concrete frontend guidance and ensures pattern reuse across different platforms.

Can I get UX design recommendations for dashboard and mobile flows?

Yes, you can get UX design recommendations for dashboard and mobile flows by evaluating task-based interaction patterns. Providing the user task, context, and constraints yields concrete guidance on component behavior, states, and navigation for those specific environments.

Does this approach work for evaluating frontend implementation behavior?

Yes, this approach works for evaluating frontend implementation behavior by providing guidance on interaction APIs and component states. It assesses how patterns like modals and navigation behave in web, mobile, or SaaS contexts to improve clarity and accessibility.

How do I review UI states and defaults for pattern reuse?

Review UI states and defaults for pattern reuse by evaluating component behavior against design tokens and accessibility standards. Analyzing how navigation, cards, and modals handle various states ensures consistent interaction and clarity across a design system.