This skill provides patterns for consistent loading and error UX.
1. Avoid layout shift (CLS)
Reserve space for content during loading (skeletons, placeholders).
Avoid patterns that drastically change layout between loading and loaded states.
2. Choose a consistent strategy
Two common approaches:
Suspense-based: use Suspense boundaries + error boundaries.
Explicit state-based: isLoading / isError flags with consistent layout.
Pick one approach per application (or per major area) and apply consistently.
3. Error boundaries (recommended)
For unexpected errors, prefer an error boundary that:
renders a safe fallback UI
logs/captures the error to monitoring
offers a retry action if appropriate
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: willyu1007-ai-first-template-loading-and-error-states3description: Loading and Error States4---56# Loading and Error States78This skill provides patterns for consistent loading and error UX.910---1112## 1. Avoid layout shift (CLS)1314- Reserve space for content during loading (skeletons, placeholders).15- Avoid patterns that drastically change layout between loading and loaded states.1617---1819## 2. Choose a consistent strategy2021Two common approaches:22- **Suspense-based**: use Suspense boundaries + error boundaries.23- **Explicit state-based**: `isLoading` / `isError` flags with consistent layout.2425Pick one approach per application (or per major area) and apply consistently.2627---2829## 3. Error boundaries (recommended)3031For unexpected errors, prefer an error boundary that:32- renders a safe fallback UI33- logs/captures the error to monitoring34- offers a retry action if appropriate3536---37> Converted and distributed by [TomeVault](https://tomevault.io/claim/willyu1007) — claim your Tome and manage your conversions.38<!-- tomevault:4.0:skill_md:2026-04-15 -->
Run npx skillmds@latest add tomevault-io/willyu1007-ai-first-template-loading-and-error-states in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Loading and Error States It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.
tomevault-io