Skip to main content
affpapa.org
RU EN
skill

progressive-web-app · davila7 — Claude Code skill: what it does, how to install

Guides Claude Code in turning web projects into installable PWAs with offline caching, web app manifests, and custom install prompts.

Install into Claude Code · claude-code-templates All methods and platforms ↓ 
npx claude-code-templates@latest --skill web-development/progressive-web-app
Open on GitHub

What progressive-web-app does

This skill provides instructions for generating Progressive Web App setups inside web projects. It helps the assistant assemble the base file structure, including index.html, manifest.json, the service worker script sw.js, and the registration module app.js. The model learns to pre-cache the application shell and structure cache versioning properly.

The instructions handle custom installation buttons by capturing the beforeinstallprompt browser event. For icons, it configures maskable formats to adapt to mobile screens, while adding meta tags for iOS Safari compatibility. Deployments strictly demand HTTPS for service worker registration, although development works on localhost. Leaving out offline.html breaks the installation flow.

What it helps with

  • Configure manifest.json with adaptive maskable icons
  • Implement app shell caching in service worker sw.js
  • Handle beforeinstallprompt to trigger install flows manually
  • Supply a fallback offline.html screen when network requests fail

Example prompts for the agent

  • Convert this project into an installable PWA with offline caching
  • Generate a web app manifest and service worker registration script
  • Add a custom add-to-home-screen prompt button for mobile users

How to install progressive-web-app

1claude-code-templates

npx claude-code-templates@latest --skill web-development/progressive-web-app

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill progressive-web-app -a claude-code

3Manually: put the files in place

~/.claude/skills/progressive-web-app/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/progressive-web-app/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about progressive-web-app

How to install progressive-web-app in Claude Code?

Run npx claude-code-templates@latest --skill web-development/progressive-web-app in your project terminal.

What does progressive-web-app do?

It instructs the coding assistant how to scaffold Progressive Web Apps with service workers, manifest metadata, and offline fallbacks.

What happens if offline.html is missing?

The PWA setup fails because the service worker installation routine requires offline.html in its pre-cached app shell list.

Similar skills

All skills for Frontend and UI →

progressive-web-app by other authors comes first.

progressive-web-app aj-geddes Guides your agent through building a progressive web app: manifest, service worker, offline mode and installability. CX Codex +1 522installs progressive-web-app secondsky A skill for building installable web apps: manifest, service worker, offline support and an install prompt. CX Codex +1 500installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set804

The whole set →
feature-design-assistant Turns a rough feature idea into a design and spec by asking you structured questions. Useful before a large change to the codebase. 247installs agent-messaging Enables cryptographically signed messaging between AI agents via the Agent Messaging Protocol. Useful when delegating work or managing an agent inbox. 247installs scope-guard A Claude Code hook that warns when files outside a specification scope are modified. 247installs setup-rate-limiting A slash command that inspects your project and builds a rate limiting setup: algorithms, per-user quotas, counter storage. 247installs notify-before-bash Prints a terminal notice before Claude Code executes any Bash command. Useful for keeping an eye on shell activity during coding sessions. 243installs meeting-insights-analyzer Reads your meeting transcripts and points out where you dodge conflict, lean on filler words, or talk over everyone else. 242installs autonomous-agent-patterns This skill outlines how autonomous coding agents can plan work, call tools, and involve a person in decisions. Use it when shaping an agent’s architecture or tool APIs. 239installs load-llms-txt Loads external documentation from llms.txt or a custom source and adds project context. Useful when an agent needs reference material during coding. 239installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor