Skills
.Work. You
Rest

add-empty-error-states

Official

Ship reliable empty and error UIs

Software Engineering#frontend#react#error handling#retry#tanstack-query#empty state#ui states
AuthorAgentSystemLabs
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill prevents broken-feeling pages by ensuring your app shows clear, actionable UI when fetched data returns zero results or fails to load.

Core Features & Use Cases

  • Finds data-fetch entry points: Traces useQuery / useSuspenseQuery, route loaders, and loader/fetcher consumption sites to determine where empty and error UI must live.
  • Validates the three required branches: Confirms Loading (out of scope for this skill), plus correct Empty and Error handling for each fetch surface.
  • Reuses existing UI primitives: Preferentially uses the project’s existing <EmptyState /> (or equivalent) and proposes the smallest consistent component only if nothing matches.
  • Applies safe, user-friendly error messaging: Ensures errors show a human-readable message and includes retry affordance, surfacing raw error details only in dev.

Quick Start

Tell the AI: “Add empty and error states for the route/component I just wired with useQuery or a TanStack loader, using the project’s existing EmptyState/ErrorState patterns.”

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: add-empty-error-states
Download link: https://github.com/AgentSystemLabs/core/archive/main.zip#add-empty-error-states

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.