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
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 architect complete design systems leveraging Tailwind v4's CSS-first approach, including semantic color tokens, component variants, responsive patterns, and native dark mode. This skill helps you build reusable component libraries with proper theming infrastructure, accessibility standards, and migration strategies from Tailwind v3 to v4.
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 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