npm - @tinkcarlos/skillora - Versions diffs - 0.2.0 - Mend

@tinkcarlos/skillora 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (234) hide show

package/.claude/skills/react-best-practices/references/bundle-optimization.md ADDED Viewed

@@ -0,0 +1,182 @@
+# Bundle Size Optimization
+**Impact: CRITICAL**
+Reducing initial bundle size improves Time to Interactive and Largest Contentful Paint.
+---
+## 1. Avoid Barrel File Imports
+**Impact: CRITICAL (200-800ms import cost, slow builds)**
+Import directly from source files instead of barrel files.
+```tsx
+// ❌ Incorrect: imports entire library
+import { Check, X, Menu } from 'lucide-react'
+// Loads 1,583 modules, takes ~2.8s extra in dev
+// Runtime cost: 200-800ms on every cold start
+import { Button, TextField } from '@mui/material'
+// Loads 2,225 modules, takes ~4.2s extra in dev
+// ✅ Correct: imports only what you need
+import Check from 'lucide-react/dist/esm/icons/check'
+import X from 'lucide-react/dist/esm/icons/x'
+import Menu from 'lucide-react/dist/esm/icons/menu'
+// Loads only 3 modules (~2KB vs ~1MB)
+import Button from '@mui/material/Button'
+import TextField from '@mui/material/TextField'
+```
+**Alternative: Next.js 13.5+**
+```js
+// next.config.js
+module.exports = {
+  experimental: {
+    optimizePackageImports: ['lucide-react', '@mui/material']
+  }
+}
+```
+**Libraries commonly affected:**
+- `lucide-react`, `@mui/material`, `@mui/icons-material`
+- `@tabler/icons-react`, `react-icons`
+- `@headlessui/react`, `@radix-ui/react-*`
+- `lodash`, `ramda`, `date-fns`, `rxjs`, `react-use`
+---
+## 2. Conditional Module Loading
+**Impact: HIGH (loads large data only when needed)**
+```tsx
+function AnimationPlayer({ enabled }: { enabled: boolean }) {
+  const [frames, setFrames] = useState<Frame[] | null>(null)
+  useEffect(() => {
+    if (enabled && !frames && typeof window !== 'undefined') {
+      import('./animation-frames.js')
+        .then(mod => setFrames(mod.frames))
+        .catch(() => setEnabled(false))
+    }
+  }, [enabled, frames])
+  if (!frames) return <Skeleton />
+  return <Canvas frames={frames} />
+}
+```
+---
+## 3. Defer Non-Critical Third-Party Libraries
+**Impact: MEDIUM (loads after hydration)**
+```tsx
+// ❌ Incorrect: blocks initial bundle
+import { Analytics } from '@vercel/analytics/react'
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        {children}
+        <Analytics />
+      </body>
+    </html>
+  )
+}
+// ✅ Correct: loads after hydration
+import dynamic from 'next/dynamic'
+const Analytics = dynamic(
+  () => import('@vercel/analytics/react').then(m => m.Analytics),
+  { ssr: false }
+)
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        {children}
+        <Analytics />
+      </body>
+    </html>
+  )
+}
+```
+---
+## 4. Dynamic Imports for Heavy Components
+**Impact: CRITICAL (directly affects TTI and LCP)**
+```tsx
+// ❌ Incorrect: Monaco bundles with main chunk ~300KB
+import { MonacoEditor } from './monaco-editor'
+function CodePanel({ code }: { code: string }) {
+  return <MonacoEditor value={code} />
+}
+// ✅ Correct: Monaco loads on demand
+import dynamic from 'next/dynamic'
+const MonacoEditor = dynamic(
+  () => import('./monaco-editor').then(m => m.MonacoEditor),
+  { ssr: false }
+)
+function CodePanel({ code }: { code: string }) {
+  return <MonacoEditor value={code} />
+}
+```
+---
+## 5. Preload Based on User Intent
+**Impact: MEDIUM (reduces perceived latency)**
+```tsx
+function EditorButton({ onClick }: { onClick: () => void }) {
+  const preload = () => {
+    if (typeof window !== 'undefined') {
+      void import('./monaco-editor')
+    }
+  }
+  return (
+    <button
+      onMouseEnter={preload}
+      onFocus={preload}
+      onClick={onClick}
+    >
+      Open Editor
+    </button>
+  )
+}
+```
+**Preload when feature flag is enabled:**
+```tsx
+function FlagsProvider({ children, flags }: Props) {
+  useEffect(() => {
+    if (flags.editorEnabled && typeof window !== 'undefined') {
+      void import('./monaco-editor').then(mod => mod.init())
+    }
+  }, [flags.editorEnabled])
+  return <FlagsContext.Provider value={flags}>
+    {children}
+  </FlagsContext.Provider>
+}
+```

package/.claude/skills/react-best-practices/references/client-data-fetching.md ADDED Viewed

@@ -0,0 +1,112 @@
+# Client-Side Data Fetching
+**Impact: MEDIUM-HIGH**
+Automatic deduplication and efficient data fetching patterns reduce redundant network requests.
+---
+## 1. Deduplicate Global Event Listeners
+**Impact: LOW (single listener for N components)**
+Use `useSWRSubscription()` to share global event listeners across component instances.
+```tsx
+// ❌ Incorrect: N instances = N listeners
+function useKeyboardShortcut(key: string, callback: () => void) {
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.metaKey && e.key === key) {
+        callback()
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [key, callback])
+}
+// ✅ Correct: N instances = 1 listener
+import useSWRSubscription from 'swr/subscription'
+const keyCallbacks = new Map<string, Set<() => void>>()
+function useKeyboardShortcut(key: string, callback: () => void) {
+  useEffect(() => {
+    if (!keyCallbacks.has(key)) {
+      keyCallbacks.set(key, new Set())
+    }
+    keyCallbacks.get(key)!.add(callback)
+    return () => {
+      const set = keyCallbacks.get(key)
+      if (set) {
+        set.delete(callback)
+        if (set.size === 0) {
+          keyCallbacks.delete(key)
+        }
+      }
+    }
+  }, [key, callback])
+  useSWRSubscription('global-keydown', () => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.metaKey && keyCallbacks.has(e.key)) {
+        keyCallbacks.get(e.key)!.forEach(cb => cb())
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  })
+}
+```
+---
+## 2. Use SWR for Automatic Deduplication
+**Impact: MEDIUM-HIGH (automatic deduplication)**
+SWR enables request deduplication, caching, and revalidation across component instances.
+```tsx
+// ❌ Incorrect: no deduplication, each instance fetches
+function UserList() {
+  const [users, setUsers] = useState([])
+  useEffect(() => {
+    fetch('/api/users')
+      .then(r => r.json())
+      .then(setUsers)
+  }, [])
+}
+// ✅ Correct: multiple instances share one request
+import useSWR from 'swr'
+function UserList() {
+  const { data: users } = useSWR('/api/users', fetcher)
+}
+```
+**For immutable data:**
+```tsx
+import { useImmutableSWR } from '@/lib/swr'
+function StaticContent() {
+  const { data } = useImmutableSWR('/api/config', fetcher)
+}
+```
+**For mutations:**
+```tsx
+import { useSWRMutation } from 'swr/mutation'
+function UpdateButton() {
+  const { trigger } = useSWRMutation('/api/user', updateUser)
+  return <button onClick={() => trigger()}>Update</button>
+}
+```
+Reference: https://swr.vercel.app