@ruyfranca/myskills 1.0.28 → 1.0.29

package/.agent/skills/modern-javascript-patterns/SKILL.md

@@ -0,0 +1,131 @@
+---
+name: modern-javascript-patterns
+description: "Master ES6+ features including async/await, destructuring, spread operators, arrow functions, promises, modules, iterators, generators, and functional programming patterns for writing clean, efficient code."
+risk: unknown
+source: community
+date_added: "2026-02-27"
+---
+
+# Modern JavaScript Patterns
+
+Comprehensive guide for mastering modern JavaScript (ES6+) features, functional programming patterns, and best practices for writing clean, maintainable, and performant code.
+
+## Use this skill when
+
+- Refactoring legacy JavaScript to modern syntax
+- Implementing functional programming patterns
+- Optimizing JavaScript performance
+- Writing maintainable and readable code
+- Working with asynchronous operations
+- Building modern web applications
+- Migrating from callbacks to Promises/async-await
+- Implementing data transformation pipelines
+
+## Do not use this skill when
+
+- The task is unrelated to modern javascript patterns
+- You need a different domain or tool outside this scope
+
+## Instructions
+
+- Clarify goals, constraints, and required inputs.
+- Apply relevant best practices and validate outcomes.
+- Provide actionable steps and verification.
+
+## Core Patterns
+
+### 1. Async/Await
+
+```javascript
+// ✅ Modern async patterns
+const fetchData = async (url) => {
+  const response = await fetch(url);
+  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+  return response.json();
+};
+
+// Parallel execution
+const [users, posts] = await Promise.all([fetchUsers(), fetchPosts()]);
+
+// Error handling
+const result = await fetchData(url).catch(err => ({ error: err.message }));
+```
+
+### 2. Destructuring & Spread
+
+```javascript
+// Object destructuring with defaults
+const { name = 'Anonymous', role = 'user', ...rest } = user;
+
+// Array destructuring
+const [first, second, ...remaining] = items;
+
+// Function parameters
+const greet = ({ name, greeting = 'Hello' }) => `${greeting}, ${name}!`;
+```
+
+### 3. Functional Patterns
+
+```javascript
+// Immutable transformations
+const updated = items.map(item => item.id === id ? { ...item, done: true } : item);
+const active = items.filter(item => !item.done);
+const total = items.reduce((sum, item) => sum + item.price, 0);
+
+// Composition
+const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);
+const process = pipe(validate, normalize, format);
+```
+
+### 4. Modules (ESM)
+
+```javascript
+// Named exports
+export const add = (a, b) => a + b;
+export const multiply = (a, b) => a * b;
+
+// Dynamic import (lazy loading)
+const module = await import('./heavy-module.js');
+```
+
+### 5. Generators & Iterators
+
+```javascript
+function* range(start, end, step = 1) {
+  for (let i = start; i < end; i += step) yield i;
+}
+
+// Paginated data fetching
+async function* paginate(fetchPage) {
+  let page = 1;
+  while (true) {
+    const data = await fetchPage(page++);
+    if (!data.length) break;
+    yield* data;
+  }
+}
+```
+
+### 6. Proxy & Reflect
+
+```javascript
+const handler = {
+  get(target, key) {
+    return key in target ? target[key] : `Property ${key} not found`;
+  },
+  set(target, key, value) {
+    if (typeof value !== 'string') throw new TypeError('Value must be string');
+    return Reflect.set(target, key, value);
+  }
+};
+```
+
+## Anti-Patterns
+
+| ❌ Avoid | ✅ Use Instead |
+|---------|--------------|
+| `var` | `const` / `let` |
+| Callback hell | async/await |
+| `arguments` object | Rest parameters |
+| Mutating arrays | map/filter/spread |
+| `eval()` | Template literals |

package/.agent/skills/monorepo-architect/SKILL.md

@@ -0,0 +1,91 @@
+---
+name: monorepo-architect
+description: "Expert in monorepo architecture, build systems, and dependency management at scale. Masters Nx, Turborepo, Bazel, and Lerna for efficient multi-project development."
+risk: unknown
+source: community
+date_added: "2026-02-27"
+---
+
+# Monorepo Architect
+
+Expert in monorepo architecture, build systems, and dependency management at scale. Masters Nx, Turborepo, Bazel, and Lerna for efficient multi-project development. Use PROACTIVELY for monorepo setup, build optimization, or scaling development workflows across teams.
+
+## Use this skill when
+
+- Setting up a new monorepo from scratch
+- Migrating from polyrepo to monorepo
+- Optimizing slow CI/CD pipelines
+- Sharing code between multiple applications
+- Managing dependencies across projects
+- Implementing consistent tooling across teams
+
+## Do not use this skill when
+
+- The task is unrelated to monorepo architect
+- You need a different domain or tool outside this scope
+
+## Capabilities
+
+- Monorepo tool selection (Nx, Turborepo, Bazel, Lerna)
+- Workspace configuration and project structure
+- Build caching (local and remote)
+- Dependency graph management
+- Affected/changed detection for CI optimization
+- Code sharing and library extraction
+- Task orchestration and parallelization
+
+## Tool Selection Guide
+
+| Tool | Best For | Key Feature |
+|------|----------|-------------|
+| **Turborepo** | JS/TS projects, simple setup | Remote caching, fast incremental builds |
+| **Nx** | Large teams, enterprise | Dependency graph, affected commands |
+| **Bazel** | Polyglot, Google-scale | Hermetic builds, extreme scalability |
+| **Lerna** | npm package publishing | Versioning/publishing automation |
+
+## Workflow
+
+1. Assess codebase size and team structure
+2. Select appropriate monorepo tooling
+3. Design workspace and project structure
+4. Configure build caching strategy
+5. Set up affected/changed detection
+6. Implement task pipelines
+7. Configure remote caching for CI
+8. Document conventions and workflows
+
+## Turborepo Example
+
+```json
+// turbo.json
+{
+  "$schema": "https://turbo.build/schema.json",
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "outputs": [".next/**", "dist/**"]
+    },
+    "test": {
+      "dependsOn": ["build"],
+      "cache": false
+    },
+    "lint": {
+      "cache": true
+    }
+  },
+  "remoteCache": {
+    "enabled": true
+  }
+}
+```
+
+## Best Practices
+
+- Start with clear project boundaries
+- Use consistent naming conventions
+- Implement remote caching early
+- Keep shared libraries focused
+- Use tags for dependency constraints
+- Automate dependency updates
+- Document the dependency graph
+- Set up code ownership rules

package/.agent/skills/nextjs-react-expert/SKILL.md

@@ -1,286 +1,133 @@
 ---
 name: react-best-practices
-description: React and Next.js performance optimization from Vercel Engineering. Use when building React components, optimizing performance, eliminating waterfalls, reducing bundle size, reviewing code for performance issues, or implementing server/client-side optimizations.
-allowed-tools: Read, Write, Edit, Glob, Grep, Bash
+description: "React and Next.js performance optimization from Vercel Engineering. Use when building React components, optimizing performance, eliminating waterfalls, reducing bundle size, reviewing code for performance issues, or implementing server/client-side optimizations."
+risk: unknown
+source: community
+date_added: "2026-02-27"
 ---
 
-# Next.js & React Performance Expert
+# React Best Practices (Vercel)
 
-> **From Vercel Engineering** - 57 optimization rules prioritized by impact
-> **Philosophy:** Eliminate waterfalls first, optimize bundles second, then micro-optimize.
+Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains rules across 8 categories, prioritized by impact.
 
----
-
-## 🎯 Selective Reading Rule (MANDATORY)
-
-**Read ONLY sections relevant to your task!** Check the content map below and load what you need.
-
-> 🔴 **For performance reviews: Start with CRITICAL sections (1-2), then move to HIGH/MEDIUM.**
-
----
+## Use this skill when
 
-## 📑 Content Map
+- Building React components with Next.js App Router
+- Optimizing performance or eliminating waterfalls
+- Reducing bundle size or improving Core Web Vitals
+- Reviewing code for performance issues
 
-| File                                    | Impact             | Rules    | When to Read                                                    |
-| --------------------------------------- | ------------------ | -------- | --------------------------------------------------------------- |
-| `1-async-eliminating-waterfalls.md`     | 🔴 **CRITICAL**    | 5 rules  | Slow page loads, sequential API calls, data fetching waterfalls |
-| `2-bundle-bundle-size-optimization.md`  | 🔴 **CRITICAL**    | 5 rules  | Large bundle size, slow Time to Interactive, First Load issues  |
-| `3-server-server-side-performance.md`   | 🟠 **HIGH**        | 7 rules  | Slow SSR, API route optimization, server-side waterfalls        |
-| `4-client-client-side-data-fetching.md` | 🟡 **MEDIUM-HIGH** | 4 rules  | Client data management, SWR patterns, deduplication             |
-| `5-rerender-re-render-optimization.md`  | 🟡 **MEDIUM**      | 12 rules | Excessive re-renders, React performance, memoization            |
-| `6-rendering-rendering-performance.md`  | 🟡 **MEDIUM**      | 9 rules  | Rendering bottlenecks, virtualization, image optimization       |
-| `7-js-javascript-performance.md`        | ⚪ **LOW-MEDIUM**  | 12 rules | Micro-optimizations, caching, loop performance                  |
-| `8-advanced-advanced-patterns.md`       | 🔵 **VARIABLE**    | 3 rules  | Advanced React patterns, useLatest, init-once                   |
+## Do not use this skill when
 
-**Total: 57 rules across 8 categories**
+- The task is unrelated to React/Next.js
+- You need basic React syntax explanations
 
----
+## Rule Categories by Priority
 
-## 🚀 Quick Decision Tree
+### 1. Eliminating Waterfalls (CRITICAL)
 
-**What's your performance issue?**
+```tsx
+// ❌ Sequential — waterfall
+const user = await getUser();
+const posts = await getPosts(user.id); // waits for user
 
+// ✅ Parallel — no waterfall
+const [user, posts] = await Promise.all([getUser(), getPosts()]);
 ```
-🐌 Slow page loads / Long Time to Interactive
-  → Read Section 1: Eliminating Waterfalls
-  → Read Section 2: Bundle Size Optimization
-
-📦 Large bundle size (> 200KB)
-  → Read Section 2: Bundle Size Optimization
-  → Check: Dynamic imports, barrel imports, tree-shaking
 
-🖥️ Slow Server-Side Rendering
-  → Read Section 3: Server-Side Performance
-  → Check: Parallel data fetching, streaming
+**Key rules:**
+- Fetch all parallel data with `Promise.all`
+- Move data fetching to the closest Server Component
+- Avoid client-side fetch when SSR/RSC is available
 
-🔄 Too many re-renders / UI lag
-  → Read Section 5: Re-render Optimization
-  → Check: React.memo, useMemo, useCallback
+### 2. Bundle Size Optimization (CRITICAL)
 
-🎨 Rendering performance issues
-  → Read Section 6: Rendering Performance
-  → Check: Virtualization, layout thrashing
+```tsx
+// ❌ Imports everything
+import _ from 'lodash';
 
-🌐 Client-side data fetching problems
-  → Read Section 4: Client-Side Data Fetching
-  → Check: SWR deduplication, localStorage
+// ✅ Tree-shakeable import
+import { debounce } from 'lodash-es';
 
-✨ Need advanced patterns
-  → Read Section 8: Advanced Patterns
+// ✅ Dynamic import for heavy components
+const Chart = dynamic(() => import('./Chart'), { ssr: false });
 ```
 
----
-
-## 📊 Impact Priority Guide
+### 3. Server-Side Performance (HIGH)
 
-**Use this order when doing comprehensive optimization:**
+```tsx
+// ✅ Server Component — no client JS
+export default async function UserProfile({ id }: { id: string }) {
+  const user = await db.user.findUnique({ where: { id } });
+  return <div>{user.name}</div>;
+}
 
+// ✅ Streaming with Suspense
+<Suspense fallback={<Skeleton />}>
+  <SlowComponent />
+</Suspense>
 ```
-1️⃣ CRITICAL (Biggest Gains - Do First):
-   ├─ Section 1: Eliminating Waterfalls
-   │  └─ Each waterfall adds full network latency (100-500ms+)
-   └─ Section 2: Bundle Size Optimization
-      └─ Affects Time to Interactive and Largest Contentful Paint
-
-2️⃣ HIGH (Significant Impact - Do Second):
-   └─ Section 3: Server-Side Performance
-      └─ Eliminates server-side waterfalls, faster response times
-
-3️⃣ MEDIUM (Moderate Gains - Do Third):
-   ├─ Section 4: Client-Side Data Fetching
-   ├─ Section 5: Re-render Optimization
-   └─ Section 6: Rendering Performance
-
-4️⃣ LOW (Polish - Do Last):
-   ├─ Section 7: JavaScript Performance
-   └─ Section 8: Advanced Patterns
-```
-
----
-
-## 🔗 Related Skills
-
-| Need                    | Skill                             |
-| ----------------------- | --------------------------------- |
-| API design patterns     | `@[skills/api-patterns]`          |
-| Database optimization   | `@[skills/database-design]`       |
-| Testing strategies      | `@[skills/testing-patterns]`      |
-| UI/UX design principles | `@[skills/frontend-design]`       |
-| TypeScript patterns     | `@[skills/typescript-expert]`     |
-| Deployment & DevOps     | `@[skills/deployment-procedures]` |
-
----
-
-## ✅ Performance Review Checklist
-
-Before shipping to production:
-
-**Critical (Must Fix):**
-
-- [ ] No sequential data fetching (waterfalls eliminated)
-- [ ] Bundle size < 200KB for main bundle
-- [ ] No barrel imports in app code
-- [ ] Dynamic imports used for large components
-- [ ] Parallel data fetching where possible
-
-**High Priority:**
-
-- [ ] Server components used where appropriate
-- [ ] API routes optimized (no N+1 queries)
-- [ ] Suspense boundaries for data fetching
-- [ ] Static generation used where possible
-
-**Medium Priority:**
-
-- [ ] Expensive computations memoized
-- [ ] List rendering virtualized (if > 100 items)
-- [ ] Images optimized with next/image
-- [ ] No unnecessary re-renders
-
-**Low Priority (Polish):**
-
-- [ ] Hot path loops optimized
-- [ ] RegExp patterns hoisted
-- [ ] Property access cached in loops
-
----
-
-## ❌ Anti-Patterns (Common Mistakes)
-
-**DON'T:**
-
-- ❌ Use sequential `await` for independent operations
-- ❌ Import entire libraries when you need one function
-- ❌ Use barrel exports (`index.ts` re-exports) in app code
-- ❌ Skip dynamic imports for large components/libraries
-- ❌ Fetch data in useEffect without deduplication
-- ❌ Forget to memoize expensive computations
-- ❌ Use client components when server components work
-
-**DO:**
-
-- ✅ Fetch data in parallel with `Promise.all()`
-- ✅ Use dynamic imports: `const Comp = dynamic(() => import('./Heavy'))`
-- ✅ Import directly: `import { specific } from 'library/specific'`
-- ✅ Use Suspense boundaries for better UX
-- ✅ Leverage React Server Components
-- ✅ Measure performance before optimizing
-- ✅ Use Next.js built-in optimizations (next/image, next/font)
-
----
-
-## 🎯 How to Use This Skill
 
-### For New Features:
+### 4. Client-Side Data Fetching (MEDIUM-HIGH)
 
-1. Check **Section 1 & 2** while building (prevent waterfalls, keep bundle small)
-2. Use server components by default (Section 3)
-3. Apply memoization for expensive operations (Section 5)
-
-### For Performance Reviews:
-
-1. Start with **Section 1** (waterfalls = biggest impact)
-2. Then **Section 2** (bundle size)
-3. Then **Section 3** (server-side)
-4. Finally other sections as needed
-
-### For Debugging Slow Performance:
-
-1. Identify the symptom (slow load, lag, etc.)
-2. Use Quick Decision Tree above
-3. Read relevant section
-4. Apply fixes in priority order
-
----
-
-## 📚 Learning Path
-
-**Beginner (Focus on Critical):**
-→ Section 1: Eliminating Waterfalls
-→ Section 2: Bundle Size Optimization
-
-**Intermediate (Add High Priority):**
-→ Section 3: Server-Side Performance
-→ Section 5: Re-render Optimization
-
-**Advanced (Full Optimization):**
-→ All sections + Section 8: Advanced Patterns
-
----
-
-## 🔍 Validation Script
-
-| Script                                 | Purpose                     | Command                                                      |
-| -------------------------------------- | --------------------------- | ------------------------------------------------------------ |
-| `scripts/react_performance_checker.py` | Automated performance audit | `python scripts/react_performance_checker.py <project_path>` |
-
----
-
-## 📖 Section Details
-
-### Section 1: Eliminating Waterfalls (CRITICAL)
-
-**Impact:** Each waterfall adds 100-500ms+ latency
-**Key Concepts:** Parallel fetching, Promise.all(), Suspense boundaries, preloading
-
-### Section 2: Bundle Size Optimization (CRITICAL)
-
-**Impact:** Directly affects Time to Interactive, Largest Contentful Paint
-**Key Concepts:** Dynamic imports, tree-shaking, barrel import avoidance
-
-### Section 3: Server-Side Performance (HIGH)
-
-**Impact:** Faster server responses, better SEO
-**Key Concepts:** Parallel server fetching, streaming, API route optimization
-
-### Section 4: Client-Side Data Fetching (MEDIUM-HIGH)
-
-**Impact:** Reduces redundant requests, better UX
-**Key Concepts:** SWR deduplication, localStorage caching, event listeners
-
-### Section 5: Re-render Optimization (MEDIUM)
-
-**Impact:** Smoother UI, less wasted computation
-**Key Concepts:** React.memo, useMemo, useCallback, component structure
-
-### Section 6: Rendering Performance (MEDIUM)
+```tsx
+// ✅ SWR for client-side data
+const { data, isLoading } = useSWR('/api/user', fetcher, {
+  revalidateOnFocus: false,
+  dedupingInterval: 60000,
+});
+```
 
-**Impact:** Better rendering efficiency
-**Key Concepts:** Virtualization, image optimization, layout thrashing
+### 5. Re-render Optimization (MEDIUM)
 
-### Section 7: JavaScript Performance (LOW-MEDIUM)
+```tsx
+// ✅ Memoize only when profiler shows it helps
+const MemoComponent = memo(Component, (prev, next) => 
+  prev.id === next.id
+);
 
-**Impact:** Incremental improvements in hot paths
-**Key Concepts:** Loop optimization, caching, RegExp hoisting
+// ✅ Stable selectors with Zustand
+const user = useStore(state => state.user); // not state => ({ user: state.user })
+```
 
-### Section 8: Advanced Patterns (VARIABLE)
+### 6. Rendering Performance (MEDIUM)
 
-**Impact:** Specific use cases
-**Key Concepts:** useLatest hook, init-once patterns, event handler refs
+```tsx
+// ✅ Virtualize long lists
+import { FixedSizeList as List } from 'react-window';
 
----
+<List height={600} itemCount={10000} itemSize={35} width={300}>
+  {({ index, style }) => <div style={style}>Row {index}</div>}
+</List>
+```
 
-## 🎓 Best Practices Summary
+### 7. Image & Asset Optimization
 
-**Golden Rules:**
+```tsx
+// ✅ Always use Next.js Image
+import Image from 'next/image';
+<Image src="/hero.jpg" alt="Hero" width={800} height={600} priority />
+```
 
-1. **Measure first** - Use React DevTools Profiler, Chrome DevTools
-2. **Biggest impact first** - Waterfalls → Bundle → Server → Micro
-3. **Don't over-optimize** - Focus on real bottlenecks
-4. **Use platform features** - Next.js has optimizations built-in
-5. **Think about users** - Real-world conditions matter
+### 8. Advanced Patterns
 
-**Performance Mindset:**
+```tsx
+// ✅ useOptimistic for instant feedback
+const [optimisticLikes, addOptimisticLike] = useOptimistic(likes);
 
-- Every `await` in sequence = potential waterfall
-- Every `import` = potential bundle bloat
-- Every re-render = wasted computation (if unnecessary)
-- Server components = less JavaScript to ship
-- Measure, don't guess
+// ✅ Server Actions for mutations
+async function updateUser(formData: FormData) {
+  'use server';
+  await db.user.update({ ... });
+  revalidatePath('/profile');
+}
+```
 
----
+## Decision Tree
 
-**Source:** Vercel Engineering
-**Date:** January 2026
-**Version:** 1.0.0
-**Total Rules:** 57 across 8 categories
+```
+Is data needed at render? 
+→ Yes → Use Server Component (RSC)
+→ No, user-triggered → Use Server Action
+→ Real-time/subscription → Client Component + SWR/WebSocket
+```