ux-feedback-patterns_skill

Overview

This skill provides a compact set of user feedback patterns for success/error messages, loading states, confirmations, and progress indicators tailored for a fantasy-themed phonics game built with vanilla JavaScript and web components. It focuses on practical, accessible patterns you can drop into notifications, toasts, dialogs, and status updates. The guidance covers visual, auditory, and ARIA-based announcements to ensure players — including children — understand game state changes clearly.

How this skill works

Patterns are implemented as small, framework-free building blocks: inline status text, a toast web component for non-blocking alerts, dialog templates for confirmations, and progress primitives (linear, step, circular). Each pattern includes CSS classes, ARIA roles/attributes, and lightweight JS snippets for showing, animating, and announcing updates to assistive technologies. Timing recommendations and animation hooks help keep feedback snappy and non-disruptive.

When to use it

• Show inline success/error messages next to form fields or mini-game inputs.
• Use toasts for transient, non-blocking updates like "Spell created" or "Creature saved".
• Display confirmation dialogs before destructive actions like deleting a created creature or resetting progress.
• Use progress bars or spinners for uploads, level loads, or long tasks.
• Announce score changes and important state transitions to screen readers via a live region.

Best practices

• Prefer concise, action-focused text children can understand (e.g., "Word saved!" not technical details).
• Use aria-live roles for announcements and role="alert" for urgent errors.
• Respect prefers-reduced-motion and limit animations to micro-interactions (100–300ms).
• Do not rely on color alone — combine icons, text, and ARIA states (aria-invalid, aria-busy).
• Auto-dismiss non-critical toasts after 3–5s; keep validation errors visible until corrected.

Example use cases

• ToastContainer web component to show "3 points earned" after a correct spelling.
• Inline error under a text input with aria-invalid and role="alert" for validation feedback.
• Confirmation dialog before deleting a saved creature with clear cancel/delete actions.
• Skeleton and spinner overlays while a new level or art assets load.
• Step progress for multi-part storytelling or level creation flow.