Accessibility Compliance
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA…
Design & UI
Seth Hobson42k
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.
Install
Run this in your project folder. It works with Claude Code, Cursor, Codex and dozens of other agents.
$ npx skills add wshobson/agents --skill interaction-designNeeds Node.js. Add -g to install for every project, or -a claude-code to skip the agent picker.
How to use Interaction Design
Once it's installed, Claude reads this skill on its own whenever a request matches what it's for, so you don't have to mention it by name. In Claude Code you can also run it directly by typing /interaction-design.
It contains no scripts, only instructions and reference files, so it can't run code on its own.
What the instructions cover
- 1When to Use This Skill
- 2Core Principles
- 3Quick Start: Button Microinteraction
- 4Interaction Patterns
- 5CSS Animation Patterns
- 6Accessibility Considerations
- 7Best Practices
- 8Common Issues
Section headings from the skill's SKILL.md file.
What's inside · 4 files
- SKILL.md
- references/animation-libraries.md
- references/microinteraction-patterns.md
- references/scroll-animations.md
More from Seth Hobson
See all →AI Debt Detector
Use after generating code, after accepting AI suggestions, or when reviewing AI-written modules. Also use when code works but feels brittle, when error handling seems thin, when…
AI & AgentsSeth Hobson42k
Airflow Dag Patterns
Build production Apache Airflow DAGs with best practices for operators, sensors, testing, and deployment. Use when creating data pipelines, orchestrating workflows, or scheduling…
Data & DatabasesSeth Hobson42k
Angular Migration
Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning…
FrontendSeth Hobson42k
More Claude skills for design
See all →Frontend DesignTop pick
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't…
Design & UI
Anthropic187k
UI UX Pro MaxTop pick
UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design…
Design & UI
NextLevelBuilder145k
Taste SkillTop pick
tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals…
Design & UI
Leon110k
Impeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, simplify, harden, animate, or otherwise improve a frontend interface: websites, landing pages…
Design & UI
Paul Bakaus103k