Interaction Design

What it does

This skill enables AI agents to design interactive user interfaces and experiences within SecondSky's spatial computing environment. It provides pre-defined interaction patterns (microinteractions, transitions, entrances) and templates for loading states, error states, and empty states. The skill also incorporates accessibility considerations like screen reader announcements and respecting user motion preferences.

When to use it

• Designing a new application or feature within SecondSky that requires interactive elements.
• Creating visual feedback for button presses or other user actions (microinteractions).
• Implementing smooth transitions between different views or modals in the interface.
• Developing loading screens with skeleton loaders to provide visual cues during data retrieval.

Key capabilities

• Interaction Patterns: Provides templates and guidance for microinteractions, transitions, and entrance animations.
• Loading States: Includes a skeleton loader implementation for displaying progress while content loads.
• Error States: Offers a pre-built error display component with retry functionality.
• Empty States: Provides a template for displaying empty states with titles, descriptions, and optional action buttons.
• Accessibility: Includes components for screen reader announcements and respecting user motion preferences.
• Animation Guidelines: Suggests best practices for animation duration (under 500ms) and easing functions.

Example prompts

• "Create a button press microinteraction."
• "Show a skeleton loader while data is loading."
• "Design an error state with a 'Try Again' button."
• "Implement an empty state for an inbox with no messages."

Tips & gotchas

• The skill focuses on UI/UX design within the SecondSky environment. It’s not intended for general coding tasks.
• Animation durations should generally be kept under 500ms to avoid a sluggish feel.
• Consider user motion preferences when implementing animations.