How does this skill help with frontend development?

It provides specific implementation steps for navigation, input forms, and content display, ensuring your code follows established usability principles and user expectations.

Is this skill compatible with modern design systems?

Absolutely. It is designed to complement systems like Material Design, Ant Design, and Bootstrap by providing the underlying interaction logic for their components.

Can this skill identify bad design choices?

Yes, it includes a list of anti-patterns, such as misusing modal dialogs or applying desktop-specific hover states to mobile interfaces, to help you avoid common UX pitfalls.

What are interaction design patterns?

Interaction design patterns are documented, reusable solutions to common interface problems, providing a shared vocabulary and proven logic for developers and designers.

Interaction Design Patterns

Name: Interaction Design Patterns
Author: lev-os

bylev-os

0•

Design Tools

Implements proven UI/UX solutions and standardized interaction models to create intuitive, consistent user experiences across platforms.

This skill equips Claude with a comprehensive library of documented interaction design patterns, ranging from navigation and data entry to feedback and content display. It enables developers and designers to solve recurring interface problems using industry-standard methodologies, such as Tidwell’s pattern language and Nielsen’s heuristics. By providing structured guidance on applying the right patterns—and identifying common anti-patterns—this skill ensures that your application remains user-friendly, accessible, and aligned with established design systems and platform conventions.

Key Features

01Anti-pattern detection to prevent common UX mistakes like reinventing standard wheels or ignoring platform conventions

02Standardized navigation pattern implementation including Hub and Spoke, Breadcrumbs, and Modal Panels

03Comprehensive system feedback strategies for progress states, success confirmations, and empty states

04Content structure guidance using Cards, Grids, and Accordion layouts for optimal information hierarchy

05Advanced input and form design optimization using Smart Defaults, Autocomplete, and Forgiving Formats

060 GitHub stars

Use Cases

01Developing a robust design system or component library based on reusable interaction patterns

02Refining data-heavy forms to reduce user friction and improve completion rates

03Architecting the navigation and layout for a complex SaaS dashboard or analytics platform

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lev-os/agents interaction-design-patterns

For use in Claude.ai and ChatGPT

Download Skill