New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Pwa Development

by jwynia in jwynia/agent-skills

Implement Progressive Web App features for React and Svelte projects.

MITAuto-check passedBackend & APIs

Install Pwa Development

skills CLI
$ npx skills add jwynia/agent-skills --skill pwa-development -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install jwynia/agent-skills pwa-development --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/jwynia/agent-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/tech/frontend/pwa/pwa-development .claude/skills/pwa-development && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
pwa-development
GitHub stars
170
Token cost
~1.2k tokens
SKILL.md length
485 words
Files
14 (incl. scripts, assets)
Skills in repo
111
Repo updated
First seen
Licence
MIT

At a glance

Implement Progressive Web App features for React and Svelte projects.

  • Works in 6 steps: DevTools > Application > Manifest - Valid? → DevTools > Application > Service Workers… → DevTools > Application > Cache Storage -… → …
  • Asks to make a PWA
  • SKILL.md covers When to Use This Skill, Core Principle, Diagnostic States and Caching Strategies, plus 5 more sections
  • Runs TypeScript scripts from its folder; calls npm

What it does

Pwa Development is an agent skill from jwynia/agent-skills. Implement Progressive Web App features for React and Svelte projects. This skill should be used when the user asks to 'make a PWA', 'add offline support', 'create a service worker', 'fix caching issues', or wants installable web apps. Keywords: PWA, service worker, offline, manifest, caching, installable, Workbox, vite-pwa.

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 16 other files, including scripts and assets (for example `assets/service-worker-workbox.ts`, `data/caching-strategies.json` and `data/framework-patterns.json`). Compatibility notes: Works with React, Svelte/SvelteKit, Vite, Next.js.

It sits in Backend & APIs, covering Caching. It works with React, Svelte and iOS. The licence is MIT.

When your agent uses it

  • Asks to make a PWA
  • Add offline support
  • Create a service worker
  • Fix caching issues

Example prompts

  • “make a PWA”
  • “add offline support”
  • “create a service worker”
  • “/pwa-development”

Requirements

  • Node.js
  • Compatibility (from SKILL.md): Works with React, Svelte/SvelteKit, Vite, Next.js.

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. DevTools > Application > Manifest - Valid?
  2. DevTools > Application > Service Workers - Registered?
  3. DevTools > Application > Cache Storage - What's cached?
  4. DevTools > Network > Offline - Works offline?
  5. Lighthouse > PWA - Score and failures?
  6. iOS Safari - Test on actual device

What it can do on your machine

Read from SKILL.md and the folder at commit e02ec7e. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 4 files in scripts/ (TypeScript), which the agent can run.

    Shell commands in SKILL.md call:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Works with React, Svelte/SvelteKit, Vite, Next.js.

    From compatibility in the SKILL.md frontmatter.

Context cost

Pwa Development loads about 1.2k tokens when it runs. Until then it costs about 85 tokens; SKILL.md has 485 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~85
When it runs · the whole SKILL.md, loaded when a task matches
~1.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from jwynia/agent-skills at commit e02ec7e, republished under its MIT licence (© jwynia). 485 words, ~1,229 tokens.

Download SKILL.mdSave it as .claude/skills/pwa-development/SKILL.md (or your agent's skills folder). This skill also uses 13 other files; get the full folder from GitHub.
name
pwa-development
description
Implement Progressive Web App features for React and Svelte projects. This skill should be used when the user asks to 'make a PWA', 'add offline support', 'create a service worker', 'fix caching issues', or wants installable web apps. Keywords: PWA, service worker, offline, manifest, caching, installable, Workbox, vite-pwa.
compatibility
Works with React, Svelte/SvelteKit, Vite, Next.js.
license
MIT
metadata.author
jwynia
metadata.version
1.0
metadata.type
utility
metadata.mode
assistive
metadata.domain
development

PWA Development

Implement Progressive Web App features including service workers, caching strategies, offline support, and installation prompts for React and Svelte applications.

When to Use This Skill

Use this skill when:

  • Adding PWA capabilities to a web app
  • Implementing offline support
  • Creating service worker caching strategies
  • Debugging PWA installation issues
  • Handling iOS-specific PWA quirks

Do NOT use this skill when:

  • Building backend APIs
  • Working on requirements/design (use those skills first)
  • Need complex offline-first architecture (design first)

Core Principle

PWAs fail when offline behavior is an afterthought. A PWA is not "add service worker to existing app." It's a fundamental architectural decision about data flow, caching, and connectivity failure.

Diagnostic States

P0: No PWA Setup

Symptoms: No manifest.json, no service worker, online-only

Interventions:

  • Run scripts/manifest-generator.ts to create manifest
  • Add <link rel="manifest"> to HTML head
  • Generate minimal SW with scripts/sw-scaffolder.ts
P1: Basic Manifest Only

Symptoms: Manifest exists but SW missing, breaks offline

Key Questions:

  • What content MUST be available offline?
  • What should always be fresh (network-first)?

Interventions:

  • Use scripts/cache-strategy-advisor.ts
  • Implement app shell pattern
  • Add offline fallback page
P2: Caching Issues

Symptoms: Stale content, unexpected caching behavior

Interventions:

  • Audit with scripts/pwa-audit.ts
  • Map resources to strategies using data/caching-strategies.json
  • Add cache expiration and cleanup
P3: Update Problems

Symptoms: Users stuck on old versions, multiple refreshes needed

Interventions:

  • Implement skipWaiting/clients.claim appropriately
  • Add update notification UI (assets/update-prompt.tsx)
  • Handle "waiting" state properly
P4: Offline Data Gaps

Symptoms: User actions lost offline, no sync indicator

Interventions:

  • Implement IndexedDB for offline storage
  • Add Background Sync API
  • Create sync status UI
P5: iOS Issues

Symptoms: Works on Android, breaks on iOS

Interventions:

  • Review data/ios-quirks.json
  • Add apple-mobile-web-app meta tags
  • Handle storage eviction gracefully
P6: Production Ready

Indicators: Lighthouse PWA 100, works offline, updates cleanly

Show full SKILL.md (203 more words)Show less

Caching Strategies

StrategyUse ForBehavior
Cache FirstStatic assets, fontsServe from cache, update in background
Network FirstAPI data, user contentTry network, fall back to cache
Stale While RevalidateSemi-static contentServe stale, update cache for next time
Network OnlyAuth, real-time dataAlways network, no caching

Available Scripts

ScriptPurpose
manifest-generator.tsGenerate manifest.json
sw-scaffolder.tsGenerate service worker
cache-strategy-advisor.tsRecommend caching strategies
pwa-audit.tsValidate PWA configuration

Anti-Patterns

The Everything Cache

Precaching every asset - massive initial download. Fix: Precache only critical app shell. Runtime cache content.

The Immortal Cache

Never expiring caches - stale content forever. Fix: Cache versioning, delete old on activate, set max age.

The Silent Update

Forcing updates without notification. Fix: Notify user, let them choose when to refresh.

The iOS Afterthought

Building for Chrome, testing iOS last. Fix: Test iOS early. Accept iOS limitations.

Framework Quick Reference

React + Vite
bash
npm i -D vite-plugin-pwa
SvelteKit
bash
npm i -D @vite-pwa/sveltekit
Next.js
bash
npm i next-pwa

See data/framework-patterns.json for configuration.

Debugging Checklist

  1. DevTools > Application > Manifest - Valid?
  2. DevTools > Application > Service Workers - Registered?
  3. DevTools > Application > Cache Storage - What's cached?
  4. DevTools > Network > Offline - Works offline?
  5. Lighthouse > PWA - Score and failures?
  6. iOS Safari - Test on actual device
  • requirements-analysis - Determine offline requirements
  • system-design - PWA architecture decisions
  • react-pwa - React-specific PWA implementation

© jwynia, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 13 other files (scripts, assets) in skills/tech/frontend/pwa/pwa-development of jwynia/agent-skills.

  • SKILL.md
  • assets/manifest.json.template
  • assets/offline-page.html
  • assets/service-worker-workbox.ts
  • assets/update-prompt.svelte
  • assets/update-prompt.tsx
  • data/caching-strategies.json
  • data/framework-patterns.json
  • data/ios-quirks.json
  • data/manifest-options.json
  • scripts/cache-strategy-advisor.ts
  • scripts/manifest-generator.ts
  • scripts/pwa-audit.ts
  • scripts/sw-scaffolder.ts

Open the folder on GitHubat commit e02ec7e

Compare with similar skills

Pwa Development next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Pwa Development compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Pwa Development this skilljwynia/agent-skills170—~1.2kAutomated safety check: PassMIT
Wayfinder Developmentslimani-dev/muraqib1291 repos~622Automated safety check: PassMIT
Web3authWeb3Auth/web3auth-examples144—~1.4kAutomated safety check: PassMIT
Tanstack Query Best PracticesDeckardGer/tanstack-agent-skills2221 repos~1.2kAutomated safety check: PassMIT
Trpc PatternsFranciscoMoretti/chat-js1.2k—~288Automated safety check: PassApache-2.0
Apollo Clientapollographql/skills117—~1.9kAutomated safety check: PassMIT

Similar skills

  • Wayfinder Development

    slimani-dev/muraqib

    A skill your agent uses for Laravel Wayfinder which auto-generates typed functions for Laravel controllers and routes.

    129 GitHub starsUsed in 1 repo~622 tokens
    Backend & APIsAuto-check passed

  • Web3auth

    Web3Auth/web3auth-examples

    Integrates MetaMask Embedded Wallets (Web3Auth) for non-custodial wallets via social login or custom JWT (Firebase, Auth0, Cognito).

    144 GitHub stars~1.4k tokensUpdated 7 days ago
    Backend & APIsAuto-check passed

  • Tanstack Query Best Practices

    DeckardGer/tanstack-agent-skills

    TanStack Query (React Query) best practices for data fetching, caching, mutations, and server state management.

    222 GitHub starsUsed in 1 repo~1.2k tokens
    Backend & APIsAuto-check passed

  • Trpc Patterns

    FranciscoMoretti/chat-js

    Implement ChatJS tRPC routers, TanStack Query hooks, mutations, and cache invalidation.

    1.2k GitHub stars~288 tokensUpdated 2 days ago
    Backend & APIsAuto-check passed

  • Apollo Client

    apollographql/skills

    Guide for building React applications with Apollo Client 4.x.

    117 GitHub stars~1.9k tokensUpdated 3 days ago
    Backend & APIsAuto-check passed

  • Cache Components

    sangrokjung/claude-forge

    Expert guidance for Next.js Cache Components and Partial Prerendering (PPR).

    852 GitHub stars~3.7k tokensUpdated 1 mo ago
    Backend & APIsAuto-check passed

More from jwynia/agent-skills

All 111 skills in this repo

  • Devcontainer

    jwynia/agent-skills

    Diagnose devcontainer configuration problems and guide development environment setup.

    170 GitHub stars~1.2k tokensUpdated 7 mo ago
    Auto-check: notes

  • Frontend Design

    jwynia/agent-skills

    Create distinctive, production-grade frontend interfaces with high design quality.

    170 GitHub stars~3.2k tokensUpdated 7 mo ago
    Auto-check passed

  • Gitea Workflow

    jwynia/agent-skills

    Orchestrate agile development workflows for Gitea repositories using the tea CLI.

    170 GitHub stars~3.8k tokensUpdated 7 mo ago
    Auto-check passed

  • Godot Asset Generator

    jwynia/agent-skills

    Generate game assets using AI image generation APIs (DALL-E, Replicate, fal.ai) and prepare them for Godot.

    170 GitHub stars~3.8k tokensUpdated 7 mo ago
    Auto-check passed

  • Mastra Hono

    jwynia/agent-skills

    Develop AI agents, tools, and workflows with Mastra v1 Beta and Hono servers.

    170 GitHub stars~2.9k tokensUpdated 7 mo ago
    Auto-check passed

  • PPTX Generator

    jwynia/agent-skills

    Create and manipulate PowerPoint PPTX files programmatically.

    170 GitHub stars~3.1k tokensUpdated 7 mo ago
    Auto-check passed

Works with

Categories

Questions about Pwa Development

What does Pwa Development do?

Implement Progressive Web App features for React and Svelte projects. Pwa Development is an agent skill from jwynia/agent-skills. Implement Progressive Web App features for React and Svelte projects.

When should I use Pwa Development?

Pwa Development fits situations like: asks to make a PWA; add offline support; create a service worker; fix caching issues.

How do I install Pwa Development in Claude Code?

Run `npx skills add jwynia/agent-skills --skill pwa-development -a claude-code`. Or copy the skill folder (skills/tech/frontend/pwa/pwa-development in jwynia/agent-skills) into .claude/skills/pwa-development in your project. Claude Code loads it when a task matches its description.

How do I install Pwa Development in Codex?

Run `npx skills add jwynia/agent-skills --skill pwa-development -a codex`. Or copy the skill folder (skills/tech/frontend/pwa/pwa-development in jwynia/agent-skills) into .agents/skills/pwa-development in your project. Codex loads it when a task matches its description.

Can I use Pwa Development in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jwynia/agent-skills --skill pwa-development -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/pwa-development, .gemini/skills/pwa-development, .github/skills/pwa-development and .opencode/skills/pwa-development in your project.

What does Pwa Development need to run?

Going by SKILL.md and its folder, Pwa Development needs TypeScript for the scripts in its folder and the command-line tools its instructions call (npm). Our summary lists: Node.js. Compatibility (from SKILL.md): Works with React, Svelte/SvelteKit, Vite, Next.js..

Does Pwa Development access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Pwa Development safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Pwa Development use?

Pwa Development is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Pwa Development use?

About 1.2k tokens (SKILL.md is roughly 4.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Pwa Development?

Skills that share tags, products or a category with Pwa Development: Wayfinder Development (slimani-dev/muraqib, 129 stars), Web3auth (Web3Auth/web3auth-examples, 144 stars), Tanstack Query Best Practices (DeckardGer/tanstack-agent-skills, 222 stars) and Trpc Patterns (FranciscoMoretti/chat-js, 1.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Pwa Development?

jwynia (a GitHub user) maintains it in jwynia/agent-skills, which has 170 GitHub stars. The repository holds 111 skills in this directory. The repository was last updated on February 24, 2026.

Source: jwynia/agent-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.