What is the SuperDesign methodology used by this skill?

SuperDesign is a structured four-phase workflow—Discovery, Design, PWA Implementation, and Development—that ensures app architecture is planned and approved by the user at every step.

How does this skill handle PWA icon requirements?

The skill includes a critical icon validation reference to ensure dimensions match manifest requirements exactly, preventing common silent installation failures.

Does this skill work with existing shadcn/ui installations?

Yes, it uses MCP tool calls to fetch, list, and implement shadcn/ui components directly into your project while following your existing theme.

Is the outputted code accessible?

High accessibility is a core requirement; the skill implements WCAG AA patterns, including ARIA labels, semantic HTML, and keyboard navigation.

Can it help me choose the right state management?

Yes, it includes a decision tree for state management, helping you choose between local state, Context API, Zustand, or React Query based on your app's complexity.

React PWA Designer

Name: React PWA Designer
Author: AeyeOps

byAeyeOps

0•

デザインツール

Architects modern React progressive web apps with offline-first capabilities, responsive shadcn/ui components, and professional design systems.

The React PWA Designer skill enables developers to build high-performance, installable web applications using the SuperDesign methodology. It streamlines the entire frontend lifecycle—from initial wireframing and theme generation to complex PWA configurations like service workers and manifest validation. By integrating deeply with shadcn/ui and Tailwind CSS, the skill ensures that applications are not only visually modern but also adhere to strict WCAG AA accessibility standards and mobile-first responsive patterns.

主な機能

01Strict adherence to React best practices, TypeScript types, and WCAG AA accessibility

02Deep integration with shadcn/ui for component discovery and implementation

03Automated PWA setup including service workers, manifests, and icon validation

04Four-phase SuperDesign workflow for structured UI/UX planning and execution

050 GitHub stars

06Offline-first architecture patterns and responsive layout design

ユースケース

01Building an installable cross-platform web application with offline support

02Creating a modern, responsive React dashboard using a shadcn/ui-based design system

03Converting static UI designs into accessible, production-ready React components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add aeyeops/aeo-skill-marketplace react-pwa-designer

For use in Claude.ai and ChatGPT

Download Skill