@templmf/temp-solf-lmf 0.0.27 → 0.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@templmf/temp-solf-lmf",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "description": "",
   "main": "index.js",
   "scripts": {

package/skills/code-reviewer/SKILL.md

@@ -0,0 +1,482 @@
+---
+name: code-reviewer
+description:
+  Use this skill to review frontend code professionally. It supports both local changes(staged or working tree) and remote Pull Requests (by ID or URL). Focuses on correctness, maintainability, browser compatibility, memory leaks, XSS vulnerabilities, and modern JavaScript/CSS best practices. Trigger whenever the user asks to "review code", "review PR", "check my changes", or mentions code quality concerns in a frontend/web project.
+---
+
+# Frontend Code Reviewer
+
+A professional code review skill tailored for frontend projects. In addition to general
+code quality, this skill pays special attention to browser compatibility, security
+vulnerabilities, memory management, and modern JavaScript/CSS pitfalls.
+
+---
+
+## Workflow
+
+### 1. Determine Review Target
+
+- **Remote PR**: If the user provides a PR number or URL (e.g., "Review PR #123"), target that remote PR.
+- **Local Changes**: If no specific PR is mentioned, or the user says "review my changes", target current local file system state (staged and unstaged).
+
+---
+
+### 2. Preparation
+
+#### For Remote PRs:
+```bash
+gh pr checkout <PR_NUMBER>
+npm run preflight   # or yarn / pnpm equivalent
+```
+Read the PR description and existing comments to understand intent and history.
+
+#### For Local Changes:
+```bash
+git status
+git diff            # working tree
+git diff --staged   # staged changes
+```
+If changes are substantial, ask whether to run `npm run preflight` first.
+
+---
+
+### 3. In-Depth Analysis
+
+Analyze changes across the following pillars. **Frontend-specific checks are marked 🌐.**
+
+---
+
+#### ✅ Correctness
+- Does the code achieve its stated purpose without bugs or logical errors?
+- Are async flows (Promise chains, async/await, event callbacks) handled correctly?
+- Are there race conditions or unhandled rejections?
+
+---
+
+#### 🌐 Browser Compatibility
+Check whether any JS, CSS, or Web API used has limited browser support.
+
+**JavaScript — flag if used without transpilation/polyfill:**
+- Optional chaining `?.`, nullish coalescing `??` (ES2020)
+- Logical assignment `||=`, `&&=`, `??=` (ES2021)
+- `Array.at()`, `Object.hasOwn()`, `structuredClone()` (ES2022+)
+- Top-level `await` (requires ES module context)
+- `WeakRef`, `FinalizationRegistry`
+- Private class fields `#field`
+
+**Regex — flag if used without transpilation/polyfill:**
+
+| Feature | Syntax | Introduced | Risk |
+|---------|--------|------------|------|
+| Named capture groups | `(?<name>...)` | ES2018 | No IE support |
+| Lookbehind assertions | `(?<=...)` `(?<!...)` | ES2018 | No IE; Safari < 16.4 partial |
+| `s` (dotAll) flag | `/./s` | ES2018 | No IE |
+| Unicode property escapes | `\p{Letter}` | ES2018 | No IE; needs `u` flag |
+| `d` (indices) flag | `/.../d` | ES2022 | Chrome 90+, Firefox 88+, Safari 15+ |
+| `v` (unicodeSets) flag | `/.../v` | ES2024 | Chrome 112+, Firefox 116+, Safari 17+ — flag aggressively |
+| `hasIndices` / `String.prototype.matchAll` | — | ES2020 | No IE |
+
+```js
+// ❌ Lookbehind — broken in Safari < 16.4
+const price = str.replace(/(?<=\$)\d+/, 'XX')
+
+// ❌ Unicode property escape — no IE support, requires `u` flag
+const isLetter = /^\p{Letter}+$/u.test(input)
+
+// ❌ `v` flag (unicodeSets) — very new, avoid without polyfill
+const regex = /[\p{Emoji}&&\p{ASCII}]/v
+
+// ✅ Fallback: explicit character ranges for broad compatibility
+const isLetter = /^[a-zA-Z\u00C0-\u024F]+$/.test(input)
+```
+
+**Regex performance — also flag these patterns:**
+```js
+// ❌ Catastrophic backtracking (ReDoS risk)
+// Nested quantifiers on overlapping patterns
+/^(a+)+$/.test(input)         // exponential backtracking
+/(x+x+)+y/.test(input)        // same issue
+
+// ❌ Unbounded greedy match on long strings
+/.*foo.*bar/.test(longString)  // use lazy .+? or anchors
+
+// ✅ Use atomic groups or possessive quantifiers (ES2018+)
+// Or restructure to avoid ambiguity
+```
+
+> **Reference**: https://caniuse.com/?search=regex and https://kangax.github.io/compat-table/es2016plus/
+
+---
+
+**CSS — flag if used without fallback:**
+- `container` queries
+- `:has()` selector
+- `@layer` cascade layers
+- `color-mix()`, `oklch()` color functions
+- `subgrid` layout
+- `scrollbar-gutter`, `overscroll-behavior`
+
+**Web APIs — verify support before use:**
+- `ResizeObserver`, `IntersectionObserver` (good support, but verify target)
+- `Clipboard API`, `Web Share API`, `File System Access API`
+- `navigator.scheduling.isInputPending()`
+- CSS Houdini / Paint Worklet APIs
+
+> **Reference**: Always check https://caniuse.com and https://developer.mozilla.org for support tables.
+> Flag usage with < 90% global browser support unless a polyfill or graceful fallback is present.
+
+---
+
+#### 🌐 Memory Leaks
+Look for patterns that prevent garbage collection or accumulate resources over time:
+
+**Event listeners:**
+```js
+// ❌ Listener added but never removed
+window.addEventListener('resize', handler)
+
+// ✅ Cleaned up properly
+useEffect(() => {
+  window.addEventListener('resize', handler)
+  return () => window.removeEventListener('resize', handler)
+}, [])
+```
+
+**Timers:**
+```js
+// ❌ Interval never cleared
+setInterval(poll, 1000)
+
+// ✅ Cleared on unmount / cleanup
+const id = setInterval(poll, 1000)
+return () => clearInterval(id)
+```
+
+**Closures capturing large objects:**
+- Functions closing over DOM nodes, large arrays, or entire component state unnecessarily
+- Caches or memoization maps with no eviction policy (unbounded growth)
+
+**Detached DOM nodes:**
+- References to DOM elements stored in closures or variables after the element is removed
+
+**Observers / subscriptions not unsubscribed:**
+- `MutationObserver`, `IntersectionObserver`, `ResizeObserver` — must call `.disconnect()`
+- Pub/sub or event bus subscriptions — must call `.off()` / `.unsubscribe()`
+- RxJS / reactive streams — must call `.unsubscribe()`
+- WebSocket connections not closed
+
+**Circular references** in data structures that prevent GC.
+
+---
+
+#### 🌐 XSS (Cross-Site Scripting) Vulnerabilities
+Flag any code that inserts untrusted content into the DOM without sanitization.
+
+**Dangerous patterns:**
+```js
+// ❌ Direct HTML injection from user input
+element.innerHTML = userInput
+document.write(userInput)
+$('#el').html(userInput)
+
+// ❌ React escape hatch with unsanitized data
+<div dangerouslySetInnerHTML={{ __html: userInput }} />
+
+// ❌ Dynamic script creation
+const s = document.createElement('script')
+s.src = userControlledUrl
+
+// ❌ eval / Function constructor with external data
+eval(apiResponse.code)
+new Function(dynamicString)()
+
+// ❌ href / src / data: URI injection
+<a href={userInput}>   // could be javascript: URI
+<img src={userInput}>  // SSRF / content injection risk
+```
+
+**Safe alternatives:**
+```js
+// ✅ Use textContent for plain text
+element.textContent = userInput
+
+// ✅ Sanitize before innerHTML (use DOMPurify)
+import DOMPurify from 'dompurify'
+element.innerHTML = DOMPurify.sanitize(userInput)
+
+// ✅ Validate URLs before use
+const url = new URL(userInput)
+if (!['http:', 'https:'].includes(url.protocol)) throw new Error('Invalid protocol')
+```
+
+**Also check:**
+- `postMessage` handlers — validate `event.origin` before trusting `event.data`
+- `localStorage` / `sessionStorage` values rendered into the DOM
+- URL query params or hash fragments used in rendering (reflected XSS)
+- CSP headers — note if inline scripts or `unsafe-eval` directives are present in config files
+
+---
+
+#### 🌐 Other Frontend Security Concerns
+- **CSRF**: Are state-mutating requests protected with tokens or `SameSite` cookies?
+- **Sensitive data exposure**: API keys, tokens, or secrets hardcoded in frontend source
+- **Prototype pollution**: Unsafe `Object.assign({}, untrustedData)` or `_.merge` with user input
+- **Clickjacking**: Missing `X-Frame-Options` or CSP `frame-ancestors` in server config
+- **Open redirects**: `window.location = userInput` without validation
+
+---
+
+#### 🌐 Performance
+
+**General:**
+- **Large bundle imports**: `import _ from 'lodash'` instead of `import debounce from 'lodash/debounce'`
+- **Layout thrash**: Interleaved DOM reads and writes in loops (use `requestAnimationFrame` batching)
+- **Unthrottled scroll/resize handlers**: Should use `throttle` or `debounce`
+- **Image optimization**: Missing `loading="lazy"`, `srcset`, or WebP format
+- **Render-blocking resources**: Synchronous scripts in `<head>` without `defer` / `async`
+
+**React-specific:**
+- **Unnecessary re-renders**: Missing `React.memo`, `useMemo`, `useCallback` where warranted
+- **Missing dependency arrays**: `useEffect` / `useCallback` without deps will run on every render
+- **Stale closures**: Deps array omitting values used inside the callback
+
+**Vue-specific:**
+- **Unnecessary re-renders**: Computed properties depending on non-reactive data won't update; reactive data not needed for rendering should use plain variables, not `ref`/`reactive`
+- **`v-if` vs `v-show`**: Use `v-show` for frequently toggled elements; `v-if` for rarely shown ones
+- **Missing `:key` on `v-for`**: Always provide a stable, unique `:key`; avoid using array index as key when list order may change
+- **`v-for` + `v-if` on same element**: Never combine — `v-if` has higher priority in Vue 3 (lower in Vue 2), leading to confusing behavior; use a wrapping `<template>` instead
+
+---
+
+#### 🌐 Vue-Specific Issues
+
+**Reactivity pitfalls (Options API):**
+```js
+// ❌ Adding new properties to reactive object directly (Vue 2 only)
+this.obj.newProp = value           // NOT reactive in Vue 2
+
+// ✅ Vue 2: use Vue.set
+this.$set(this.obj, 'newProp', value)
+
+// ✅ Vue 3: no issue — Proxy-based reactivity handles new props
+```
+
+**Reactivity pitfalls (Composition API):**
+```js
+// ❌ Destructuring loses reactivity
+const { count } = useMyComposable()   // count is now a plain value
+
+// ✅ Keep the ref, or use toRefs
+const { count } = toRefs(useMyComposable())
+
+// ❌ Replacing entire reactive object breaks reactivity
+const state = reactive({ count: 0 })
+state = reactive({ count: 1 })       // original reference is lost
+
+// ✅ Mutate properties, or use ref + .value
+state.count = 1
+```
+
+**`watch` vs `watchEffect` misuse:**
+```js
+// ❌ Watching a non-ref plain value — will never trigger
+watch(count, handler)        // count must be a ref, reactive prop, or getter
+
+// ✅ Correct patterns
+watch(() => state.count, handler)
+watch(countRef, handler)
+
+// ❌ watchEffect with heavy side effects and no cleanup
+watchEffect(() => {
+  fetch(`/api?q=${query.value}`)   // fires on every dependency change, no abort
+})
+
+// ✅ Provide cleanup for async work
+watchEffect((onCleanup) => {
+  const controller = new AbortController()
+  fetch(`/api?q=${query.value}`, { signal: controller.signal })
+  onCleanup(() => controller.abort())
+})
+```
+
+**Memory leaks in Vue:**
+```js
+// ❌ Event bus or global emitter subscribed in setup/mounted, never removed
+emitter.on('event', handler)
+
+// ✅ Clean up in onUnmounted
+onMounted(() => emitter.on('event', handler))
+onUnmounted(() => emitter.off('event', handler))
+
+// ❌ setInterval / setTimeout in setup without cleanup
+const id = setInterval(poll, 1000)
+
+// ✅ Clear in onUnmounted
+onUnmounted(() => clearInterval(id))
+
+// ❌ Third-party library instance (charts, maps, players) not destroyed
+onMounted(() => { chart = new Chart(canvas, options) })
+// missing: onUnmounted(() => chart.destroy())
+```
+
+**XSS in Vue templates:**
+```html
+<!-- ❌ v-html with unsanitized user content -->
+<div v-html="userInput" />
+
+<!-- ✅ Sanitize first -->
+<div v-html="DOMPurify.sanitize(userInput)" />
+
+<!-- ❌ Dynamic component name from user input -->
+<component :is="userDefinedComponent" />
+```
+
+**Props & emits best practices:**
+```js
+// ❌ Mutating props directly (violates one-way data flow)
+props.modelValue = newVal
+
+// ✅ Emit update event instead
+emit('update:modelValue', newVal)
+
+// ❌ Missing emits declaration (Vue 3) — causes attribute fallthrough warnings
+// ✅ Always declare emits
+const emit = defineEmits(['update:modelValue', 'close'])
+
+// ❌ No prop validation
+defineProps({ count: Number })
+
+// ✅ With validator
+defineProps({
+  count: { type: Number, required: true, validator: v => v >= 0 }
+})
+```
+
+**`<script setup>` specific checks:**
+- `defineProps` / `defineEmits` / `defineExpose` must be called at top level, not inside conditions
+- Avoid using `await` at top level without `<Suspense>` wrapping the component
+- Components imported in `<script setup>` are auto-registered — flag if the same component is also manually registered in `components:` (duplication)
+
+**Vue Router guards — memory & navigation leaks:**
+```js
+// ❌ beforeEach guard added inside a component lifecycle — duplicates on re-mount
+onMounted(() => router.beforeEach(guard))
+
+// ✅ Register global guards only once, outside component lifecycle (e.g., main.js)
+// Or use per-route guards in route config
+```
+
+**Pinia / Vuex state management:**
+```js
+// ❌ Storing non-serializable values in store (DOM nodes, class instances, functions)
+// ❌ Direct state mutation outside actions (Vuex strict mode violation)
+// ✅ Always mutate state through actions/mutations
+// ✅ Use storeToRefs() when destructuring Pinia store to preserve reactivity
+const { count } = storeToRefs(useCounterStore())
+```
+
+---
+
+#### Maintainability
+- Is the code clean, modular, and easy to modify?
+- Does it follow the project's established patterns and naming conventions?
+- Are magic numbers and strings replaced with named constants?
+
+---
+
+#### Readability
+- Are complex logic blocks commented?
+- Is formatting consistent with the project's linting rules?
+
+---
+
+#### Edge Cases & Error Handling
+- Are network errors and empty/null responses handled gracefully?
+- Do loading and error UI states exist where needed?
+- Are forms validated client-side before submission?
+
+---
+
+#### Testability
+- Is new logic covered by unit or integration tests?
+- Suggest additional test cases for edge cases, async flows, or security scenarios if missing.
+
+---
+
+### 4. Provide Feedback
+
+#### Structure
+
+**Summary**
+High-level overview: what the PR/change does and the overall quality impression.
+
+**Findings** (group by severity)
+
+| Severity | Label | Meaning |
+|----------|-------|---------|
+| 🔴 | **Critical** | Bugs, XSS, memory leaks, breaking changes — must fix |
+| 🟡 | **Improvement** | Better patterns, performance, compatibility issues |
+| 🔵 | **Nitpick** | Formatting, naming, minor style — optional |
+
+For each finding include:
+- **Location**: file + line reference
+- **Issue**: what the problem is
+- **Why it matters**: brief explanation
+- **Suggestion**: concrete fix or alternative
+
+**Conclusion**
+- ✅ **Approved** — acknowledge specific value of the contribution
+- 🔄 **Request Changes** — summarize what must be addressed before merging
+
+#### Tone
+- Constructive, professional, and friendly
+- Always explain *why* a change is requested
+- Distinguish must-fix from nice-to-have clearly
+
+---
+
+### 5. Cleanup (Remote PRs only)
+After the review, ask the user if they want to switch back to the default branch:
+```bash
+git checkout main   # or master
+```
+
+---
+
+## Quick Reference — High-Risk Patterns to Always Check
+
+```
+// XSS
+innerHTML / outerHTML / insertAdjacentHTML  → XSS risk
+dangerouslySetInnerHTML (React)             → XSS risk
+v-html (Vue)                                → XSS risk
+eval / new Function                         → XSS / code injection
+href={userInput} / src={userInput}          → URL injection
+
+// Memory leaks
+addEventListener without removeEventListener → memory leak
+setInterval / setTimeout without clear*     → memory leak
+Observer without .disconnect()              → memory leak
+emitter.on without .off in onUnmounted      → Vue memory leak
+chart/map instance without .destroy()       → Vue memory leak
+
+// Vue reactivity
+destructuring reactive/composable           → loses reactivity (use toRefs)
+replacing entire reactive() object          → breaks reactivity
+props.xxx = value                           → illegal prop mutation
+v-html with unsanitized input               → XSS
+v-for without :key / :key={index}           → rendering bugs
+watch(plainValue, ...)                      → watcher never triggers
+storeToRefs missing on Pinia destructure    → loses reactivity
+
+// React
+useEffect missing deps array                → runs every render
+stale closure in useEffect                  → stale deps
+
+// General
+import entireLibrary from 'lib'             → bundle bloat
+?.  ??  #privateField  Array.at()           → browser compat check
+/regex/s  /regex/d  /regex/v  (?<=...)     → regex browser compat
+(?<name>...)  \p{Letter}                   → regex browser compat
+(a+)+  .*foo.*bar                          → ReDoS / backtracking risk
+```

package/skills/daily-qa-skill/SKILL.md

@@ -0,0 +1,147 @@
+---
+name: daily-tech-qa
+description: A daily tech Q&A assistant for answering questions about installation, version info, official links, and configuration of common developer tools. Use this skill whenever the user asks how to install a tool (e.g. Node.js, Python, Docker, Git), what versions are available, where to find the official website or docs, how to configure an environment, or how to use a package manager. Trigger on keywords like "how to install", "what versions", "official site", "how to configure", "how to use". Always provide official links, recommended versions, and multi-platform installation instructions.
+---
+
+# Daily Tech Q&A Skill
+
+## Goal
+
+Provide accurate, practical information about developer tools, including:
+- 📦 Installation instructions (multi-platform)
+- 🔖 Version info and recommended versions
+- 🔗 Official documentation links
+- ⚙️ Basic configuration tips
+- 🚀 Quick-start guidance
+
+---
+
+## Response Structure
+
+Each answer should follow this structure (include relevant sections based on the question):
+
+### 1. Brief Introduction (1-2 sentences)
+What the tool is and what it's used for.
+
+### 2. Official Resources
+- 🌐 Website: `https://...`
+- 📖 Docs: `https://...`
+- 💾 Download: `https://...`
+- 🐙 GitHub: `https://...` (if applicable)
+
+### 3. Version Info
+- **Latest Stable (LTS)**: Recommended for production
+- **Latest (Current)**: Newest features, may be less stable
+- Link to full version list
+
+### 4. Installation (by Platform)
+
+#### macOS
+```bash
+# Recommended: use a package manager
+brew install <package>
+
+# Or download installer from official site
+```
+
+#### Windows
+```powershell
+# Recommended: use winget or Chocolatey
+winget install <package>
+# Or download .exe installer from official site
+```
+
+#### Linux (Ubuntu/Debian)
+```bash
+# Using apt or official script
+sudo apt install <package>
+```
+
+#### Universal (Version Manager)
+Consider using a version manager (e.g. nvm, pyenv, sdkman) for easy multi-version switching.
+
+### 5. Verify Installation
+```bash
+<tool> --version
+```
+
+### 6. Quick Start / Common Commands (optional)
+List 3-5 most commonly used commands or config options.
+
+### 7. Notes / Tips (optional)
+- Environment variable setup
+- Mirror/proxy sources
+- Common pitfalls
+
+---
+
+## Tool Reference
+
+Read `references/tools.md` for pre-compiled info on common tools (Node.js, Python, Docker, Git, etc.).
+
+---
+
+## Search Strategy
+
+When the user asks about version info or the latest installation method:
+1. **Always use web_search for the latest version** - don't rely on training data (versions change frequently)
+2. Query format: `<tool name> latest version 2025` or `<tool name> download`
+3. Prefer content from official websites
+
+---
+
+## Language & Style
+
+- Respond in the user's language
+- Always specify language type in code blocks
+- Links should be directly clickable
+- If a mirror or proxy source is available, list it separately
+- Be concise and clear - avoid redundancy
+
+---
+
+## Example Q&A
+
+**Q: How do I install Node.js? What versions are available?**
+
+Node.js is a JavaScript runtime built on Chrome's V8 engine, widely used for server-side development and frontend tooling.
+
+**Official Resources**
+- 🌐 Website: https://nodejs.org
+- 📖 Docs: https://nodejs.org/docs
+- 💾 Download: https://nodejs.org/en/download
+- 🐙 GitHub: https://github.com/nodejs/node
+
+**Versions**
+- **LTS (Long-Term Support)**: Recommended for production - currently v20.x (Iron)
+- **Current**: Latest features, less battle-tested
+- Full version list: https://nodejs.org/en/about/previous-releases
+
+**Installation**
+
+macOS:
+```bash
+brew install node
+# Or use nvm for multi-version management (recommended)
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
+nvm install --lts
+```
+
+Windows:
+```powershell
+winget install OpenJS.NodeJS.LTS
+# Or download the .msi installer from the official site
+```
+
+Linux (Ubuntu):
+```bash
+# Using the official NodeSource script
+curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
+sudo apt-get install -y nodejs
+```
+
+**Verify Installation**
+```bash
+node --version
+npm --version
+```