Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

ranbot-ai/progressive-web-app

Name: progressive-web-app
Author: ranbot-ai

skills/progressive-web-app/SKILL.md

npx skillsauth add ranbot-ai/awesome-skills progressive-web-app

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

Progressive Web Apps (PWAs)

Overview

A Progressive Web App is a web application that uses modern browser capabilities to deliver a fast, reliable, and installable experience — even on unreliable networks. The three required pillars are:

HTTPS — Required in production for service workers to register (localhost is exempt for development).
Web App Manifest (manifest.json) — Makes the app installable and defines its appearance on device home screens.
Service Worker (sw.js) — A background script that intercepts network requests, manages caches, and enables offline functionality.

When to Use This Skill

Use when the user wants their web app to work offline or on unreliable networks.
Use when building a mobile-first web project where users should be able to install the app to their home screen.
Use when the user asks about caching strategies, service workers, or improving web app performance and resilience.
Use when the user mentions Workbox, web app manifests, background sync, or push notifications for the web.
Use when the user asks "can my website be installed like an app?" or "how do I make my site work offline?" — even if they don't use the word PWA.

Deliverables Checklist

Every PWA implementation must include these files at minimum:

[ ] index.html — Links manifest, registers service worker
[ ] manifest.json — Full app metadata and icon set
[ ] sw.js — Service worker with install, activate, and fetch handlers
[ ] app.js — Main app logic with SW registration and install prompt handling
[ ] offline.html — Fallback page shown when navigation fails offline (required — missing file will cause install to fail)

Step 1: Web App Manifest (`manifest.json`)

Defines how the app appears when installed. Must be linked from <head> via <link rel="manifest">.

{
  "name": "My Awesome PWA",
  "short_name": "MyPWA",
  "description": "A fast, offline-capable Progressive Web App.",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "portrait-primary",
  "background_color": "#ffffff",
  "theme_color": "#0055ff",
  "icons": [
    {
      "src": "/assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "screenshots": [
    {
      "src": "/assets/screenshots/desktop.png",
      "sizes": "1280x720",
      "type": "image/png",
      "form_factor": "wide"
    }
  ]
}

Key fields:

display: standalone hides browser UI; minimal-ui shows minimal controls; browser is standard tab.
purpose: "maskable" on icons enables adaptive icons on Android (safe zone matters — keep content in center 80%).
screenshots is optional but required for Chrome's enhanced install dialog on desktop.

Step 2: HTML Shell (`index.html`)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Awesome PWA</title>

  <!-- PWA manifest -->
  <link rel="manifest" href="/manifest.json">

  <!-- Theme color for browser chrome -->
  <meta name="theme-color" content="#0055ff">

  <!-- iOS-specific (Safari doesn't fully use manifest) -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="apple-mobile-web-app-title" content="MyPWA">
  <link rel="apple-touch-icon" href="/assets/icons/icon-192x192.png">

  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <div id="app">
    <header><h1>My PWA</h1></header>
    <main id="content">Loading...</main>
    <!-- Optional: install button, hidden by default -->
    <button id="install-btn" hidden>Install App</button>
  </div>
  <script src="/app.js"></script>
</body>
</html>

Step 3: Service Worker Registration & Install Prompt (`app.js`)

// ─── Service Worker Registration ───────────────────────────────────────────
if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('/sw.js');
      console.log('[App] SW registered, scope:', registration.scope);
    } catch (err) {
      console.error('[App] SW registration failed:', err);
    }
  });
}

// ─── Install Prompt (Add to Home Screen) ───────────────────────────────────
let deferredPrompt;
const installBtn = document.getElementById('install-btn'); // may be null if omitted

// Capture the browser's install prompt — it fires before the browser's own UI
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault(); // Stop automatic mini-infobar on mobile
  deferredPrompt = e;
  if (installBtn) installBtn.hidden = false; // Show your custom install button
});

if (installBt

ranbot-ai/progressive-web-app

skills/progressive-web-app/SKILL.md

Build Progressive Web Apps (PWAs) with offline support, installability, and caching strategies. Trigger whenever the user mentions PWA, service workers, web app manifests, Workbox, 'add to home screen

4 stars

development

Updated May 2, 2026

$ install --global

skillsauth

npx skillsauth add ranbot-ai/awesome-skills progressive-web-app

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: May 2, 2026, 5:29 AM142.8s1 file scanned

SKILL.md

name:: progressive-web-app
description:: Build Progressive Web Apps (PWAs) with offline support, installability, and caching strategies. Trigger whenever the user mentions PWA, service workers, web app manifests, Workbox, 'add to home screen
category:: Document Processing
source:: antigravity
tags:: [javascript, api, claude, ai, document, image, rag, cro]
url:: https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/progressive-web-app

Progressive Web Apps (PWAs)

Overview

HTTPS — Required in production for service workers to register (localhost is exempt for development).
Web App Manifest (manifest.json) — Makes the app installable and defines its appearance on device home screens.
Service Worker (sw.js) — A background script that intercepts network requests, manages caches, and enables offline functionality.

When to Use This Skill

Use when the user wants their web app to work offline or on unreliable networks.
Use when building a mobile-first web project where users should be able to install the app to their home screen.
Use when the user asks about caching strategies, service workers, or improving web app performance and resilience.
Use when the user mentions Workbox, web app manifests, background sync, or push notifications for the web.
Use when the user asks "can my website be installed like an app?" or "how do I make my site work offline?" — even if they don't use the word PWA.

Deliverables Checklist

Every PWA implementation must include these files at minimum:

[ ] index.html — Links manifest, registers service worker
[ ] manifest.json — Full app metadata and icon set
[ ] sw.js — Service worker with install, activate, and fetch handlers
[ ] app.js — Main app logic with SW registration and install prompt handling
[ ] offline.html — Fallback page shown when navigation fails offline (required — missing file will cause install to fail)

Step 1: Web App Manifest (`manifest.json`)

Defines how the app appears when installed. Must be linked from <head> via <link rel="manifest">.

{
  "name": "My Awesome PWA",
  "short_name": "MyPWA",
  "description": "A fast, offline-capable Progressive Web App.",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "portrait-primary",
  "background_color": "#ffffff",
  "theme_color": "#0055ff",
  "icons": [
    {
      "src": "/assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "screenshots": [
    {
      "src": "/assets/screenshots/desktop.png",
      "sizes": "1280x720",
      "type": "image/png",
      "form_factor": "wide"
    }
  ]
}

Key fields:

display: standalone hides browser UI; minimal-ui shows minimal controls; browser is standard tab.
purpose: "maskable" on icons enables adaptive icons on Android (safe zone matters — keep content in center 80%).
screenshots is optional but required for Chrome's enhanced install dialog on desktop.

Step 2: HTML Shell (`index.html`)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Awesome PWA</title>

  <!-- PWA manifest -->
  <link rel="manifest" href="/manifest.json">

  <!-- Theme color for browser chrome -->
  <meta name="theme-color" content="#0055ff">

  <!-- iOS-specific (Safari doesn't fully use manifest) -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="apple-mobile-web-app-title" content="MyPWA">
  <link rel="apple-touch-icon" href="/assets/icons/icon-192x192.png">

  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <div id="app">
    <header><h1>My PWA</h1></header>
    <main id="content">Loading...</main>
    <!-- Optional: install button, hidden by default -->
    <button id="install-btn" hidden>Install App</button>
  </div>
  <script src="/app.js"></script>
</body>
</html>

Step 3: Service Worker Registration & Install Prompt (`app.js`)

// ─── Service Worker Registration ───────────────────────────────────────────
if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('/sw.js');
      console.log('[App] SW registered, scope:', registration.scope);
    } catch (err) {
      console.error('[App] SW registration failed:', err);
    }
  });
}

// ─── Install Prompt (Add to Home Screen) ───────────────────────────────────
let deferredPrompt;
const installBtn = document.getElementById('install-btn'); // may be null if omitted

// Capture the browser's install prompt — it fires before the browser's own UI
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault(); // Stop automatic mini-infobar on mobile
  deferredPrompt = e;
  if (installBtn) installBtn.hidden = false; // Show your custom install button
});

if (installBt

Related Skills

ranbot-ai/nextjs-seo-indexing

testing

VerifiedTrustedCommunity

Fix SEO indexing issues, crawl budget problems, and Search Console coverage errors for Next.js apps. Covers canonical tags, noindex audits, sitemap health, static rendering, and internal linking.

5SKILL.mdUpdated Jun 2, 2026

ranbot-ai/nextjs-seo-indexing

ranbot-ai/moatmri

data-ai

VerifiedTrustedCommunity

Analyze AI disruption pressure across a business, map competitive exposure, and produce a 90-day defensive action plan.

5SKILL.mdUpdated Jun 2, 2026

ranbot-ai/skills/longbridge

tools

VerifiedTrustedCommunity

--- name: longbridge description: 125+ agent skills for Longbridge Securities — real-time quotes, charts, fundamentals, portfolio analysis, options, and more for HK/US/A-share/SG markets. Trilingual: Simplified Chinese, Traditional category: AI & Agents source: antigravity tags: [api, mcp, claude, ai, agent, security, cro] url: https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/longbridge --- # Longbridge ## Overview Longbridge is the official skill collection for Longbr

5SKILL.mdUpdated Jun 2, 2026

ranbot-ai/skills/longbridge

ranbot-ai/github-actions-advanced

tools

VerifiedTrustedCommunity

Design, debug, and harden GitHub Actions CI/CD workflows, including reusable workflows, matrix builds, self-hosted runners, OIDC authentication, caching, environments, secrets, and release automation.

5SKILL.mdUpdated Jun 2, 2026

ranbot-ai/github-actions-advanced

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/ranbot-ai/awesome-skills.git

# Copy into Claude Code skills folder (global)
cp -r awesome-skills/skills/progressive-web-app ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

ranbot-ai/awesome-skills

4 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT

Adoption

ranbot-ai/progressive-web-app

$ install --global

Security Scan Results

SKILL.md

Progressive Web Apps (PWAs)

Overview

When to Use This Skill

Deliverables Checklist

Step 1: Web App Manifest (manifest.json)

Step 2: HTML Shell (index.html)

Step 3: Service Worker Registration & Install Prompt (app.js)

Related Skills

ranbot-ai/nextjs-seo-indexing

ranbot-ai/moatmri

ranbot-ai/skills/longbridge

ranbot-ai/github-actions-advanced

ranbot-ai/progressive-web-app

$ install --global

Security Scan Results

SKILL.md

Progressive Web Apps (PWAs)

Overview

When to Use This Skill

Deliverables Checklist

Step 1: Web App Manifest (manifest.json)

Step 2: HTML Shell (index.html)

Step 3: Service Worker Registration & Install Prompt (app.js)

Related Skills

ranbot-ai/nextjs-seo-indexing

ranbot-ai/moatmri

ranbot-ai/skills/longbridge

ranbot-ai/github-actions-advanced

Step 1: Web App Manifest (`manifest.json`)

Step 2: HTML Shell (`index.html`)

Step 3: Service Worker Registration & Install Prompt (`app.js`)

Step 1: Web App Manifest (`manifest.json`)

Step 2: HTML Shell (`index.html`)

Step 3: Service Worker Registration & Install Prompt (`app.js`)