Add appropriate user feedback states (loading, success, error, empty) to a component or page

UX Feedback States Generator Registry first artifact boundary When .styleseed/project.json and .styleseed/artifacts/index.json exist, resolve the requested artifact ID first, then read only .styleseed/bundles/<artifact id .md and .styleseed/manifests/<artifact id .json . Never fall back to the global legacy bundle for a registry project. Legacy projects may use .styleseed/effective rules.md only when no registry exists. 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. 2. Read the design language reference: DESIGN LANGUAGE.md sections on Loading States (Skeleton), Empty States, Error States 3. For each data dependent area, implement ALL 4 states: State 1: Loading (Skeleton) 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) 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) 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) Rules: Info toast: 3s display Action toast (with undo): 5s display Toast position: above BottomNav One toast at a time (new replaces old) 4. Implementation pattern: 5. Check prefers reduced motion — disable animate pulse when reduced motion is preferred.

ss-feedback