| name | ux-feedback |
| description | Add appropriate user feedback states (loading, success, error, empty) to a component or page |
| risk | unknown |
| source | https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-feedback |
| source_repo | bitjaru/styleseed |
| source_type | community |
| date_added | 2026-07-01T00:00:00.000Z |
| license | MIT |
| license_source | https://github.com/bitjaru/styleseed/blob/main/LICENSE |
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
-
Read the target file and identify all data-dependent areas.
-
Read the design language reference:
DESIGN-LANGUAGE.md sections on Loading States (Skeleton), Empty States, Error States
-
For each data-dependent area, implement ALL 4 states:
State 1: Loading (Skeleton)
<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 cycle)
