---
name: valec3/frontend-ui-feedback-states
source: https://app.decimal.ai/s/valec3-frontend-ui-feedback-states@1/SKILL.md
source_sha256: ff154835a65d
---

# Frontend Ui Feedback States

## When to use this skill
- Implementing loading states
- Handling errors gracefully
- Showing empty states
- Providing user feedback

## Workflow
- [ ] Identify all possible states
- [ ] Design for loading state
- [ ] Design for error state
- [ ] Design for empty state
- [ ] Design for success state

## Instructions

### State Pattern
```typescript
type DataState<T> = 
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: Error };

function UserProfile() {
  const [state, setState] = useState<DataState<User>>({ status: 'idle' });

  if (state.status === 'loading') return <Skeleton />;
  if (state.status === 'error') return <ErrorMessage error={state.error} />;
  if (state.status === 'success') return <UserCard user={state.data} />;
  
  return null;
}
```

### Loading States
- Skeletons for content
- Spinners for actions
- Progress bars for uploads

### Empty States
- Clear message
- Illustration
- Call-to-action

## Resources
- Always handle all states
- Provide clear error messages
- Make loading states feel fast