react-pwa-designer

# React PWA Designer

A comprehensive skill for designing and building modern React progressive web applications using SuperDesign methodology, shadcn/ui components, and React best practices.

## When to Use This Skill

Trigger this skill when the user requests:
- Designing or building React applications
- Creating progressive web apps (PWAs)
- Implementing shadcn/ui components
- Building modern, responsive web interfaces
- Creating React component libraries
- Designing with Tailwind CSS and modern design systems
- Converting designs to React components

## Quick Start & Setup

### Project Setup

1. **Copy SuperDesign template structure:**
   ```bash
   cp -r templates/.superdesign ./
   ```
   This creates `.superdesign/design_iterations/` for storing design artifacts. See [templates/.superdesign/README.md](templates/.superdesign/README.md)

2. **Initialize React + PWA project:**
   ```bash
   npm create vite@latest my-pwa -- --template react-ts
   cd my-pwa
   npm install
   ```

3. **Copy configuration templates:**
   - [templates/vite.config.ts](templates/vite.config.ts) - Vite + PWA configuration
   - [templates/tailwind.config.js](templates/tailwind.config.js) - Tailwind CSS setup
   - [templates/tsconfig.json](templates/tsconfig.json) - TypeScript configuration
   - [templates/manifest.json](templates/manifest.json) - PWA manifest template

4. **Review setup guide:** See [reference/setup-guide.md](reference/setup-guide.md)

### Reference Files by Topic

**Getting Started:**
- [README.md](README.md) - Complete skill overview
- [reference/setup-guide.md](reference/setup-guide.md) - Project initialization
- [templates/.superdesign/README.md](templates/.superdesign/README.md) - SuperDesign directory usage

**React Patterns:**
- [reference/react-hooks.md](reference/react-hooks.md) - Custom hooks and patterns
- [reference/component-patterns.md](reference/component-patterns.md) - Component architecture
- [reference/state-management-patterns.md](reference/state-manag