# Ss Feedback

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

- **Type:** Skill
- **Install:** `agentstack add skill-bitjaru-styleseed-ss-feedback`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [bitjaru](https://agentstack.voostack.com/s/bitjaru)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [bitjaru](https://github.com/bitjaru)
- **Source:** https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-feedback
- **Website:** https://styleseed-demo.vercel.app

## Install

```sh
agentstack add skill-bitjaru-styleseed-ss-feedback
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

  
    
    
  
  
  

```
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)
```tsx
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)
```tsx

  
  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)
```tsx
// 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)

4. Implementation pattern:
```tsx
function DataCard({ data, isLoading, error }) {
  if (isLoading) return 
  if (error) return 
  if (!data || data.length === 0) return 
  return 
}
```

5. 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](https://github.com/bitjaru)
- **Source:** [bitjaru/styleseed](https://github.com/bitjaru/styleseed)
- **License:** MIT
- **Homepage:** https://styleseed-demo.vercel.app

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-bitjaru-styleseed-ss-feedback
- Seller: https://agentstack.voostack.com/s/bitjaru
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.