pwa-setup
Sets up essential PWA features including manifest, responsive metadata, and installation prompts.
Install
mkdir -p .claude/skills/pwa-setup && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/5545" && unzip -o skill.zip -d .claude/skills/pwa-setup && rm skill.zipInstalls to .claude/skills/pwa-setup
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Progressive Web App setup with manifest, mobile meta tags, safe area handling for notched devices, and install prompts for app-like browser experience.Key capabilities
- →Implement web app manifest
- →Configure mobile meta tags
- →Handle safe areas for notched devices
- →Implement install prompt hooks
- →Create install banner components
How it works
It provides code patterns for manifest files, layout metadata, CSS safe area handling, and React hooks for install prompts.
Inputs & outputs
When to use pwa-setup
- →Setting up installable web app features
- →Configuring mobile device meta tags
- →Implementing safe area support for mobile devices
About pwa-setup
Adds required configurations for PWAs, such as safe area handling for notched screens, mobile-responsive meta tags, and install capability prompts.
Progressive Web App setup with manifest, mobile meta tags, safe area handling for notched devices, and install prompts for app-like browser experience.
When not to use it
- →Native mobile app development
- →Desktop-only web applications
Prerequisites
Limitations
- →Requires manual icon asset creation
- →Requires testing on actual mobile devices
How it compares
This approach provides a complete set of boilerplate code for app-like browser experiences rather than just manifest generation.
Compared to similar skills
pwa-setup side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| pwa-setup (this skill) | 1 | 6mo | No flags | Intermediate |
| flutter-development | 1,555 | 5mo | No flags | Intermediate |
| frontend-design | 481 | 2mo | No flags | Advanced |
| webapp-testing | 353 | 3mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by dadbodgeoff
View all by dadbodgeoff →You might also like
flutter-development
aj-geddes
Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.
frontend-design
anthropics
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
webapp-testing
anthropics
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
screenshot-to-code
OneWave-AI
Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.
zustand
lobehub
Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.