skills.rest
kylezhao1026
kylezhao1026COMMUNITY
Explore all skills by this author →
GitHub

pwa-setup

Configure a Progressive Web App with manifest, meta tags, safe-area CSS, and install prompt.

Updated Jan 24, 2026
Search Tags:#manifest#pwa#responsive-design#web-app#notched-devices#install-prompt
One-click install
npx skills add https://github.com/kylezhao1026/hard_baby --skill pwa-setup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pwa-setup
Source: https://github.com/kylezhao1026/hard_baby/tree/main/pwa-setup
Command: npx skills add https://github.com/kylezhao1026/hard_baby --skill pwa-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Progressive Web App setup provides an installable, app-like browser experience with reliable performance on mobile and desktop.

Core Features & Use Cases

  • Web App Manifest configuration with icons and start_url
  • Mobile meta tags and theme/color customization for a native feel
  • Safe areas handling for notched devices
  • Install prompt flow to guide users to install the app
  • Use cases: dashboards, marketing sites, and internal tools with offline capabilities

Quick Start

  1. Create and configure a Web App Manifest (or manifest.ts) with icons and start_url.
  2. Add mobile-friendly meta tags (viewport, theme_color) and ensure responsive styles.
  3. Implement safe-area CSS to support devices with notches or rounded corners.
  4. Implement a custom install prompt flow and trigger it from a user action (e.g., a button).
  5. Run the app locally, serve over HTTPS, and test "Add to Home Screen" on mobile and PWA usability.

Frequently Asked Questions about pwa-setup

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

FAQPage Schema
How do I configure a web app manifest for a Progressive Web App?▼

To set up a Progressive Web App, configure a web app manifest with icons and start_url, add mobile-friendly meta tags like viewport and theme_color, and implement responsive styles for a native feel.

How do I handle safe areas for notched devices in responsive web design?▼

Handling safe areas for notched devices in responsive design requires implementing safe-area CSS. This ensures your web app's content respects physical boundaries like rounded corners and notches on mobile hardware.

How do I implement an install prompt flow for a web app?▼

Implementing an install prompt flow for a web app involves capturing browser install events and triggering a custom prompt from a user action like a button click. This guides users to add the app to their home screen.

Does this PWA setup work with Next.js and TypeScript?▼

Yes, this PWA setup works with Next.js and TypeScript. It uses standard web APIs and frontend tooling examples to implement the manifest, meta tags, safe-area CSS, and the install prompt flow.

What are the limitations of using a Progressive Web App for SaaS sites?▼

Limitations of using a Progressive Web App for SaaS sites include requiring an HTTPS environment for installation and testing. You must also manually implement custom install prompts to guide users across different mobile platforms.

Related Skills

Explore More Software Engineering Skills→
marnecmarnec
1

pwa-setup

Configure Next.js TypeScript apps with PWA manifest, safe-area CSS, and install-prompt hook.

Community
Intermediate
dadbodgeoffdadbodgeoff
783

pwa-setup

Configure PWA features for TypeScript and Next.js web applications.

Community
Intermediate
raphaelmansraphaelmans

pwa-development

Integrate service workers, caching strategies, and Workbox for offline-capable PWAs.

Community
Advanced
hendrax5hendrax5

mobile-app

Build cross-platform mobile apps with React Native, Expo, and Flutter.

Community
Intermediate