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 can rapidly build responsive, production-ready UI designs using Tailwind's utility-first approach. Apply low-level utility classes directly to HTML elements to create custom designs without writing CSS, implement mobile-first responsive layouts, add dark mode and theme customization, and generate optimized CSS bundles through build-time processing that includes only the classes you actually use.
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
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.
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
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