Interaction Design Specification Generator
Generate developer-ready interaction specs with state diagrams and edge case handling
What You Can Do
You can generate detailed interaction specifications for complex user flows and component behaviors that eliminate ambiguity in handoff. The skill produces structured documentation including state diagrams, transition tables, animation timing, keyboard navigation patterns, error handling workflows, and accessibility requirements—all formatted for both designers and developers to reference.
Features
Visual and textual representations of component states (enabled, disabled, loading, error, success) and transitions between them
Detailed specs for micro-interactions including timing, easing curves, triggers, and conditional logic
Identifies and documents error states, loading states, empty states, and boundary conditions often missed in design handoff
Keyboard navigation patterns, screen reader behavior, ARIA requirements, and focus management for each interaction
Precise documentation of animation duration, easing functions, and sequencing for consistency across implementations
Maps conditional logic and branching user flows with clear entry/exit points and fallback behaviors
Generates prose descriptions, structured tables, and state machine diagrams suitable for different stakeholder review
Creates interaction convention guidelines for design systems and component libraries
Example Output
Example 1: Form Field Validation Micro-interaction
- States: Default → Focused → Validating → Success / Error
- Transitions: OnFocus triggers outline color change (200ms ease-out), onBlur triggers validation check, success state shows checkmark (300ms scale animation)
- Edge cases: Disabled field styling, validation error message with live region announcement, recovery path when user corrects input
Example 2: Modal Dialog State Diagram
Closed → Opening (backdrop fade-in 150ms) → Open
↓ ↓
[ESC key / backdrop click] [Submit/Cancel]
↓ ↓
Closing (fade-out 200ms) → Closed
With documented focus management, scroll locking, and keyboard trap specifications.
Example 3: Data Table Pagination
- States: Loading, Loaded (with results), Empty, Error
- Accessibility: Screen reader announces "Page 2 of 5 loaded, 20 results displayed"
- Keyboard: Tab order, arrow key navigation within table, Enter to sort columns
What's Included
- SKILL.md: Core instruction file with skill overview and usage guidelines
- Interaction Specification Template: Structured markdown template covering states, transitions, animations, accessibility, and edge cases
- State Diagram Syntax Guide: Quick reference for creating ASCII/Mermaid state diagrams
- Micro-interaction Checklist: Common interaction patterns (modals, dropdowns, form validation, loaders) with standard state requirements
- Accessibility Requirements Framework: Checklist for keyboard navigation, ARIA, focus management, and screen reader announcements
Who It's For
- Interaction Designers — Creating detailed handoff documentation that reduces dev clarification questions
- UX Designers — Specifying component interactions and user flow behaviors with precision
- Design System Managers — Building reusable interaction pattern libraries and conventions
- Product Managers — Documenting interaction requirements and edge case handling for feature specs
- Frontend Developers — Understanding design intent without back-and-forth clarification cycles
Best For
- Micro-interaction design (modals, dropdowns, tooltips, form validation, loaders)
- Complex user flows with multiple conditional paths and decision points
- Component state machine documentation for design systems
- Animation and transition timing specifications
- Accessibility and keyboard navigation pattern documentation
- Error recovery and edge case handling workflows
You might also like
Analyze raw usability testing data—transcripts, session notes, task completion rates, and participant feedback—to surface recurring patterns and user behaviors. Claude identifies the highest-impact issues, extracts testable insights about user mental models, and generates prioritized recommendations ranked by severity, frequency, and business impact. This cuts manual synthesis time from hours to minutes while maintaining analytical rigor.
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
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
You can systematically design reusable responsive grid systems, establish spacing scales and breakpoint strategies, and document component layout behaviors for seamless developer handoff. This skill generates technical layout specifications that reduce design-to-development friction and ensure accessibility compliance from the design phase, enabling teams to build consistent, scalable web interfaces across all devices.
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 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, test, and iterate on onboarding microcopy that handles the unique constraints of first-run experiences: zero product knowledge assumptions, anxiety management around data entry and permissions, and sequential task dependencies. Claude helps you stress-test copy variants against user objections, anticipate drop-off points, and create messaging that balances education, reassurance, and motivation in minimal word count.
by calesthio
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