Installs just this skill. Get the whole plugin for auto-invocation.
⚡ How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/ss-feedback
👁️ Context preview
The summary Claude sees to decide when to auto-load this skill.
Add appropriate user feedback states (loading, success, error, empty) to a component or page
📊 Stats
Stars819
Forks73
LanguageTypeScript
LicenseMIT
📦 Ships with styleseed
</> SKILL.md
ss-feedback.SKILL.md
---name: ss-feedback
description: Add appropriate user feedback states (loading, success, error, empty) to a component or page
argument-hint: "[file-path]"
allowed-tools: Read, Write, Edit, Grep, Glob
---# 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.
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)
```tsx
// 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" />
