Connection Status Indicator
Tell people the app lost the server before their next click fails.
What it adds
A persistent indicator that reports the app's real connectivity to the backend, and what the user can do about it.
What your agent is told to do
5
What your agent is told to do
5-
1
Derive connection state from the outcome of real requests — timeouts, network errors, repeated failures — not from a browser flag.
-
2
Distinguish at least four states: device offline, server unreachable, realtime channel dropped, and session expired. Each gets different copy, because each has a different fix.
-
3
Show a reconnect or retry action on the indicator, and reconnect automatically with backoff in the background.
-
4
Clear the indicator only after a successful request, not after a single successful ping to something unrelated.
-
5
Do NOT trust navigator.onLine as the source of truth. It reports whether a network interface exists, which is true on captive-portal wifi, on a VPN that has dropped, and when your own API is down.
Edge cases it handles
6
Edge cases it handles
6- Require two or three consecutive failures before showing the banner, so a single dropped request does not flash a scary message.
- Backoff must be capped and jittered, or every client reconnects at the same instant and finishes the server off.
- A 401 after reconnect is a session problem, not a network problem — route the user to sign in rather than retrying forever.
- Degraded is a real state: requests succeeding slowly deserve a quieter message than requests failing.
- The indicator must not cover a fixed bottom nav, a toast region, or the primary action on mobile.
- Announce state changes to assistive technology once, not on every retry attempt.
Definition of done
8
Definition of done
8- Connection state is computed from actual request outcomes.
- Offline, server-unreachable, realtime-dropped, and session-expired are shown as distinct states with distinct copy.
- Brief network blips do not cause the indicator to flicker.
- Reconnection is automatic with capped, jittered backoff, and a manual retry is available.
- The indicator never obstructs navigation or primary actions.
- State changes are announced once via an aria-live region.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
Upload Malware Scanning
Upload Malware Scanning
Quarantine uploaded files until they are known safe.
What it does
A quarantine lifecycle for uploads: every new file is unreachable until scanned, with defined handling for scanner failures and infected results.
How it works
- 1 Give every upload an explicit scan state — pending, clean, infected, or error — and default it to pending the moment the bytes land.
- 2 Make pending and infected files unreachable from every access path in the app, including admin views, previews, thumbnails, and any signed URL. A quarantine with one exception is not a quarantine.
- 3 Scan asynchronously and update the state; do not block the upload request on the scanner.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/upload-malware-scanning
Rate Limiting
Rate Limiting
Stop one client from ruining it for everyone.
What it does
Throttling on the endpoints that get abused: auth, search, exports, and public forms.
How it works
- 1 Identify the endpoints worth protecting: sign-in, sign-up, password reset, search, exports, and anything unauthenticated.
- 2 Limit by a stable identifier — user ID where signed in, IP otherwise. Be aware IP is shared behind NAT and proxies.
- 3 Return 429 with a Retry-After header. Do not silently drop the request.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/rate-limiting
Password Generator
Password Generator
Offer a strong password in one click wherever someone sets or changes credentials.
What it does
A generate control on password fields that produces a strong value, shows it, and hands it to the user safely.
How it works
- 1 Add the control to every place a password is set: sign-up, password change, password reset completion, and any admin screen that provisions credentials for someone else.
- 2 Generate the value in the browser using the platform's cryptographic random source. The value must never be produced on the server or sent anywhere.
- 3 Reveal the generated password by default so the user can record it, and offer a regenerate control beside it. A hidden generated password that the user cannot see is a password they will immediately reset.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/password-generator
How it works
-
1
Copy the link
Grab the Markdown instruction URL for this feature.
-
2
Give it to your AI
Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.
-
3
It inspects, then implements
Your agent reads your existing app first, then adds the feature to fit it.
Works with your stack
These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.
Need it tighter than that? Customize the feature and tell it exactly what you're running.