skills.rest
marnec
marnecCOMMUNITY
Explore all skills by this author →
GitHub

pwa-setup

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

1|Updated Nov 9, 2024
Search Tags:#typescript#manifest#nextjs#pwa#safe-area#install-prompt
One-click install
npx skills add https://github.com/marnec/ripple --skill pwa-setup-marnec
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pwa-setup
Source: https://github.com/marnec/ripple/tree/main/.claude/skills/pwa-setup
Command: npx skills add https://github.com/marnec/ripple --skill pwa-setup-marnec

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a ready-to-use set of patterns to configure a web app as a Progressive Web App, enabling installability, offline capabilities, and app-like behavior across devices.

Core Features & Use Cases

  • Web App Manifest setup for branding, icons, and start URL
  • Mobile meta tags and safe-area support for notched devices
  • Install prompt integration with a reusable hook and banner
  • End-to-end example integration with Next.js (TypeScript)
  • Suitable for teams building consumer web apps that want installable UX

Quick Start

Add a manifest, configure metadata and safe-area styles, and integrate the install prompt hook to enable install prompts.

Frequently Asked Questions about pwa-setup

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

FAQPage Schema
How do I make a Next.js web app installable like a native app?▼

To make a Next.js web app installable, you configure a web app manifest, root layout metadata, and an install prompt hook to enable native app-like installation and behavior across devices.

What is a web app manifest and why do I need it for a PWA?▼

A web app manifest provides branding, icons, and start URL configuration. It is needed for a PWA to define how the application appears and behaves when installed on a user's device.

How do I handle safe-area insets for notched devices in a TypeScript PWA?▼

To handle safe-area insets for notched devices in a TypeScript PWA, you apply safe-area CSS styles and mobile meta tags, ensuring your layout respects device boundaries and avoids visual obstruction.

Does this PWA setup require any specific dependencies or components?▼

This PWA setup does not require external dependencies or components. It provides a ready-to-use boilerplate pattern targeting TypeScript and Next.js frontend projects without added library overhead.

What's the best way to implement an install prompt banner in a web app?▼

The best way to implement an install prompt banner is using a reusable hook and banner component, capturing the native install event to present a contextual installation prompt to the user.

When should I add PWA boilerplate to my consumer web app?▼

You should add PWA boilerplate to your consumer web app when your team seeks an installable UX, offline capabilities, and app-like behavior across devices without building a separate native application.

Related Skills

Explore More Software Engineering Skills→
guideopsguideops

pwa-audit

Audit Next.js/PWA projects for compliance, performance, and security issues.

Community
Intermediate
travisjneumantravisjneuman
88

pwa-development

Configure Vite projects with PWA manifest, service workers, and offline capabilities.

Community
Intermediate
JocDLCJocDLC
4

add-mobile

Convert a Next.js web app into an installable PWA with push notifications.

Community
Advanced
fgarofalo56fgarofalo56
6

mobile-pwa

Develop Progressive Web Apps with service workers, push notifications, and app manifests.

Community
Advanced