Architect modern React progressive web apps with offline-first capabilities and responsive interfaces. Integrates shadcn/ui component library, service worker patterns, and mobile-friendly layouts. Consult when building installable web applications or designing component-driven UIs.
Instalação
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Architect modern React progressive web apps with offline-first capabilities and responsive interfaces. Integrates shadcn/ui component library, service worker patterns, and mobile-friendly layouts. Consult when building installable web applications or designing component-driven UIs.
React PWA Designer
Design and build 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
Focus on single feature or component per iteration
Complete cycle: Implementation → Tests → Commit before next scope
Tool Usage Decision Tree
Need component info?
├─ Common component details → Check @reference/shadcn-components.md FIRST
├─ Detailed implementation/variants → mcp__shadcn__getComponent("name")
└─ List all available components → mcp__shadcn__getComponents()
Need library documentation?
├─ React hooks/patterns → Check @reference/react-hooks.md FIRST
├─ State management → Check @reference/state-management-patterns.md FIRST
├─ Styling decisions → Check @reference/dynamic-styling-patterns.md FIRST
├─ PWA requirements → Check @reference/pwa-checklist.md FIRST
├─ Need official/latest docs → mcp__context7__resolve_library_id() then get_library_docs()
└─ Common Context7 libraries:
/facebook/react, /vite-pwa/vite-plugin-pwa, /GoogleChrome/workbox,
/tanstack/react-query, /pmndrs/zustand, /shadcn/ui
Rule: Always check reference files before MCP calls to save tokens.
Quick Decision Trees
Component Selection
Need interactive element?
├─ Button/action → <Button>
├─ Link/navigation → <Link> or <a>
├─ Input field → <Input> or <Textarea>
├─ Toggle → <Switch> or <Checkbox>
└─ Selection → <Select> or <RadioGroup>
Need layout container?
├─ Content box → <Card>
├─ Modal → <Dialog>
├─ Side panel → <Sheet>
├─ Dropdown → <DropdownMenu>
└─ Sections → <Tabs> or <Accordion>
Need feedback?
├─ Loading → <Skeleton> or <Progress>
├─ Notification → <Toast> or <Alert>
├─ Hint → <Tooltip>
└─ Confirmation → <AlertDialog>
State Management
What kind of state?
├─ Local to component → useState
├─ Shared (2-3 components) → Props or useContext
├─ Complex app state → Zustand or Jotai
├─ Server data → React Query or SWR
└─ Form state → React Hook Form + Zod
Critical Reminders
ALWAYS use actual tool calls - Never output "Called tool: ..." as text
Get user approval at each workflow step before proceeding
Use tool calls for theme generation - Never output CSS as text
Save to .superdesign/design_iterations/ for all design artifacts
Check reference files before MCP for component details
Follow React best practices - hooks, TypeScript, composition
PWA icons MUST match manifest exactly - see @reference/pwa-icon-validation.md
Avoid bootstrap blue colors - use modern design systems
Mobile-first responsive - always design for smallest screen first