ss-feedback
FeaturedAdd appropriate user feedback states (loading, success, error, empty) to a component or page
Web & Frontend 950 stars
88 forks Updated today MIT
Install
Quality Score: 96/100
Stars 20%
Recency 20%
Frontmatter 20%
Documentation 15%
Issue Health 10%
License 10%
Description 5%
Skill Content
# 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)
```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" />
</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" />
...
Details
- Author
- bitjaru
- Repository
- bitjaru/styleseed
- Created
- 5 months ago
- Last Updated
- today
- Language
- JavaScript
- License
- MIT
Integrates with
Bundled in these plugins
Similar Skills
Semantically similar based on skill content — not just same category
Web & Frontend Listed
empty-states
Empty, loading, and error-state design. Use for first-run screens, zero results, empty lists/tables/dashboards, loading skeletons, offline/permission errors, retries, layout stability, and state copy.
8 Updated 5 days ago
KyaniteLabs Web & Frontend Listed
component-states
State matrix for interactive UI. Use when building or reviewing buttons, links, inputs, tabs, toggles, menus, cards, or controls that need hover, focus, active, disabled, loading, selected, error, keyboard, or ARIA states.
8 Updated 5 days ago
KyaniteLabs Web & Frontend Featured
ss-review
Review UI code for design system compliance, accessibility, and best practices
950 Updated today
bitjaru