# Frontend UI Feedback States

> Standardized guidelines and patterns for Frontend Ui Feedback States.

- Skill: `valec3/frontend-ui-feedback-states` (Agent Skill)
- Install (CLI): `npx skillmds@latest add valec3/frontend-ui-feedback-states`
- Raw SKILL.md: https://api.skillmd.com/api/skills/valec3/frontend-ui-feedback-states/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: valec3 (https://skillmd.com/u/valec3)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/valec3/frontend-ui-feedback-states

---


# 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