with one click
with one click
[HINT] Download the complete skill directory including SKILL.md and all related files
| name | pwa |
| description | Triggers on /pwa only. |
Set up Progressive Web App support for the project.
If src-tauri/ exists or CLAUDE.md lists Type: tauri, print:
/pwa - skipped, Tauri desktop apps don't use PWA.
And stop.
If the user passed skipVerification, skip this step entirely and proceed to Step 2.
If manifest.json exists, sw.js exists, and index.html contains the manifest link + service worker registration script, print:
/pwa - already complete, skipping.
And stop.
Read the following to fill manifest fields:
CLAUDE.md - project type and name.portfolio-data/metadata.json - title, shortDescriptionassets/images/favicon.png and favicon.ico - for iconsCreate manifest.json in the project root:
{
"name": "",
"short_name": "",
"description": "",
"start_url": "/",
"display": "standalone",
"background_color": "#16151f",
"theme_color": "#9d7dfc",
"icons": [
{
"src": "assets/images/favicon.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "assets/images/favicon.svg",
"sizes": "any",
"type": "image/svg+xml"
}
]
}
Fill fields from gathered context:
name - full project titleshort_name - max 12 chars, used on home screendescription - from shortDescription in metadata.json or inferredbackground_color and theme_color - use void theme defaults above, user can update laterOnly include SVG icon entry if assets/images/favicon.svg exists.
Create sw.js in the project root:
const CACHE_NAME = "v1";
const ASSETS = [
"/",
"/index.html",
"/src/styles/style.css",
"/src/scripts/script.js",
"/assets/images/favicon.png",
"/manifest.json",
];
self.addEventListener("install", (e) => {
e.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS)));
});
self.addEventListener("fetch", (e) => {
e.respondWith(
caches.match(e.request).then((cached) => cached || fetch(e.request)),
);
});
Replace the ASSETS list with the actual files that exist in the project.
Add inside <head> if missing:
<link rel="manifest" href="manifest.json" />
<meta name="theme-color" content="#9d7dfc" />
Add before </body> if missing:
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js");
}
</script>
Tell the user what was created and remind them:
theme_color and background_color in manifest.json can be updated to match their preferred theme/pwa again if the file list changes significantlyDo not commit - the user handles that.