# Ux Network

> >

- **Type:** Skill
- **Install:** `agentstack add skill-parhamb-design-skills-network`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [parhamb](https://agentstack.voostack.com/s/parhamb)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [parhamb](https://github.com/parhamb)
- **Source:** https://github.com/parhamb/design-skills/tree/main/network
- **Website:** https://design-skills-pi.vercel.app

## Install

```sh
agentstack add skill-parhamb-design-skills-network
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Network and Connectivity UX

Network conditions are unpredictable. An app that only works on fast Wi-Fi is
not a reliable product. Design for the worst connection and fast connections
will take care of themselves.

---

## Checklist

| Item | Guidance |
|---|---|
| Performance on slow connections | Critical content loads first. Images lazy-load. API payloads are compressed. |
| No internet error | Inline message with a retry button. Never an empty screen with no explanation. |
| Network switch resilience | App does not crash or disconnect when switching from Wi-Fi to mobile data. |
| Offline mode | Cached content is displayed. Writes are queued and flushed when connection returns. |
| Background data sync | Data syncs in background on Wi-Fi by default. User can enable sync over mobile data. |

---

## Offline-First Architecture

**Optimistic UI**: Update the UI immediately to show the expected outcome, then
sync in the background. If the sync fails, show an undo option. This approach
makes the app feel fast regardless of network speed.

**Cache strategies**:
- Stale-while-revalidate: Show cached content immediately, refresh in the background.
- Cache-first: Always show the cache, refresh only on explicit pull-to-refresh.
- Network-first: Try the network first, fall back to cache on failure.

**Sync queue**: Store pending writes locally and flush them when connectivity
returns. Show a clear sync status indicator so users know their changes are
queued and will be saved.

---

## Error State Patterns

| Scenario | UI Pattern |
|---|---|
| No internet at launch | Full-screen message with an illustration and a Retry button |
| Lost internet mid-use | Top banner: "No connection — working offline" |
| Slow connection | Skeleton screens instead of spinners |
| Server error (5xx) | "Something went wrong on our end." with a Retry button |
| Request timeout | "Taking longer than usual." with Keep waiting and Cancel options |
| Partial failure | Load what worked, show an inline error for what failed |

---

## Performance Targets

| Metric | Target |
|---|---|
| First contentful paint | Under 1.8 seconds on 4G |
| Time to interactive | Under 3.8 seconds on 4G |
| API response (P95) | Under 500ms |
| Offline cache hit | Under 100ms |

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [parhamb](https://github.com/parhamb)
- **Source:** [parhamb/design-skills](https://github.com/parhamb/design-skills)
- **License:** MIT
- **Homepage:** https://design-skills-pi.vercel.app

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-parhamb-design-skills-network
- Seller: https://agentstack.voostack.com/s/parhamb
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.