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.
Architects modern React progressive web apps with offline capabilities and responsive interfaces using shadcn/ui components.
npx claudepluginhub aeyeops/aeo-skill-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
README.mdSuperDesign.mdreference/accessibility.mdreference/code-quality-tooling.mdreference/common-pitfalls.mdreference/component-patterns.mdreference/dynamic-styling-patterns.mdreference/implementation-examples.mdreference/layout-patterns.mdreference/pwa-checklist.mdreference/pwa-icon-validation.mdreference/pwa-troubleshooting.mdreference/react-hooks.mdreference/setup-guide.mdreference/shadcn-components.mdreference/state-management-patterns.mdtemplates/component-boilerplate.tsxtemplates/custom-hook-template.tstemplates/manifest.jsontemplates/service-worker.tsDesign and build modern React progressive web applications using SuperDesign methodology, shadcn/ui components, and React best practices.
Trigger this skill when the user requests:
templates/component-boilerplate.tsx - React component templatetemplates/custom-hook-template.ts - Custom hook structuretemplates/service-worker.ts - Manual service worker implementationFour-phase methodology. Get user approval before proceeding at each phase.
mcp__shadcn__getComponents() and mcp__shadcn__getComponent() to identify matching componentsReference: See SuperDesign.md for complete methodology.
.superdesign/design_iterations/theme_[n].csstemplates/manifest.json as starting pointtemplates/service-worker.tsNeed 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.
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>
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
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.