skills.rest
dloschiavo
dloschiavoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

connectivity-banner

Display a red banner indicating network connectivity status via no-cors fetch.

Updated May 13, 2026
Search Tags:#app development#user experience#connectivity#banner#network status
One-click install
npx skills add https://github.com/dloschiavo/orca --skill connectivity-banner
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: connectivity-banner
Source: https://github.com/dloschiavo/orca/tree/main/recipe/connectivity-banner
Command: npx skills add https://github.com/dloschiavo/orca --skill connectivity-banner

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a user-friendly way to display network connectivity status as a single red banner at the top of the app, eliminating the confusion caused by two-state designs.

Core Features & Use Cases

  • Network Status Indicator: Shows if the user is offline, the backend is down, or the backend is down in development mode.
  • External Probe: Uses a no-cors fetch to an external URL to distinguish between user offline, backend down, and development mode.
  • Toast-Suppression Rule: Filters out redundant toasts during outages to prevent information overload.
  • Quick Start: Display the connectivity status banner above the authentication gate in your app.

Quick Start

Use the connectivity-banner skill to display a network connectivity banner in your app.

Frequently Asked Questions about connectivity-banner

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

FAQPage Schema
How do I display a network connectivity status banner in my app?▼

To display a network connectivity status banner, this Skill provides a single red banner positioned at the top of your app to clearly indicate when the user is offline, the backend is down, or the app is in development mode.

What is the best way to differentiate between user offline and backend down states?▼

Differentiating between user offline and backend down states is handled by an external probe that uses a no-cors fetch to an external URL, allowing the connectivity banner to accurately identify the specific network status.

How do I stop redundant error toasts during a network outage?▼

To stop redundant error toasts during a network outage, this Skill applies a toast-suppression rule that actively filters out duplicate notifications, preventing information overload when the connectivity banner is already displayed.

Where should I place the connectivity banner in my app layout?▼

The connectivity banner should be placed above the authentication gate in your app layout, ensuring the network status indicator is immediately visible to users before they attempt to access authenticated content.

Do I need a no-cors fetch to check network connectivity status?▼

A no-cors fetch to an external URL is required to check network connectivity status, enabling the probe to distinguish between user offline, backend down, and development mode without running into CORS issues.

Related Skills

Explore More Software Engineering Skills→
Legal-and-GeneralLegal-and-General
23

canopy-banner

Guide consistent Canopy lg-banner messages across Angular pages.

Official
Intermediate
dnsnamdangdnsnamdang

elearning-validate

Validate Elearning forms and display error toast notifications.

Community
Intermediate
congiuluccongiuluc

notification-frontend

Implement accessible toast notifications and alert systems in React applications.

Community
Intermediate
0xjc65eth0xjc65eth
4

error-recovery

Implement timeout-aware fetch, WebSocket reconnection, cache fallback, and error boundaries for CYPHER V3.

Community
Advanced