mobile-web-app

Generates PWA files including manifest, service worker, and mobile meta tags from a static site.

2|Updated Aug 3, 2026
One-click install
npx skills add https://github.com/yandex-ai-studio/teen-museum-residence-2026 --skill mobile-web-app-yandex-ai-studio
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mobile-web-app
Source: https://github.com/yandex-ai-studio/teen-museum-residence-2026/tree/main/skills/mobile-web-app
Command: npx skills add https://github.com/yandex-ai-studio/teen-museum-residence-2026 --skill mobile-web-app-yandex-ai-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning a plain static website into an installable mobile web application requires correctly wiring together a web manifest, service worker, iOS and Android meta tags, safe-area-aware styles, and an app icon — a repetitive and error-prone setup that this Skill automates. ## Core Features & Use Cases - Complete PWA File Generation: Creates index.html, styles.css, app.js, manifest.webmanifest, sw.js, and icon.svg in a target directory with relative paths that work from subdirectories. - Offline-Ready Service Worker: Ships a network-with-cache-fallback service worker with versioned precaching so the app opens without a network connection. - Mobile-First Adaptive Layout: Produces styles with safe-area insets, 44px touch targets, an optional bottom tab bar, and a full-width desktop layout via media queries. - Use Case: After publishing a static site with the sourcecraft-sites skill, run this Skill with dir set to the cloned repository's site folder to replace the placeholder page with an installable app that users can add to their iPhone or Android home screen. ## Quick Start Turn my static site in the site folder into a mobile web app named "Museum Guide" with bottom navigation for Home, Catalog, and About sections.

Frequently Asked Questions about mobile-web-app

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn a static website into a PWA?

Add a web manifest with standalone display, register a service worker for offline caching, include mobile-web-app meta tags, and provide an app icon. This Skill generates all six required files (index.html, styles.css, app.js, manifest.webmanifest, sw.js, icon.svg) in a target directory.

How to make a website installable on iPhone home screen?

Include apple-mobile-web-app-capable and apple-mobile-web-app-title meta tags plus a manifest link, then open the site in Safari and use Share > Add to Home Screen. For a proper icon on iOS, provide a 180x180 PNG apple-touch-icon since iOS does not use SVG icons.

Does a service worker work on GitHub Pages or subdirectory hosting?

Yes, but all paths must be relative (./) rather than absolute from the domain root, and start_url and scope in the manifest must be set to ./. Absolute paths like /assets/ break when the site is served from a subdirectory.

Why is my service worker not registering?

Service workers only register over HTTPS or on localhost; opening the site over plain HTTP will fail silently. For local testing, run npx serve on the app directory and open it via localhost.

Why does my PWA still show the old version after an update?

The service worker cache is versioned, so you must bump the CACHE version string in sw.js and add any new files to the PRECACHE list. On iOS, changes to the manifest or icons require removing the app from the home screen and adding it again.

Does this Skill publish the app to a hosting platform?

No, it only generates the application files in the specified directory. Publishing is handled separately by the sourcecraft-sites skill or by manually enabling GitHub Pages, after which the app can be installed over HTTPS.