ux-feedback

UX Feedback States Generator

When to Use

Use this skill when you need add appropriate user feedback states (loading, success, error, empty) to a component or page.

When NOT to use

• For only the words inside a state → use /ss-copy
• For accessibility issues in existing states → use /ss-a11y
• For brand-new component creation → use /ss-component
• For analytics or error-logging plumbing — UI presentation only

Target: $ARGUMENTS

Instructions

1. Read the target file and identify all data-dependent areas.

1. Read the design language reference:

• DESIGN-LANGUAGE.md sections on Loading States (Skeleton), Empty States, Error States

1. For each data-dependent area, implement ALL 4 states:

State 1: Loading (Skeleton)

// Skeleton must match the final layout shape
<div className="bg-card rounded-2xl p-6 shadow-[var(--shadow-card)]">
  <div className="flex items-center gap-2 mb-3">
    <div className="size-7 bg-surface-muted rounded-lg animate-pulse" />
    <div className="h-3 w-16 bg-surface-muted rounded animate-pulse" />
  </div>
  <div className="h-9 w-24 bg-surface-muted rounded-lg animate-pulse mb-3" />
  <div className="h-3 w-12 bg-surface-muted rounded animate-pulse" />
</div>

Rules:

• Show skeleton for 300ms minimum (prevent flash)
• Delay skeleton display by 300ms (fast loads skip skeleton entirely)
• Use animate-pulse (1.5s c