gin-skills 1.0.3 → 1.0.5

package/landing/index.html

@@ -689,7 +689,7 @@
     <div class="container">
       <div class="hero-badge fade-up">
         <span class="dot"></span>
-        <!-- AUTO:BADGE -->v1.0.2 &mdash; 17 Skills &middot; 6 Agents<!-- /AUTO:BADGE -->
+        <!-- AUTO:BADGE -->v1.0.4 &mdash; 17 Skills &middot; 6 Agents<!-- /AUTO:BADGE -->
       </div>
       <h1 class="fade-up"><span>Supercharge</span> Claude Code<br>with One Command</h1>
       <p class="hero-sub fade-up">
@@ -1220,7 +1220,7 @@
   <footer class="footer">
     <div class="container">
       <div class="footer-content">
-        <div class="footer-brand">GinStudio Skills v1.0.2</div>
+        <div class="footer-brand">GinStudio Skills v1.0.4</div>
         <div class="footer-links">
           <a href="https://www.npmjs.com/package/gin-skills" target="_blank" rel="noopener">npm</a>
           <a href="https://github.com/vuduynhiennn/ginskills" target="_blank" rel="noopener">GitHub</a>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gin-skills",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Install GinStudio skills and agents for Claude Code",
   "homepage": "https://skills.ginstudio.asia",
   "repository": {

package/skills/react-native-performance/scanners/scan-animations.sh

@@ -7,6 +7,8 @@ echo "Animation Performance Scanner"
 echo "================================"
 
 # Animated.timing/spring/decay without useNativeDriver: true
+# Note: useNativeDriver only supports opacity and transform. Properties like backgroundColor,
+# width, height, margin, padding, borderRadius REQUIRE useNativeDriver: false — not a bug.
 echo ""
 echo "--- Animated Without useNativeDriver ---"
 grep -rn --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js" \
@@ -15,10 +17,18 @@ grep -rn --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js" \
   | while IFS= read -r line; do
       file=$(echo "$line" | cut -d: -f1)
       lineno=$(echo "$line" | cut -d: -f2)
+      # Look at broader context (20 lines) to check what property the animated value drives
       context=$(sed -n "${lineno},$((lineno + 8))p" "$file" 2>/dev/null)
+      broad_context=$(sed -n "1,$((lineno + 30))p" "$file" 2>/dev/null | tail -50)
       if ! echo "$context" | grep -q 'useNativeDriver:\s*true'; then
         if echo "$context" | grep -q 'useNativeDriver:\s*false'; then
-          echo "$file:$lineno — [ERROR] Animated.timing/spring with useNativeDriver: false → Change to useNativeDriver: true; only opacity and transform are supported on native thread"
+          # Check if the animated value is used for non-native-driver-compatible properties
+          # (backgroundColor, width, height, margin*, padding*, border*, left, top, right, bottom, flex)
+          if echo "$broad_context" | grep -qE 'backgroundColor|width:\s*anim|height:\s*anim|marginTop|marginBottom|marginLeft|marginRight|paddingTop|paddingBottom|paddingLeft|paddingRight|borderRadius|borderWidth|left:\s*anim|top:\s*anim|right:\s*anim|bottom:\s*anim|interpolate.*backgroundColor|interpolate.*color'; then
+            echo "$file:$lineno — [INFO] Animated with useNativeDriver: false (justified: animates layout/color property) → Consider react-native-reanimated for smoother layout animations on UI thread"
+          else
+            echo "$file:$lineno — [ERROR] Animated.timing/spring with useNativeDriver: false → Change to useNativeDriver: true; only opacity and transform are supported on native thread"
+          fi
         else
           echo "$file:$lineno — [ERROR] Animated.timing/spring missing useNativeDriver → Add useNativeDriver: true to run animation on UI thread and avoid JS thread jank"
         fi

package/skills/react-native-performance/scanners/scan-console-devtools.sh

@@ -7,8 +7,19 @@ echo "Console & DevTools Scanner"
 echo "================================"
 
 # console.log without __DEV__ guard
+# Escalates to ERROR when on gesture/animation hot paths (60fps concern)
+# Projects using a custom logger (e.g. appLog) should prefer that over raw console.log
 echo ""
 echo "--- console.log Without __DEV__ Guard ---"
+
+# Auto-detect custom logger: check if the project has an appLog/logger utility
+CUSTOM_LOGGER=""
+CUSTOM_LOGGER_IMPORT=""
+if grep -rql --include="*.ts" --include="*.tsx" 'export const appLog' "$DIR" 2>/dev/null; then
+  CUSTOM_LOGGER="appLog"
+  CUSTOM_LOGGER_IMPORT='import { appLog } from "@/shared/utils/logger"'
+fi
+
 grep -rn --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js" \
   'console\.log(' "$DIR" 2>/dev/null \
   | grep -v node_modules | grep -v '__tests__' | grep -v '\.test\.' | grep -v '\.spec\.' \
@@ -25,7 +36,25 @@ grep -rn --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js" \
       file_context=$(sed -n "1,$((lineno - 1))p" "$file" 2>/dev/null)
       if ! echo "$context" | grep -q '__DEV__\|if.*DEV' && \
          ! echo "$file_context" | grep -q '= __DEV__'; then
-        echo "$file:$lineno — [WARN] console.log without __DEV__ guard → Wrap with if (__DEV__) or use babel-plugin-transform-remove-console"
+        # Check if this console.log is on a gesture/animation hot path (runs every frame)
+        hot_path_context=$(sed -n "$((lineno > 20 ? lineno - 20 : 1)),${lineno}p" "$file" 2>/dev/null)
+        is_worklet=false
+        if echo "$hot_path_context" | grep -q '"worklet"\|'\''worklet'\'''; then
+          is_worklet=true
+        fi
+        if echo "$hot_path_context" | grep -qE 'onUpdate|onActive|Pan\.|onMove|onScroll|onGestureEvent|Gesture\.|worklet|runOnJS|requestAnimationFrame|\.addListener'; then
+          if [ "$is_worklet" = true ]; then
+            echo "$file:$lineno — [ERROR] console.log in Reanimated worklet (runs on UI thread every frame) → Wrap with if (__DEV__) console.log(...); appLog cannot run in worklets"
+          else
+            echo "$file:$lineno — [ERROR] console.log on gesture/animation hot path (runs every frame at 60fps) → Remove or replace with ${CUSTOM_LOGGER:-__DEV__ guard}; serialization on hot paths causes jank"
+          fi
+        else
+          if [ -n "$CUSTOM_LOGGER" ]; then
+            echo "$file:$lineno — [WARN] raw console.log instead of project logger → Replace with $CUSTOM_LOGGER.debug(...) which is dev-only by default"
+          else
+            echo "$file:$lineno — [WARN] console.log without __DEV__ guard → Wrap with if (__DEV__) or use babel-plugin-transform-remove-console"
+          fi
+        fi
         ISSUES=$((ISSUES + 1))
       fi
     done
@@ -47,7 +76,11 @@ grep -rn --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js" \
       file_context=$(sed -n "1,$((lineno - 1))p" "$file" 2>/dev/null)
       if ! echo "$context" | grep -q '__DEV__\|if.*DEV' && \
          ! echo "$file_context" | grep -q '= __DEV__'; then
-        echo "$file:$lineno — [WARN] console.warn without __DEV__ guard → Wrap with if (__DEV__) or suppress in production logger"
+        if [ -n "$CUSTOM_LOGGER" ]; then
+          echo "$file:$lineno — [WARN] raw console.warn instead of project logger → Replace with $CUSTOM_LOGGER.warn(...) which is dev-only by default"
+        else
+          echo "$file:$lineno — [WARN] console.warn without __DEV__ guard → Wrap with if (__DEV__) or suppress in production logger"
+        fi
         ISSUES=$((ISSUES + 1))
       fi
     done
@@ -61,7 +94,11 @@ grep -rn --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js" \
   | grep -v '__DEV__\|Sentry\|crashlytics\|bugsnag' \
   | while IFS= read -r line; do
       file_loc=$(echo "$line" | cut -d: -f1,2)
-      echo "$file_loc — [INFO] console.error in production code → Use a crash reporting SDK (Sentry/Crashlytics) instead of console.error"
+      if [ -n "$CUSTOM_LOGGER" ]; then
+        echo "$file_loc — [INFO] raw console.error → Replace with $CUSTOM_LOGGER.error(...) or use a crash reporting SDK (Sentry/Crashlytics)"
+      else
+        echo "$file_loc — [INFO] console.error in production code → Use a crash reporting SDK (Sentry/Crashlytics) instead of console.error"
+      fi
       ISSUES=$((ISSUES + 1))
     done
 
@@ -73,7 +110,11 @@ grep -rn --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js" \
   | grep -v node_modules | grep -v '__tests__' | grep -v '\.test\.' | grep -v '\.spec\.' \
   | while IFS= read -r line; do
       file_loc=$(echo "$line" | cut -d: -f1,2)
-      echo "$file_loc — [WARN] console.info/debug in production code → Remove or guard with if (__DEV__)"
+      if [ -n "$CUSTOM_LOGGER" ]; then
+        echo "$file_loc — [WARN] raw console.info/debug → Replace with $CUSTOM_LOGGER.debug(...) which is dev-only by default"
+      else
+        echo "$file_loc — [WARN] console.info/debug in production code → Remove or guard with if (__DEV__)"
+      fi
       ISSUES=$((ISSUES + 1))
     done
 
@@ -140,6 +181,7 @@ grep -rn --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js" \
     done
 
 # Production-critical logic inside __DEV__ blocks (anti-pattern)
+# Skip __DEV__ blocks that only contain console.log (this is the correct pattern for worklet code)
 echo ""
 echo "--- Production Logic Inside __DEV__ Block ---"
 grep -rn --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js" \
@@ -149,6 +191,11 @@ grep -rn --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js" \
       file=$(echo "$line" | cut -d: -f1)
       lineno=$(echo "$line" | cut -d: -f2)
       context=$(sed -n "${lineno},$((lineno + 10))p" "$file" 2>/dev/null)
+      # Skip if the __DEV__ block only wraps console.log/warn/error (that's the correct pattern)
+      match_line=$(sed -n "${lineno}p" "$file" 2>/dev/null)
+      if echo "$match_line" | grep -q 'console\.\(log\|warn\|error\|debug\|info\)'; then
+        continue
+      fi
       if echo "$context" | grep -q 'navigate\|dispatch\|setState\|fetch(\|api\.'; then
         echo "$file:$lineno — [WARN] Production-critical logic inside __DEV__ block → State changes/navigation inside __DEV__ blocks will not run in production; this may be a bug"
         ISSUES=$((ISSUES + 1))

package/skills/react-native-performance/scanners/scan-memory-leaks.sh

@@ -151,6 +151,7 @@ grep -rln --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js"
 # subscribe, addEventListener, setInterval, AppState) catch these patterns more reliably.
 
 # AppState.addEventListener without remove
+# Skip module-level singletons and class constructors — they intentionally persist for app lifetime
 echo ""
 echo "--- AppState.addEventListener Without Cleanup ---"
 grep -rln --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js" 'AppState' "$DIR" 2>/dev/null \
@@ -158,8 +159,19 @@ grep -rln --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js"
   | while IFS= read -r file; do
       if grep -q 'AppState\.addEventListener\|AppState\.addListener' "$file" \
          && ! grep -q '\.remove()\|removeEventListener' "$file"; then
+        # Only flag files that use useEffect (React component/hook context)
+        # Module-level listeners and class constructor listeners are singletons — no cleanup needed
+        if ! grep -q 'useEffect' "$file"; then
+          continue
+        fi
         grep -n 'AppState\.addEventListener\|AppState\.addListener' "$file" | while IFS= read -r match; do
           lineno=$(echo "$match" | cut -d: -f1)
+          # Skip if the line is inside a class constructor or module-level scope
+          # Check if there's a class/constructor context above this line
+          preceding=$(sed -n "1,${lineno}p" "$file" 2>/dev/null)
+          if echo "$preceding" | grep -q 'class .*{' && echo "$preceding" | grep -q 'constructor('; then
+            continue
+          fi
           echo "$file:$lineno — [ERROR] AppState.addEventListener without cleanup → Store subscription and call subscription.remove() in useEffect cleanup"
           ISSUES=$((ISSUES + 1))
         done
@@ -231,6 +243,29 @@ grep -rln --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js"
       fi
     done
 
+# AbortSignal.addEventListener("abort", ...) without { once: true }
+# When composing AbortControllers (e.g. timeout + user cancel), each listener on the
+# upstream signal accumulates if not cleaned up. { once: true } auto-removes after firing.
+echo ""
+echo "--- AbortSignal addEventListener Without { once: true } ---"
+grep -rn --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js" \
+  '\.addEventListener.*abort' "$DIR" 2>/dev/null \
+  | grep -v node_modules | grep -v '__tests__' | grep -v '\.test\.' | grep -v '\.spec\.' \
+  | while IFS= read -r line; do
+      file=$(echo "$line" | cut -d: -f1)
+      lineno=$(echo "$line" | cut -d: -f2)
+      match_text=$(echo "$line" | cut -d: -f3-)
+      # Check if { once: true } is present on the same line or within the next 2 lines
+      context=$(sed -n "${lineno},$((lineno + 2))p" "$file" 2>/dev/null)
+      if ! echo "$context" | grep -q 'once.*true\|{ once: true }'; then
+        # Check if there's a matching removeEventListener for cleanup
+        if ! grep -q 'removeEventListener.*abort' "$file"; then
+          echo "$file:$lineno — [WARN] addEventListener(\"abort\", fn) without { once: true } → Listeners accumulate on reused signals causing memory leak; add { once: true } as 3rd arg or call removeEventListener in cleanup"
+          ISSUES=$((ISSUES + 1))
+        fi
+      fi
+    done
+
 # Reanimated useAnimatedReaction without cancelAnimation cleanup
 echo ""
 echo "--- useAnimatedReaction Without cancelAnimation Cleanup ---"

package/skills/react-native-performance/scanners/scan-rendering.sh

@@ -30,12 +30,35 @@ grep -rn --include="*.tsx" --include="*.jsx" --include="*.ts" --include="*.js" '
     done
 
 # key={index} or key={i} or key={idx}
+# Skip static/skeleton lists where index keys are safe (never reordered, no unique IDs)
 echo ""
 echo "--- Index as List Key ---"
 grep -rn --include="*.tsx" --include="*.jsx" 'key={index}\|key={i}\b\|key={idx}' "$DIR" 2>/dev/null \
   | grep -v node_modules \
   | while IFS= read -r line; do
-      file_loc=$(echo "$line" | cut -d: -f1,2)
+      file=$(echo "$line" | cut -d: -f1)
+      lineno=$(echo "$line" | cut -d: -f2)
+      file_loc="$file:$lineno"
+      content=$(echo "$line" | cut -d: -f3-)
+
+      # Check surrounding context (5 lines before, 2 after) for skeleton/static patterns
+      context=$(sed -n "$((lineno > 5 ? lineno - 5 : 1)),$((lineno + 2))p" "$file" 2>/dev/null)
+
+      # Skip 1: Static skeleton arrays (Array.from, Array(N), new Array)
+      if echo "$context" | grep -qE 'Array\.from|Array\([0-9]|new Array|\.fill\(|Skeleton|skeleton'; then
+        continue
+      fi
+
+      # Skip 2: Files that are skeleton components (filename contains skeleton/loading)
+      if echo "$file" | grep -qiE 'skeleton|loading-skeleton|placeholder'; then
+        continue
+      fi
+
+      # Skip 3: Static enum/constant arrays that never reorder
+      if echo "$context" | grep -qE 'const\s+\[.*\]\s*=|\.entries\(\)|Object\.keys|Object\.values'; then
+        continue
+      fi
+
       echo "$file_loc — [ERROR] Using index as key causes O(n) re-renders → Use stable unique ID (item.id)"
       ISSUES=$((ISSUES + 1))
     done

package/skills/react-native-performance/scanners/scan-state-network.sh

@@ -44,13 +44,29 @@ grep -rln --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js"
     done
 
 # Zustand store subscribed without selector
+# Skip commented-out code and store definition files (where the hook is created, not called)
 echo ""
 echo "--- Zustand Store Without Selector ---"
 grep -rn --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js" \
   'useStore()\|use[A-Z][a-zA-Z]*Store()' "$DIR" 2>/dev/null \
   | grep -v node_modules | grep -v '__tests__' | grep -v '\.test\.' | grep -v '\.spec\.' \
   | while IFS= read -r line; do
-      file_loc=$(echo "$line" | cut -d: -f1,2)
+      file=$(echo "$line" | cut -d: -f1)
+      lineno=$(echo "$line" | cut -d: -f2)
+      content=$(echo "$line" | cut -d: -f3-)
+      file_loc="$file:$lineno"
+
+      # Skip commented-out lines (// or * at start, or inside block comments)
+      trimmed=$(echo "$content" | sed 's/^[[:space:]]*//')
+      if echo "$trimmed" | grep -qE '^\s*(//|/?\*|\*)'; then
+        continue
+      fi
+
+      # Skip store definition files (where create() defines the hook)
+      if grep -q 'create(' "$file" && grep -q 'zustand\|from.*create' "$file"; then
+        continue
+      fi
+
       echo "$file_loc — [ERROR] Zustand store subscribed without selector → Pass a selector: useStore(state => state.field) to avoid re-renders on unrelated state changes"
       ISSUES=$((ISSUES + 1))
     done