skills.rest
AeyeOps
AeyeOpsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

react-pwa-designer

Design React Progressive Web Apps with offline-first capabilities and shadcn/ui integration.

3|2|Updated Jan 23, 2026
Search Tags:#workflow#design#react#offline#pwa#shadcn
One-click install
npx skills add https://github.com/AeyeOps/aeo-skill-marketplace --skill react-pwa-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-pwa-designer
Source: https://github.com/AeyeOps/aeo-skill-marketplace/tree/main/aeo-ux-design/skills/react-pwa-designer
Command: npx skills add https://github.com/AeyeOps/aeo-skill-marketplace --skill react-pwa-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The React PWA Designer provides a structured approach for planning, designing, and implementing modern React Progressive Web Apps that work offline, install cleanly, and adapt to various devices.

Core Features & Use Cases

  • SuperDesign-guided workflow: a four-phase process (Discovery, Design, PWA, and Development Best Practices) to shape architecture, components, and deployment.
  • shadcn/ui integration guidance: helps discover and implement shadcn/ui components with production-grade patterns.
  • PWA fundamentals & accessibility: covers manifest, service workers, offline strategies, performance optimization, and WCAG AA accessibility patterns. Use case: A frontend team designing a new PWA can follow this skill to map components, apply design patterns, implement PWA features, and validate accessibility.

Quick Start

Review the reference materials under reference/ and start with the layout design, then proceed to theme and animation steps using the SuperDesign workflow. Initialize a PWA-ready React project skeleton and iterate on component implementations with shadcn UI.

Frequently Asked Questions about react-pwa-designer

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

FAQPage Schema
How do I build a React PWA with offline-first capabilities?▼

You can build an offline-first React PWA by following a four-phase workflow covering discovery, design, PWA configuration, and development best practices to structure architecture, implement service workers, and validate accessibility.

What is the best way to integrate shadcn/ui into a Progressive Web App?▼

The best way to integrate shadcn/ui into a Progressive Web App is to use production-grade implementation patterns during the component design phase, ensuring responsive interfaces adapt correctly across various devices while maintaining PWA offline strategies.

How do I configure a service worker and PWA manifest for React applications?▼

Configuring a PWA manifest and service worker for React applications requires defining manifest parameters for clean installation and implementing service worker offline strategies, guided by reference materials and performance optimization techniques.

Can I use this workflow to plan responsive layouts and validate WCAG AA accessibility for PWAs?▼

Yes, you can use this workflow to plan responsive layouts and validate WCAG AA accessibility for PWAs by following the design phase to map components, apply production-grade patterns, and verify compliance across various devices.

Do I need prior React experience to use this PWA design workflow?▼

You need foundational React knowledge to use this PWA design workflow, as it focuses on layout planning, shadcn/ui integration, service worker guidance, and performance optimization rather than teaching introductory React programming concepts.

Related Skills

Explore More Design & Creative Skills→
LordKuperLordKuper

ags-start

Initialize a single active Agentic Game Studio session and its state skeleton.

Community
Intermediate
AvihusittonAvihusitton

progressive-web-app

Configure service workers, web app manifests, and caching strategies for Progressive Web Apps.

Community
Intermediate
Muath2000Muath2000

ui-engineer

Develops React/Next.js/Tailwind UI components and design systems with WCAG 2.2 AA accessibility and RTL support.

Community
Advanced
jaballerjaballer

react-brief-recipes

Design React component architectures with ARIA-compliant states for interview scenarios.

Community
Intermediate