Ss Feedback

UX Feedback States Generator

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

  
    
    
  
  
  

Rules:

• Show skeleton for 300ms minimum (prevent flash)
• Delay skeleton display by 300ms (fast loads skip skeleton entirely)
• Use animate-pulse (1.5s cycle)
• Match skeleton shapes to real content dimensions
• Never use spinners inside cards

State 2: Empty (Zero Data)

Create Project}
/>

Rules:

• Center-aligned in the card
• Icon: 32px, text-text-tertiary
• Title: 14px, text-text-secondary
• Always suggest a next action
• Zero values show as "0" (don't hide or dash)

State 3: Error (Load Failed)

  
  Couldn't load the data
  Try again

Rules:

• Partial failure: only affected card shows error, rest loads normally
• Full page failure: full-screen EmptyState with retry
• Error message: plain language, blame the system
• Always provide retry button

State 4: Success (Action Feedback)

// Toast notification for action confirmations
toast("Changes saved")

// With undo for destructive actions
toast("Item deleted", { action: { label: "Undo", onClick: handleUndo } })

Rules:

• Info toast: 3s display
• Action toast (with undo): 5s display
• Toast position: above BottomNav
• One toast at a time (new replaces old)

1. Implementation pattern:

function DataCard({ data, isLoading, error }) {
  if (isLoading) return 
  if (error) return 
  if (!data || data.length === 0) return 
  return 
}

1. Check prefers-reduced-motion — disable animate-pulse when reduced motion is preferred.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: bitjaru
• Source: bitjaru/styleseed
• License: MIT
• Homepage: https://styleseed-demo.vercel.app

Install and usage instructions live in the source repository linked above.