ui-states-and-feedback

Enforces loading, empty, error, and content state handling in Flutter screens.

Updated Aug 22, 2026
One-click install
npx skills add https://github.com/zakariaf/NearlyStop --skill ui-states-and-feedback-zakariaf
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-states-and-feedback
Source: https://github.com/zakariaf/NearlyStop/tree/main/.claude/skills/ui-states-and-feedback
Command: npx skills add https://github.com/zakariaf/NearlyStop --skill ui-states-and-feedback-zakariaf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Flutter screens often mishandle non-happy paths: bool triples create impossible states, spinners flash on fast loads, raw exceptions leak into the UI, and snackbars carry information users must act on. This Skill defines how every screen resolves and renders loading, empty, error, and content states, and which feedback surface each message is allowed to use. ## Core Features & Use Cases - Single state resolution: One switch over an AsyncValue or sealed view state decides loading/empty/error/content, with empty, filtered-empty, and error as three distinct views. - Surface ladder: Routes feedback to inline, snackbar, banner, or dialog based on severity, with soft-delete plus Undo preferred over confirmation dialogs and dialog dismissal handled as its own outcome. - Async-safe feedback: Captures ScaffoldMessenger before awaits, guards mounted after, maps typed Failure codes to localized ARB messages, and announces state changes for screen readers. - Use Case: When building a notes list screen with Riverpod, use this Skill to render a delayed skeleton while loading, keep stale content during refresh, show a retryable error view on failure, and offer Undo after a soft delete. ## Quick Start Review my Flutter screen's AsyncValue.when handling and fix its loading, empty, error, and snackbar feedback to follow these rules.

Frequently Asked Questions about ui-states-and-feedback

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I handle loading, error, and empty states in Flutter with Riverpod?

Resolve exactly one state in a single switch over AsyncValue.when: a delayed skeleton for loading, a retryable error view, and distinct views for empty versus filtered-empty. Never use separate isLoading, error, and data booleans, which make impossible states representable.

When should I use a snackbar vs banner vs dialog in Flutter?

Pick the lowest adequate surface: inline for field-level issues, snackbar for completed actions with Undo, banner for persistent app-level conditions like offline mode, and dialog only for decisions that must resolve before continuing. Actionable information must never live only in an auto-dismissing snackbar.

How do I show a snackbar after an async operation in Flutter?

Capture ScaffoldMessenger and localizations before the await, then guard with context.mounted after it returns. This avoids the use_build_context_synchronously error where the BuildContext is gone when the write completes.

Should I use a confirmation dialog or Undo for delete actions?

Prefer soft delete with a SnackBarAction Undo, since it is faster for users who meant it and safer for those who did not. Reserve barrierDismissible: false dialogs for genuinely irreversible actions, naming the consequence and count.

Why does my Flutter loading spinner flash on fast loads?

A spinner shown immediately flashes when data arrives within a few hundred milliseconds. Suppress the loading indicator for roughly 150-300 ms and use a skeleton shaped like the final layout so content does not jump when it lands.

How do I handle showDialog returning null in Flutter?

A null return means the dialog was dismissed, which is its own outcome. Switch over a sealed result type and map null to an explicit dismissed case; never use ?? true, which silently converts a tap outside into a confirmed destructive action.