Interaction Design Systems Generator
Document interaction patterns, state machines, and accessibility specs for design systems
What You Can Do
You create comprehensive interaction specifications for design system components and complex features. Claude generates detailed state machines, transition logic, accessibility requirements, keyboard navigation patterns, and edge case handling—all structured for developer implementation. This bridges the gap between design intent and code, ensuring interaction consistency across scalable interfaces.
Features
Map all possible states, transitions, and trigger conditions for components
Generate WCAG compliance requirements, keyboard navigation patterns, and screen reader considerations
Identify and document error states, boundary conditions, and unexpected user behaviors
Create user journey mappings and multi-step interaction sequences with decision points
Define transition timing, easing curves, and duration standards for consistency
Document all interaction variants, disabled states, and conditional behaviors
Produce structured specs ready for immediate implementation without ambiguity
Example Output
Example 1: Dropdown Component Spec
State: Closed → User clicks trigger → State: Open (animation: 200ms ease-out)
State: Open → User selects option → State: Closed (focus returns to trigger)
Keyboard: Enter/Space to open, Arrow keys to navigate, Escape to close
Accessibility: aria-expanded, aria-owns, role="listbox"
Edge Case: If 0 items, disable trigger with aria-disabled="true"
Example 2: Multi-Step Form Flow
Step 1 (Contact Info) → Validation → Step 2 (Billing) → Validation → Step 3 (Review)
Back button available after Step 1 (restores previous data)
Error state: Invalid email → Inline validation message + red border
Submit disabled until all required fields valid
Escape key cancels entire flow with confirmation dialog
Example 3: Toast Notification Specs
Entry: Slide in from bottom, 300ms cubic-bezier(0.4, 0, 0.2, 1)
Duration: 5s auto-dismiss (reset on interaction)
Stacking: Max 3 visible, oldest auto-removes when 4th appears
Dismiss: Keyboard (Escape), Click close icon, or auto-dismiss
A11y: role="status" aria-live="polite" for success, aria-live="assertive" for error
What's Included
- SKILL.md: Complete interaction design specifications framework
- State Machine Template: Pre-built structure for mapping component states and transitions
- Accessibility Checklist: WCAG compliance requirements and keyboard interaction patterns
- Edge Case Worksheet: Structured format for identifying and documenting boundary conditions
- Component Behavior Matrix: Table template for documenting all interaction variants and states
- Animation Timing Guide: Standard easing curves and duration specifications for consistency
Who It's For
- Interaction Designers — Creating detailed specs before handing off to development teams
- UX/UI Designers — Documenting complex component behaviors in design systems
- Design System Leads — Establishing standardized interaction patterns across product suites
- Product Managers — Defining interaction requirements and edge cases with development
- Accessibility Specialists — Ensuring WCAG compliance and keyboard navigation in components
Best For
- Design system component specifications (buttons, modals, dropdowns, forms)
- Complex feature interaction documentation (multi-step flows, data tables, real-time updates)
- State machine and transition mapping for stateful components
- Accessibility requirement definition and keyboard navigation patterns
- Edge case and error state documentation before development
- Animation and timing specification for micro-interactions
You might also like
You'll conduct structured culture audits that go beyond surface-level observations to identify root causes of dysfunction in design teams. Using organizational psychology research, you can analyze team feedback patterns, map collaboration barriers across disciplines, and design targeted interventions that address psychological safety gaps, siloed workflows, and retention risks. Claude helps you transform culture diagnostics into measurable improvement plans tied to specific team performance outcomes.
by calesthio
You can systematically evaluate your design system's health using structured frameworks that assess component consistency, design token usage, documentation completeness, and developer adoption. The skill generates prioritized gap analysis reports that quantify issues—like duplicate components, token sprawl, or implementation friction—and translates findings into executive-ready roadmaps with business cases for remediation. You'll move beyond subjective design assessments to data-backed improvement strategies.
by calesthio
This skill helps you craft error messages and notifications that prioritize clarity and actionability over cleverness. You'll generate empathetic microcopy for error states, in-app notifications, empty states, and edge cases—then test variations against different user personas to minimize cognitive load and maximize task completion rates. It bridges UX research insights with production-ready copy that reduces support tickets and builds user trust.
by calesthio
This skill guides you through creating strategic content frameworks that go beyond tone and voice guidelines. You'll synthesize user research with business goals, define content principles, structure information architecture, and document messaging frameworks that teams can reference repeatedly. The result is a comprehensive strategy that ensures every piece of UX content—from microcopy to help documentation—serves both users and business outcomes.
by calesthio
You can generate customized interview frameworks that assess design ops candidates against specific competencies aligned with your team's maturity and challenges. The skill produces behavioral interview questions, technical scenario assessments, and scoring rubrics that help interview panels evaluate candidates objectively across process optimization, metrics thinking, tool knowledge, and organizational influence—moving beyond portfolio review to predict job-ready performance.
by calesthio
You can systematically evaluate UX/UI design candidates across multiple disciplines—UX researchers, UI designers, product designers, design systems engineers, and coordinators—using role-specific competency frameworks. The skill converts vague impressions into defensible scoring systems that account for cross-functional collaboration capability, process maturity, and systems-thinking critical to design ops success. You'll compare candidates across seniority levels, document evaluation decisions for compliance, and build consistent hiring rubrics your entire design team can deploy.
by calesthio
You can generate targeted microcopy for any onboarding friction point—from CTA buttons and error messages to permission requests and empty states. Claude produces multiple copy variations informed by conversion psychology, then helps you A/B test and iterate based on your brand voice and user data. This reduces the time spent writing from scratch while ensuring every micro-moment addresses real user objections.
by calesthio
You can conduct comprehensive microcopy audits across your entire product, categorizing copy by type and user journey stage. Claude helps you identify clarity gaps, consistency issues, and conversion blockers, then generates tested alternatives with clear rationale. You'll produce copy guidelines, A/B test frameworks, and localization-ready copy that drives measurable improvements in user completion rates and confidence.
by calesthio