Skip to content
Skill Authoring
Skill

/progressive-web-app

Build progressive web apps using service workers, web manifest, offline support, and installability. Use when creating app-like web experiences.

From plugin
useful-ai-prompts
309200 skills
Install
$ npx -y skills add aj-geddes/useful-ai-prompts --skill progressive-web-app --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/progressive-web-app

Context preview

The summary Claude sees to decide when to auto-load this skill.

Build progressive web apps using service workers, web manifest, offline support, and installability. Use when creating app-like web experiences.

SKILL.md

progressive-web-app.SKILL.md
name: progressive-web-app
description: >
  Build progressive web apps using service workers, web manifest, offline
  support, and installability. Use when creating app-like web experiences.

Progressive Web App

Table of Contents

  • [Overview](#overview)
  • [When to Use](#when-to-use)
  • [Quick Start](#quick-start)
  • [Reference Guides](#reference-guides)
  • [Best Practices](#best-practices)

Overview

Build progressive web applications with offline support, installability, service workers, and web app manifests to deliver app-like experiences in the browser.

When to Use

  • App-like web experiences
  • Offline functionality needed
  • Mobile installation required
  • Push notifications
  • Fast loading experiences

Quick Start

Minimal working example:

// public/manifest.json
{
  "name": "My Awesome App",
  "short_name": "AwesomeApp",
  "description": "A progressive web application",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "portrait-primary",
  "background_color": "#ffffff",
  "theme_color": "#007bff",
  "icons": [
    {
      "src": "/images/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/images/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the `references/` directory:

| Guide | Contents | |---|---| | [Web App Manifest](references/web-app-manifest.md) | Web App Manifest | | [Service Worker Implementation](references/service-worker-implementation.md) | Service Worker Implementation | | [Install Prompt and App Installation](references/install-prompt-and-app-installation.md) | Install Prompt and App Installation | | [Offline Support with IndexedDB](references/offline-support-with-indexeddb.md) | Offline Support with IndexedDB | | [Push Notifications](references/push-notifications.md) | Push Notifications |

Best Practices

✅ DO

  • Follow established patterns and conventions
  • Write clean, maintainable code
  • Add appropriate documentation
  • Test thoroughly before deploying

❌ DON'T

  • Skip testing or validation
  • Ignore error handling
  • Hard-code configuration values
Read more
Ships withuseful-ai-prompts

488 production-ready AI prompts, all following a standardized template with validated quality gates. Transform ChatGPT, Claude, and other AI assistants into expert consultants.

Get the whole plugin