@@ -24,7 +24,7 @@ This skill auto-activates when you're working with:
2424
2525### Quick Reference
2626
27- The Frontend category contains 8 core skills (+ elegant-design):
27+ The Frontend category contains 10 core skills (+ elegant-design):
2828
29291 . ** react-component-patterns** - Component design, composition, hooks, performance
30302 . ** nextjs-app-router** - Next.js 14+ App Router, Server Components, routing
@@ -34,7 +34,9 @@ The Frontend category contains 8 core skills (+ elegant-design):
34346 . ** web-accessibility** - WCAG 2.1 AA compliance, ARIA, keyboard navigation
35357 . ** frontend-performance** - Bundle optimization, Core Web Vitals, code splitting
36368 . ** nextjs-seo** - SEO with Next.js, metadata API, structured data
37- 9 . ** elegant-design/SKILL.md** - World-class accessible interfaces (separate Agent Skill)
37+ 9 . ** web-workers** - Web Workers API, message passing, offloading computation
38+ 10 . ** browser-concurrency** - Service Workers, SharedWorkers, Worklets, PWAs
39+ 11 . ** elegant-design/SKILL.md** - World-class accessible interfaces (separate Agent Skill)
3840
3941### Load Full Category Details
4042
@@ -71,6 +73,10 @@ cat skills/frontend/react-form-handling.md
7173cat skills/frontend/web-accessibility.md
7274cat skills/frontend/frontend-performance.md
7375
76+ # Concurrency and workers
77+ cat skills/frontend/web-workers.md
78+ cat skills/frontend/browser-concurrency.md
79+
7480# Design system and UI (Agent Skill - auto-discovered separately)
7581# elegant-design/SKILL.md activates independently for UI design work
7682```
@@ -113,6 +119,15 @@ cat skills/frontend/web-accessibility.md # Ensure accessibility
113119cat skills/frontend/nextjs-seo.md # Optimize SEO
114120```
115121
122+ ### CPU-Intensive Features & PWAs
123+ ** Sequence** : Workers → Concurrency → Performance
124+
125+ ``` bash
126+ cat skills/frontend/web-workers.md # Offload heavy computation
127+ cat skills/frontend/browser-concurrency.md # Service Workers, offline support
128+ cat skills/frontend/frontend-performance.md # Optimize overall performance
129+ ```
130+
116131## Skill Selection Guide
117132
118133** React Component Patterns** → ` react-component-patterns.md ` :
@@ -170,6 +185,22 @@ cat skills/frontend/nextjs-seo.md # Optimize SEO
170185- Sitemap and robots.txt
171186- Dynamic metadata
172187
188+ ** Web Workers** → ` web-workers.md ` :
189+ - Offloading heavy computation
190+ - Web Workers API and message passing
191+ - Transferable objects for zero-copy
192+ - React integration with custom hooks
193+ - Worker pools for parallel processing
194+ - TypeScript type safety
195+
196+ ** Browser Concurrency** → ` browser-concurrency.md ` :
197+ - Service Workers for offline support and PWAs
198+ - SharedWorkers for cross-tab state
199+ - Audio/Paint/Animation Worklets
200+ - Background sync and push notifications
201+ - Caching strategies
202+ - BroadcastChannel for cross-tab messaging
203+
173204## Integration with Other Skills
174205
175206Frontend skills commonly combine with:
@@ -250,6 +281,16 @@ cat skills/frontend/web-accessibility.md
250281cat skills/frontend/nextjs-seo.md
251282```
252283
284+ ** "Offload heavy computation"** :
285+ ``` bash
286+ cat skills/frontend/web-workers.md
287+ ```
288+
289+ ** "Build a PWA with offline support"** :
290+ ``` bash
291+ cat skills/frontend/browser-concurrency.md
292+ ```
293+
253294## React vs Next.js Decision
254295
255296** Use React (Vite)** when:
0 commit comments