AgentSkillsCN

handle-frontend-loading-and-errors

对前端的加载、空状态及错误状态进行一致性处理（骨架屏/加载动画、错误边界、重试机制以及对用户友好的提示信息）。

SKILL.md
--- frontmatter
name: handle-frontend-loading-and-errors
description: Handle frontend loading, empty, and error states consistently (skeletons/spinners, error boundaries, retries, and user-safe messages).

Handle Frontend Loading and Errors

Purpose

Ensure every user-facing screen behaves predictably under slow networks, missing data, and errors.

When to use

Use this skill when you are:

  • •Building a new page or data-driven component
  • •Introducing Suspense or async data fetching
  • •Handling API failures or permission failures in UI
  • •Standardizing error messages and retry actions

Inputs

  • •UX expectations (what to show while loading, what error messaging is acceptable)
  • •Data fetching mechanism (explicit loading state vs Suspense)
  • •Error contract (status codes, error codes, message policy)

Outputs

  • •Loading UI components (skeleton/spinner) consistent across the app
  • •Error boundaries or explicit error rendering
  • •Empty state rendering (no data) with next actions
  • •Retry strategy (refetch/retry button)

Rules

  • •UI MUST explicitly handle:
    • •loading
    • •empty/no data
    • •error
  • •Error messages MUST be user-safe and SHOULD avoid leaking internal details.
  • •Retry SHOULD be available when it is likely to succeed (transient failures).
  • •Permission failures SHOULD be distinguished from generic errors when possible.

Steps

  1. •Decide your data boundary:
    • •explicit isLoading/isError
    • •Suspense + error boundary
  2. •Implement a consistent loading component.
  3. •Implement error rendering:
    • •user-safe message
    • •optional diagnostics (support ID)
  4. •Implement empty state:
    • •explanation
    • •next action
  5. •Verify:
    • •simulate slow network (loading visible)
    • •simulate 404/no data (empty state)
    • •simulate failure (error UI + retry)

Verification

  • • Loading state is visible during data fetch (simulate slow network)
  • • Empty state renders when no data is available
  • • Error state renders with user-safe message on failure
  • • Retry action works for transient failures
  • • Permission errors are distinguished from generic errors
  • • Error messages do not leak internal details

Boundaries

  • •MUST NOT skip loading state for async operations
  • •MUST NOT show raw error messages or stack traces to users
  • •MUST NOT leave UI in undefined state during fetch
  • •SHOULD NOT show retry for non-recoverable errors
  • •SHOULD NOT use identical messages for all error types
  • •SHOULD NOT block entire UI when a single component fails (use error boundaries)

Included assets

  • •Templates: ./templates/ provides loading, empty, and error boundary scaffolds.
  • •Examples: ./examples/ provides UX state acceptance criteria.