🛑 Core Philosophy: How an application handles failure defines the quality of its user experience.
When to use
Use this skill when designing layout fallbacks (skeletons), coding React/Svelte error boundaries, creating empty lists states, displaying validation alerts, and handling offline network disconnect notifications.
When not to use
Do not use this skill for backend API schema design, analytical telemetry naming plans, or continuous delivery deployments.
Trigger cues
- Key terms: empty state, loading state, error boundary, skeleton screen, offline recovery, feedback loop, fallback layout, system exception UI, input validation UI, active state indicator.
- Designing component layouts, handling API load failures in UI, setting up empty dashboards, or creating error alerts.
Routing boundary
- Primary for frontend visual fallbacks, UX errors, layout states, loading skeletons, and interactive recovery states.
- Secondary to
developer-web-performance for core optimization tasks.
Inputs required
- Target frontend framework (React, SwiftUI, SvelteKit, etc.)
- Specific component contexts (e.g., table data, dashboard layout)
- Source of truth:
references/source.md
Instructions
- Detect Stack: Inspect the workspace files to identify the project's existing UI frameworks and component kits (e.g., React, Tailwind, SwiftUI, shadcn).
- Do Not Migrate: Never propose or force a technology stack change. Apply the principles in this skill using the project's current tooling.
- Read references/source.md to understand microinteractions, skeletons, and error messages.
- Establish visual loading fallbacks (skeletons matching layout proportions) instead of bare loading spinners.
- Code component-level error boundaries to isolate failures and keep the rest of the application responsive.
- Design empty states that provide a motivational prompt and a clear call to action (CTA).
- Incorporate clear offline indicators with automatic input caching.
Output format
- Primary decision/output: UI Fallback designs, error boundary code templates, and copy specifications for failure states.
- Summary: One-paragraph overview of fallback UX.
- Actions: Verification checklist for loader skeletons, error scope containment, and copy clarity.
1---2name: failure-states-empty-states3description: Trigger: empty list state, loader skeleton, error boundary layout, offline indicator, system fallback UI. Scope: UI fallback layouts, skeleton placeholders, client recovery views. Boundary: Excludes server-side API error status coding.4---56# 🛑 Core Philosophy: How an application handles failure defines the quality of its user experience.78## When to use910Use this skill when designing layout fallbacks (skeletons), coding React/Svelte error boundaries, creating empty lists states, displaying validation alerts, and handling offline network disconnect notifications.1112## When not to use1314Do not use this skill for backend API schema design, analytical telemetry naming plans, or continuous delivery deployments.1516## Trigger cues1718- Key terms: empty state, loading state, error boundary, skeleton screen, offline recovery, feedback loop, fallback layout, system exception UI, input validation UI, active state indicator.19- Designing component layouts, handling API load failures in UI, setting up empty dashboards, or creating error alerts.2021## Routing boundary2223- Primary for frontend visual fallbacks, UX errors, layout states, loading skeletons, and interactive recovery states.24- Secondary to `developer-web-performance` for core optimization tasks.2526## Inputs required2728- Target frontend framework (React, SwiftUI, SvelteKit, etc.)29- Specific component contexts (e.g., table data, dashboard layout)30- Source of truth: `references/source.md`3132## Instructions33341. **Detect Stack**: Inspect the workspace files to identify the project's existing UI frameworks and component kits (e.g., React, Tailwind, SwiftUI, shadcn).352. **Do Not Migrate**: Never propose or force a technology stack change. Apply the principles in this skill using the project's current tooling.363. Read [references/source.md](references/source.md) to understand microinteractions, skeletons, and error messages.374. Establish visual loading fallbacks (skeletons matching layout proportions) instead of bare loading spinners.385. Code component-level error boundaries to isolate failures and keep the rest of the application responsive.396. Design empty states that provide a motivational prompt and a clear call to action (CTA).407. Incorporate clear offline indicators with automatic input caching.4142## Output format4344- Primary decision/output: UI Fallback designs, error boundary code templates, and copy specifications for failure states.45- Summary: One-paragraph overview of fallback UX.46- Actions: Verification checklist for loader skeletons, error scope containment, and copy clarity.
coreyone