Offline First Pwa

Rules for building offline-first Progressive Web Apps that launch instantly from the home screen. Use when building, reviewing or debugging a PWA, or anything touching a service worker, a web app manifest, precaching, an in-app update prompt, iOS home screen behaviour, or safe-area/notch layout.

31 stars 4 forksMobile Development

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add mattiasgeniar/offline-first-pwa --skill offline-first-pwa

Manual install

git clone --depth 1 https://github.com/mattiasgeniar/offline-first-pwa.git /tmp/offline-first-pwa
mkdir -p ~/.claude/skills
cp -r /tmp/offline-first-pwa/. ~/.claude/skills/offline-first-pwa

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Offline-first PWA

An offline-first PWA is an app that launches from cache in under a second with no network at
all, and updates itself in the background afterwards. Every rule below follows from that
sentence, and every one of them is here because it was gotten wrong first.

Stack-neutral. Where a rule needs a build step it says "your bundler's manifest", not a
specific tool.

## If you only apply three

1. Serve navigations **cache-first**, never network-first. A slow network does not reject a
   fetch, it hangs.
2. **Everything the app launches must be precached**, including assets only fetched at
   runtime. Missing one only breaks a cold or slow launch, which nobody tests by hand.
3. **Test slow, not offline.** They are different failure modes and only one of them is
   handled by accident.

## Service worker

- **Navigations are cache-first. Never network-first.** This is the big one and it is
  counter-intuitive enough to get written the wrong way round on purpose. The reasoning for
  network-first is usually "the page contains app logic, so a cached page is a stale app".
  True, and irrelevant next to how it fails: a `fetch().catch(() => cache)` fallback only
  fires when the device is *properly* offline. On a network that is technically up and
  crawling, the worker just waits. Measured with the page already in cache: 8s of added
  latency produced 8.1s to first paint, 20s produced 20s. Cache-first made the same launches
  64ms and 112ms.

Read the full skill on GitHub

Details

Skill name: offline-first-pwa
Repository: mattiasgeniar/offline-first-pwa
Repo updated: 19 August 2026

FAQ

What does the Offline First Pwa skill do?

How do I install the Offline First Pwa skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add mattiasgeniar/offline-first-pwa --skill offline-first-pwa. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Offline First Pwa popular?

It lives in mattiasgeniar/offline-first-pwa, which has 31 GitHub stars and 4 forks.

Related skills

Swiftui Design Principles

arjitj2/swiftui-design-principles

Design principles for building polished, native-feeling SwiftUI apps and widgets. Use this skill when creating or modifying SwiftUI views, iOS widgets (WidgetKit), or any native Apple UI. Ensures proper spacing, typography, colors, and widget implementations that look and feel like quality apps rather than AI-generated slop.

Mobile Development

IOS Code Audit

jazzychad/ios-code-audit

Run a thorough audit of an iOS / macOS Swift codebase — bugs, dead code, duplication, Swift concurrency issues, deprecated APIs, security, performance, and SwiftUI quality — and produce a single navigable CODE_AUDIT.md report with file:line-cited findings. Use when the user asks for a "code audit", "comprehensive review", "find tech debt", "what should I clean up", or similar broad-scope assessment of a Swift project.

Mobile Development

Apple Engineer Superpowers

piemonte/apple-engineer-superpowers

Use when writing Swift code for Apple platforms - iOS, macOS, visionOS. Covers Swift 6 concurrency, actors, Sendable, async/await, SwiftUI, MVVM architecture, Metal GPU programming, RealityKit ECS, visionOS scenes, interpolation/animation, advanced collection types, property wrappers, Combine bridging, error handling, testing, and API design patterns.

Mobile Development

IOS Agent Skill

Nagarjuna2997/ios-agent-skill

Expert iOS/Swift developer behavior for AI coding agents. Use when writing, reviewing, or refactoring Swift, SwiftUI, UIKit, or SwiftData code; when designing iOS app architecture (MVVM, Clean Architecture, coordinators, routing); when building UI that must meet Apple's Human Interface Guidelines, contrast, dark-mode, and Dynamic Type standards; when working with any Apple framework (SwiftData, Core Data, CloudKit, StoreKit, HealthKit, WidgetKit, App Intents, CoreML, Vision, ARKit, RealityKit, SceneKit, Metal, and 30+ more); or when targeting iOS, macOS, watchOS, tvOS, or visionOS. Also use fo

Mobile Development

Airbnb Swift Style

cassiewallace/airbnb-swift-style-agent-skill

Enforces the Airbnb iOS Swift Style Guide on Swift code. Use this skill any time the user wants to: review Swift code for style compliance, lint or audit an iOS codebase, apply Airbnb Swift conventions to new or existing code, understand why code violates Airbnb style rules, or get corrected rewrites of Swift snippets. Triggers on any request mentioning Swift code quality, iOS code review, Airbnb style, linting Swift files, or when the user pastes Swift code and asks for feedback, fixes, or a review. Also use when the user asks to "clean up" or "format" Swift code, or asks "is this good Swift?

Mobile Development

Android App Blackbox Competitive Analysis

poll-poll134/android-blackbox-analysis-skill

Use when users request Android competitor research, systematic feature or interface mapping, evidence screenshots, interaction coverage, comparison-ready product dossiers, or Android system-boundary verification without APK decompilation.

Mobile Development

Browse the most popular Claude skills, all mobile development skills, or write your own with the skills generator.