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

by spinspire in spinspire/pocketbase-sveltekit-starter

A skill your agent uses when the user asks to make a site installable, turn it into a PWA, add a service worker, add a web app manifest, enable "add to home screen", or support offline.

MITAuto-check passedFrontend & Design

Install Pwa

skills CLI
$ npx skills add spinspire/pocketbase-sveltekit-starter --skill pwa -a claude-code

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

GitHub CLI
$ gh skill install spinspire/pocketbase-sveltekit-starter pwa --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/spinspire/pocketbase-sveltekit-starter.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/pwa .claude/skills/pwa && 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
GitHub stars
511
Token cost
~1.9k tokens
SKILL.md length
593 words
Files
1
Skills in repo
8
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when the user asks to make a site installable, turn it into a PWA, add a service worker, add a web app manifest, enable "add to home screen", or support offline.

  • Works in 3 steps: HTTPS — required for service workers… → Web app manifest — name, icons,… → Service worker — background script;…
  • The user asks to make a site installable
  • SKILL.md covers When to Use, The Three Pillars, Quick Reference and Service Worker, plus 7 more sections
  • Calls magick, bun and curl

What it does

Pwa is an agent skill from spinspire/pocketbase-sveltekit-starter. Use when the user asks to make a site installable, turn it into a PWA, add a service worker, add a web app manifest, enable "add to home screen", or support offline. Also use when adding favicon/app icons, iOS home-screen support (apple-mobile-web-app meta tags), or verifying PWA installability.

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering On-page SEO. It works with iOS and SvelteKit. The repository describes itself as: a starter project to build a SvelteKit frontend with PocketBase backend. The licence is MIT.

When your agent uses it

  • The user asks to make a site installable
  • Turn it into a PWA
  • Add a service worker
  • Add a web app manifest

Example prompts

  • “add to home screen”
  • “/pwa”

Workflow steps

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

  1. HTTPS — required for service workers (localhost exempt in dev).
  2. Web app manifest — name, icons, start_url, display → makes it installable.
  3. Service worker — background script; active SW + valid manifest unlocks the install prompt.

What it can do on your machine

Read from SKILL.md and the folder at commit 66f6dee. 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

    Shell commands in SKILL.md call:

    • magick
    • bun
    • curl

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

  • Network

    No URLs in SKILL.md. Its commands use curl, 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.

Context cost

Pwa loads about 1.9k tokens when it runs. Until then it costs about 75 tokens; SKILL.md has 593 words of instructions outside code blocks.

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

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); files beside SKILL.md are not scanned.

SKILL.md

The full file from spinspire/pocketbase-sveltekit-starter at commit 66f6dee, republished under its MIT licence (© spinspire). 593 words, ~1,919 tokens.

Download SKILL.mdSave it as .claude/skills/pwa/SKILL.md (or your agent's skills folder).
name
pwa
description
Use when the user asks to make a site installable, turn it into a PWA, add a service worker, add a web app manifest, enable "add to home screen", or support offline. Also use when adding favicon/app icons, iOS home-screen support (apple-mobile-web-app meta tags), or verifying PWA installability.
license
MIT
authors
SpinSpire Team

PWA Installability

Make a web app installable and iOS-friendly with a minimal service worker. Default posture is network-only (no caching) unless the app needs offline — pick a strategy deliberately, never by default.

When to Use

  • "Make it installable / a PWA"
  • "Add a service worker" / "add a web manifest" / "add to home screen"
  • "Works offline?" or "works on iPhone?"

The Three Pillars

  1. HTTPS — required for service workers (localhost exempt in dev).
  2. Web app manifest — name, icons, start_url, display → makes it installable.
  3. Service worker — background script; active SW + valid manifest unlocks the install prompt.

Quick Reference

AssetWhere it goesNotes
manifest.webmanifestsite root (static/ for SvelteKit)name, short_name, start_url, scope, display standalone, theme/background color, icons 192+512 + maskable
favicon-32/48/64.pngrootbrowser tab icons; also apple-touch-icon.png 180px for iOS
icon-192.png, icon-512.pngrootrequired by Chrome for install
icon-maskable-512.pngrootfull-bleed background, content in center 80% safe zone
sw.jsroot (static/ for SvelteKit)register from client code; served at site root for correct scope
offline.html (optional)rootfallback for failed navigations if offline support is wanted

Service Worker

Default: network-only (no caching)
js
self.addEventListener('install', () => {
	self.skipWaiting();
});

self.addEventListener('activate', (event) => {
	event.waitUntil(clients.claim());
});

self.addEventListener('fetch', (event) => {
	event.respondWith(fetch(event.request));
});

This makes the app installable and always-fresh. Use for apps where data lives server-side / in a spreadsheet and serving stale data is wrong.

Offline fallback (add only if offline support is requested)
js
const CACHE = 'capstone-v1';

self.addEventListener('install', (event) => {
	event.waitUntil(
		caches.open(CACHE).then((c) => c.addAll(['/', '/offline.html', '/manifest.webmanifest', '/icon-192.png', '/icon-512.png']))
	);
	self.skipWaiting();
});

self.addEventListener('activate', (event) => {
	event.waitUntil(
		caches.keys().then((keys) => Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)))).then(() => clients.claim())
	);
});

self.addEventListener('fetch', (event) => {
	const url = new URL(event.request.url);
	if (event.request.mode === 'navigate') {
		event.respondWith(fetch(event.request).catch(() => caches.match('/offline.html')));
		return;
	}
	if (url.origin === location.origin && ['css', 'js', 'svg', 'png', 'jpg', 'woff2'].some((ext) => url.pathname.endsWith('.' + ext))) {
		event.respondWith(caches.match(event.request).then((cached) => cached || fetch(event.request).then((res) => { const clone = res.clone(); caches.open(CACHE).then((c) => c.put(event.request, clone)); return res; })));
		return;
	}
	event.respondWith(fetch(event.request));
});

Caching strategy decision table

StrategyBehaviorUse for
Network onlyAlways hit network, never cacheAuth, live/volatile data, spreadsheets, anything where stale is wrong. Default.
Cache firstServe from cache, update in backgroundStatic assets: css/js, fonts, images
Network firstTry network, fall back to cacheHTML pages, API reads where offline read > error
Stale while revalidateServe stale instantly, refresh cacheSemi-static content, lists

When caching, version the cache name and delete old caches in activate. Never cache POST or auth'd API responses.

Registration (client side)

Register on mount, not at parse time, so it never delays first paint:

js
if ('serviceWorker' in navigator) {
	navigator.serviceWorker.register('/sw.js').catch((err) => console.warn('SW registration failed', err));
}

In SvelteKit, put this in +layout.svelte onMount. The SW must be at the site root (/sw.js) — static/sw.js ships there via adapter-static.

Manifest

json
{
  "name": "Capstone — Construction business operations",
  "short_name": "Capstone",
  "description": "One-line description.",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#faf9f6",
  "theme_color": "#1f2933",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Link it in the HTML head: <link rel="manifest" href="/manifest.webmanifest" />.

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

Icons from source images

  • Source should be square (e.g. 768×768). Crop/resize with ImageMagick:
    bash
    magick src.png -resize 192x192 icon-192.png
magick src.png -resize 512x512 icon-512.png
magick -size 512x512 xc:"#1f2933" \( src.png -resize 60% +repage \) -gravity center -composite icon-maskable-512.png
  • Maskable icons need a full-bleed background with the logo at ~60% inside the center safe zone.

iOS support (Safari / Add to Home Screen)

iOS ignores theme_color and needs legacy meta tags:

html
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="AppName" />
<meta name="theme-color" content="#1f2933" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

Caveats:

  • iOS has no beforeinstallprompt — users install via Share → Add to Home Screen.
  • iOS may evict service workers after ~7 days of inactivity (Intelligent Tracking Prevention) — expect re-registration on next visit.

Pre-ship audit

  1. bun run check (or project typecheck) and build pass.
  2. Start dev server, then verify with agent-browser:
    • manifest + SW reachable: curl -s -o /dev/null -w "%{http_code}" localhost:5173/manifest.webmanifest → 200
    • all icon assets return 200 (favicon-32/48/64, apple-touch-icon, icon-192/512, icon-maskable-512, sw.js)
    • SW registered + active:
      agent-browser eval "navigator.serviceWorker.getRegistration().then(r => ({ scope: r?.scope, active: r?.active?.state }))"
    • links present in head: rel=icon, rel=apple-touch-icon, rel=manifest, meta[name=theme-color]
  3. Production requires HTTPS (Cloudflare Pages et al. provide it). Local dev on http://localhost is exempt for SW registration.
  4. Optional: run Lighthouse PWA audit in Chrome DevTools.

Common Mistakes

  • Registering SW in <head> or at module top-level — delays first paint; use onMount.
  • Caching auth'd or volatile API responses — serves stale or broken data. Keep those network-only.
  • SW not at root — /sw.js only controls the scope beneath it; a SW in /js/sw.js won't control /.
  • Skipping maskable icon — Android adaptive icons will crop the logo without one.
  • Cache name never versioned / old caches never deleted — disk fills and stale assets linger.
  • Forgetting iOS meta tags — app opens in Safari tab instead of standalone, wrong status bar.

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

Files

Just SKILL.md in .agents/skills/pwa of spinspire/pocketbase-sveltekit-starter.

Open the folder on GitHubat commit 66f6dee

Compare with similar skills

Pwa 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 compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Pwa this skillspinspire/pocketbase-sveltekit-starter511—~1.9kAutomated safety check: PassMIT
Responsive CSSTheDecipherist/claude-code-mastery-project-starter-kit338—~2.2kAutomated safety check: PassMIT
Turnstile Spincloudflare/skills3k4 repos~7.2kAutomated safety check: NotesApache-2.0
Sanity Best Practicesrobotostudio/turbo-start-sanity183—~940Automated safety check: PassMIT
Find Software Developerjeremylongshore/tons-of-skills-marketplace2.8k—~3.7kAutomated safety check: NotesMIT
Site ArchitectureAvdLee/RocketSimApp80511 repos~3.3kAutomated safety check: PassCustom licence

Similar skills

  • Responsive CSS

    TheDecipherist/claude-code-mastery-project-starter-kit

    Writing CSS and markup that works on phone and desktop at the same time, the responsive failures Claude repeats.

    338 GitHub stars~2.2k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • Turnstile Spin

    cloudflare/skills

    Official

    Set up, repair, or migrate to Cloudflare Turnstile bot verification in an existing frontend and backend, including server-side Siteverify.

    3k GitHub starsUsed in 4 repos~7.2k tokens
    Frontend & DesignAuto-check: notes

  • Sanity Best Practices

    robotostudio/turbo-start-sanity

    Sanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, Studio structure, localization, migrations, Sanity Functions, Blueprints, and…

    183 GitHub stars~940 tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • Find Software Developer

    jeremylongshore/tons-of-skills-marketplace

    A skill your agent uses whenever the user wants to find, shortlist, vet, or enrich US software development firms — custom software, web development, mobile app development, backend/API development…

    2.8k GitHub stars~3.7k tokensUpdated today
    Frontend & DesignAuto-check: notes

  • Site Architecture

    AvdLee/RocketSimApp

    When the user wants to plan, map, or restructure their website's page hierarchy, navigation, URL structure, or internal linking.

    805 GitHub starsUsed in 11 repos~3.3k tokens
    Marketing & SEOAuto-check passed

  • Mobile Native

    leepokai/Codync

    Make a web app feel native on a phone — the small CSS and meta-tag fixes that separate "a website in a browser" from something that feels installed.

    232 GitHub starsUsed in 1 repo~4.2k tokens
    MobileAuto-check passed

More from spinspire/pocketbase-sveltekit-starter

All 8 skills in this repo

  • Bun Runtime

    spinspire/pocketbase-sveltekit-starter

    Bun as runtime, package manager, bundler, and test runner. An agent skill from spinspire/pocketbase-sveltekit-starter.

    511 GitHub starsUsed in 5 repos~653 tokens
    Auto-check: notes

  • Pb API

    spinspire/pocketbase-sveltekit-starter

    Operate PocketBase via its REST API. An agent skill from spinspire/pocketbase-sveltekit-starter.

    511 GitHub stars~562 tokensUpdated 1 mo ago
    Auto-check: notes

  • Pb Extend

    spinspire/pocketbase-sveltekit-starter

    Extend PocketBase with custom hooks and routes in JS or Go. An agent skill from spinspire/pocketbase-sveltekit-starter.

    511 GitHub stars~689 tokensUpdated 1 mo ago
    Auto-check: notes

  • Frontend Design

    spinspire/pocketbase-sveltekit-starter

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

    511 GitHub starsUsed in 1 repo~2.6k tokens
    Auto-check passed

  • Code Reuse

    spinspire/pocketbase-sveltekit-starter

    A skill your agent uses when building a UI component, PocketBase hook, page, or app feature and there is proven code to copy from the reference repos.

    511 GitHub stars~2.5k tokensUpdated 1 mo ago
    Auto-check: notes

  • Docker

    spinspire/pocketbase-sveltekit-starter

    Docker Compose conventions — short service names, no root, no host ports in base compose, override files for local customisations.

    511 GitHub stars~1.1k tokensUpdated 1 mo ago
    Auto-check: notes

Works with

Categories

Questions about Pwa

What does Pwa do?

A skill your agent uses when the user asks to make a site installable, turn it into a PWA, add a service worker, add a web app manifest, enable "add to home screen", or support offline. Pwa is an agent skill from spinspire/pocketbase-sveltekit-starter. Use when the user asks to make a site installable, turn it into a PWA, add a service worker, add a web app manifest, enable "add to home screen", or support offline.

When should I use Pwa?

Pwa fits situations like: the user asks to make a site installable; turn it into a PWA; add a service worker; add a web app manifest.

How do I install Pwa in Claude Code?

Run `npx skills add spinspire/pocketbase-sveltekit-starter --skill pwa -a claude-code`. Or copy the skill folder (.agents/skills/pwa in spinspire/pocketbase-sveltekit-starter) into .claude/skills/pwa in your project. Claude Code loads it when a task matches its description.

How do I install Pwa in Codex?

Run `npx skills add spinspire/pocketbase-sveltekit-starter --skill pwa -a codex`. Or copy the skill folder (.agents/skills/pwa in spinspire/pocketbase-sveltekit-starter) into .agents/skills/pwa in your project. Codex loads it when a task matches its description.

Can I use Pwa 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 spinspire/pocketbase-sveltekit-starter --skill pwa -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, .gemini/skills/pwa, .github/skills/pwa and .opencode/skills/pwa in your project.

What does Pwa need to run?

Going by SKILL.md and its folder, Pwa needs the command-line tools its instructions call (magick, bun and curl).

Does Pwa access the network?

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

Is Pwa 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. Review the folder before installing.

What licence does Pwa use?

Pwa 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 use?

About 1.9k tokens (SKILL.md is roughly 7.7k 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?

Skills that share tags, products or a category with Pwa: Responsive CSS (TheDecipherist/claude-code-mastery-project-starter-kit, 338 stars), Turnstile Spin (cloudflare/skills, 3k stars), Sanity Best Practices (robotostudio/turbo-start-sanity, 183 stars) and Find Software Developer (jeremylongshore/tons-of-skills-marketplace, 2.8k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Pwa?

spinspire (a GitHub organization) maintains it in spinspire/pocketbase-sveltekit-starter, which has 511 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on August 22, 2026.

Source: spinspire/pocketbase-sveltekit-starter on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.