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
Conduct comprehensive culture assessments that go beyond pulse surveys to uncover hidden friction points impacting designer satisfaction and retention. You'll quantify culture health across key dimensions like psychological safety, autonomy, growth opportunity, and collaboration effectiveness, then generate prioritized improvement roadmaps with specific interventions backed by team feedback. This framework helps you build evidence-based business cases for culture investments and track improvements across quarterly cycles.
by calesthio
You can diagnose why layouts break at specific breakpoints and receive precise CSS fixes to resolve them. The skill identifies root causes of overflow problems, flex/grid misalignment, and mobile usability failures, then provides responsive design patterns to prevent similar issues from recurring across your entire project.
by calesthio
UX Pilot transforms your design workflow into a collaborative conversation. It guides you through a discovery phase to understand your product, users, and goals, then generates a UX brief. You can audit existing codebases for UX issues with severity scoring, preview your designs in a live browser with hot reload iteration, and export complete UX specifications ready for development teams. Each phase builds on the previous, creating a cohesive design-to-handoff workflow.
by sakaax
You can write clean, maintainable Tailwind CSS directly in React JSX using utility-first principles. This skill helps you compose responsive layouts, implement dark mode themes, extract reusable component patterns, convert existing CSS to Tailwind, and troubleshoot Tailwind configuration issues. It's optimized for dashboards, forms, cards, modals, and other typical application interfaces.
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
Conduct comprehensive design operations audits using repeatable protocols that quantify inefficiencies across workflows, handoffs, and governance. You'll identify systemic bottlenecks, map dependencies and ownership gaps, and produce actionable recommendations with business cases for process improvements. The framework helps you move from reactive problem-solving to proactive optimization by accounting for team capacity, tool constraints, and organizational context.
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
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