@nano-step/skill-manager 5.6.1 → 5.6.2

package/skills/pr-code-reviewer/checklists/frontend-vue-nuxt.md

@@ -0,0 +1,426 @@
+# Frontend Vue/Nuxt Checklist
+
+Comprehensive review checklist for Vue 3/Nuxt 3 frontend PRs (tradeit, tradeit-admin, audit-dashboard-frontend, etc.)
+
+---
+
+## 1. State Management
+
+### CRITICAL - Must Check
+
+| Check | Pattern | Why |
+|-------|---------|-----|
+| Vuex vs Pinia correct | `rootState.x` vs `useXStore()` | Vuex can't access Pinia |
+| Store registered | Module in `store/index.js` | Undefined state |
+| Computed get/set pattern | `computed({ get, set })` | Two-way binding |
+| storeToRefs for destructuring | `storeToRefs(store)` | Maintains reactivity |
+
+### Detection Patterns
+
+```javascript
+// CRITICAL: Vuex accessing Pinia store (will be undefined)
+// In Vuex action:
+const rate = rootState.currency.selectedRate  // currency is Pinia!
+
+// SECURE: Use Pinia directly
+import { useCurrencyStore } from '~/store/useCurrencyStore'
+const currencyStore = useCurrencyStore()
+const rate = currencyStore.selectedRate
+
+// CRITICAL: Store not registered
+// store/index.js missing:
+modules: {
+  // currency: currencyModule  // MISSING!
+}
+
+// WARNING: Destructuring loses reactivity
+const { items, loading } = useInventoryStore()  // Not reactive!
+
+// SECURE: Use storeToRefs
+const store = useInventoryStore()
+const { items, loading } = storeToRefs(store)
+
+// CRITICAL: Direct mutation (Vuex)
+state.items.push(newItem)  // Mutation outside mutation handler!
+
+// SECURE: Use mutation
+commit('ADD_ITEM', newItem)
+```
+
+---
+
+## 2. Reactivity
+
+### CRITICAL - Must Check
+
+| Check | Pattern | Why |
+|-------|---------|-----|
+| ref() for primitives | `ref(0)` not `reactive(0)` | reactive() doesn't work on primitives |
+| .value in script | `count.value++` | Required for refs in script |
+| toRefs for destructuring | `toRefs(props)` | Maintains reactivity |
+| No direct prop mutation | `emit('update:x', newVal)` | One-way data flow |
+
+### Detection Patterns
+
+```javascript
+// WARNING: reactive() on primitive
+const count = reactive(0)  // Won't work!
+
+// SECURE: ref() for primitives
+const count = ref(0)
+
+// CRITICAL: Missing .value in script
+const count = ref(0)
+count++  // Wrong! count is a ref object
+
+// SECURE: Use .value
+count.value++
+
+// CRITICAL: Mutating prop directly
+props.items.push(newItem)  // Mutating parent state!
+
+// SECURE: Emit event
+emit('add-item', newItem)
+
+// WARNING: Destructuring props loses reactivity
+const { modelValue } = defineProps(['modelValue'])
+watch(modelValue, ...)  // Won't trigger!
+
+// SECURE: Use toRefs or computed
+const props = defineProps(['modelValue'])
+watch(() => props.modelValue, ...)
+```
+
+---
+
+## 3. Network Calls
+
+### CRITICAL - Must Check
+
+| Check | Pattern | Why |
+|-------|---------|-----|
+| Use getAxiosInstance() | Not raw axios | Includes auth, base URL |
+| Error handling | try/catch or .catch() | User feedback |
+| Loading state managed | `loading.value = true/false` | UX |
+| Response fields validated | Check before access | Defensive coding |
+
+### Detection Patterns
+
+```javascript
+// WARNING: Raw axios
+import axios from 'axios'
+const { data } = await axios.get('/api/user')
+
+// SECURE: Use instance
+import { getAxiosInstance } from '~/network/axiosInstance'
+const axios = getAxiosInstance()
+const { data } = await axios.get('/api/user')
+
+// CRITICAL: No error handling
+const fetchData = async () => {
+  const { data } = await axios.get('/api/items')
+  items.value = data.items
+}
+
+// SECURE: With error handling
+const fetchData = async () => {
+  try {
+    loading.value = true
+    const { data } = await axios.get('/api/items')
+    items.value = data.items
+  } catch (e) {
+    error.value = e.message
+  } finally {
+    loading.value = false
+  }
+}
+
+// CRITICAL: Assuming response field exists (PR #1101 issue!)
+const imgUrl = item.imgURL  // undefined if backend changed!
+
+// SECURE: Defensive access
+const imgUrl = item.imgURL ?? getFallbackImage(item.groupId)
+```
+
+---
+
+## 4. Component Patterns
+
+### CRITICAL - Must Check
+
+| Check | Pattern | Why |
+|-------|---------|-----|
+| Props typed | `defineProps<{ x: string }>()` | Type safety |
+| Emits declared | `defineEmits(['update:x'])` | Documentation |
+| v-if/v-for not on same element | Use template wrapper | Vue limitation |
+| Key on v-for | `:key="item.id"` | Efficient updates |
+
+### Detection Patterns
+
+```vue
+<!-- CRITICAL: v-if and v-for on same element -->
+<div v-for="item in items" v-if="item.active">  <!-- Wrong! -->
+
+<!-- SECURE: Use template -->
+<template v-for="item in items" :key="item.id">
+  <div v-if="item.active">...</div>
+</template>
+
+<!-- WARNING: Missing key -->
+<div v-for="item in items">  <!-- No key! -->
+
+<!-- SECURE: With key -->
+<div v-for="item in items" :key="item.id">
+
+<!-- WARNING: Untyped props -->
+const props = defineProps(['modelValue', 'items'])
+
+<!-- SECURE: Typed props -->
+interface Props {
+  modelValue: string
+  items: Item[]
+}
+const props = defineProps<Props>()
+```
+
+---
+
+## 5. Composables
+
+### CRITICAL - Must Check
+
+| Check | Pattern | Why |
+|-------|---------|-----|
+| Returns reactive refs | `return { items, loading }` | Reactivity preserved |
+| No `this` usage | Composables don't have `this` | Runtime error |
+| Cleanup on unmount | `onUnmounted(() => ...)` | Memory leaks |
+| Named exports | `export function useX()` | Tree shaking |
+
+### Detection Patterns
+
+```javascript
+// CRITICAL: Using this in composable
+export function useInventory() {
+  this.items = []  // TypeError! No 'this' in composables
+}
+
+// SECURE: Use refs
+export function useInventory() {
+  const items = ref([])
+  return { items }
+}
+
+// WARNING: Not returning reactive
+export function useCounter() {
+  let count = 0  // Not reactive!
+  return { count }
+}
+
+// SECURE: Return refs
+export function useCounter() {
+  const count = ref(0)
+  return { count }
+}
+
+// WARNING: No cleanup
+export function useWebSocket() {
+  const ws = new WebSocket(url)
+  // Never closed!
+}
+
+// SECURE: Cleanup on unmount
+export function useWebSocket() {
+  const ws = new WebSocket(url)
+  onUnmounted(() => ws.close())
+  return { ws }
+}
+```
+
+---
+
+## 6. Nuxt-Specific
+
+### CRITICAL - Must Check
+
+| Check | Pattern | Why |
+|-------|---------|-----|
+| Client-only code guarded | `import.meta.client` | SSR errors |
+| Auto-imports from composables/ | Not utils/ | Only composables auto-imported |
+| useFetch for SSR data | Not axios in setup | SSR hydration |
+| definePageMeta for layouts | `definePageMeta({ layout: 'x' })` | Nuxt convention |
+
+### Detection Patterns
+
+```javascript
+// CRITICAL: Browser API in SSR
+const width = window.innerWidth  // ReferenceError on server!
+
+// SECURE: Guard with import.meta.client
+const width = import.meta.client ? window.innerWidth : 0
+
+// Or use onMounted
+onMounted(() => {
+  width.value = window.innerWidth
+})
+
+// CRITICAL: Using function from utils/ without import
+// In component:
+stripImageSizeFromUrl(url)  // undefined! utils/ not auto-imported
+
+// SECURE: Import explicitly
+import { stripImageSizeFromUrl } from '~/utils/helpers'
+
+// WARNING: axios in setup (SSR issues)
+const { data } = await axios.get('/api/items')
+
+// SECURE: useFetch for SSR
+const { data } = await useFetch('/api/items')
+```
+
+---
+
+## 7. i18n / Localization
+
+### WARNING - Should Check
+
+| Check | Pattern | Why |
+|-------|---------|-----|
+| No hardcoded strings | Use `$t('key')` | Localization |
+| Keys exist in locale files | Check en.js | Runtime errors |
+| Interpolation correct | `$t('key', { name })` | Dynamic content |
+
+### Detection Patterns
+
+```vue
+<!-- WARNING: Hardcoded string -->
+<button>Submit</button>
+
+<!-- SECURE: Use i18n -->
+<button>{{ $t('common.submit') }}</button>
+
+<!-- WARNING: Missing interpolation -->
+<p>{{ $t('welcome') }}</p>  <!-- "Welcome, {name}" shows literally -->
+
+<!-- SECURE: With interpolation -->
+<p>{{ $t('welcome', { name: user.name }) }}</p>
+```
+
+---
+
+## 8. Images & CDN
+
+### CRITICAL - Must Check
+
+| Check | Pattern | Why |
+|-------|---------|-----|
+| Use useCDNImage() | Not raw URLs | CDN optimization |
+| ImageWithFallback component | For item images | Handles missing images |
+| Lazy loading | `loading="lazy"` | Performance |
+
+### Detection Patterns
+
+```vue
+<!-- WARNING: Raw image URL -->
+<img :src="item.imgURL">  <!-- No fallback if undefined! -->
+
+<!-- SECURE: Use ImageWithFallback -->
+<ImageWithFallback :src="item.imgURL" :fallback="getFallback(item)" />
+
+<!-- WARNING: No lazy loading -->
+<img :src="url">
+
+<!-- SECURE: Lazy load -->
+<img :src="url" loading="lazy">
+```
+
+---
+
+## 9. Breaking Change Detection
+
+### Auto-Flag These Changes
+
+| Signal | Severity | Action |
+|--------|----------|--------|
+| Store module removed | CRITICAL | Search all consumers |
+| Composable return value changed | CRITICAL | Search all usages |
+| Network function signature changed | CRITICAL | Search all callers |
+| Component prop removed | WARNING | Search all usages |
+| Emit event renamed | WARNING | Search parent listeners |
+
+### Consumer Search Required
+
+```bash
+# For store changes
+grep -rn "useXStore" ./
+grep -rn "rootState.x" ./
+
+# For composable changes
+grep -rn "useComposable" ./
+
+# For component changes
+grep -rn "<ComponentName" ./
+```
+
+---
+
+## 10. Performance Checks
+
+### WARNING - Should Check
+
+| Check | Pattern | Why |
+|-------|---------|-----|
+| Large lists virtualized | `vue-virtual-scroller` | Memory |
+| Computed for derived state | Not methods | Caching |
+| v-once for static content | `<div v-once>` | Skip re-renders |
+| Async components for heavy | `defineAsyncComponent` | Code splitting |
+
+---
+
+## Quick Checklist
+
+Copy this for PR reviews:
+
+```markdown
+## Vue/Nuxt Frontend Review
+
+### State Management
+- [ ] Vuex/Pinia used correctly (not mixed)
+- [ ] Store modules registered
+- [ ] storeToRefs used for destructuring
+- [ ] No direct state mutation
+
+### Reactivity
+- [ ] ref() for primitives, reactive() for objects
+- [ ] .value used in script
+- [ ] Props not mutated directly
+
+### Network
+- [ ] getAxiosInstance() used (not raw axios)
+- [ ] Error handling present
+- [ ] Loading states managed
+- [ ] Response fields validated (defensive)
+
+### Components
+- [ ] Props typed with TypeScript
+- [ ] Emits declared
+- [ ] v-if/v-for not on same element
+- [ ] Keys on v-for
+
+### Nuxt-Specific
+- [ ] Client-only code guarded (import.meta.client)
+- [ ] Auto-imports only from composables/
+- [ ] useFetch for SSR data
+
+### i18n
+- [ ] No hardcoded user-facing strings
+- [ ] $t() keys exist in locale files
+
+### Images
+- [ ] useCDNImage() or ImageWithFallback used
+- [ ] Fallbacks for missing images
+
+### Breaking Changes
+- [ ] No store modules removed without consumer check
+- [ ] No composable signatures changed without search
+- [ ] No component props removed without search
+```

package/skills/pr-code-reviewer/checklists/review-checklist.md

@@ -0,0 +1,116 @@
+# PR Review Checklist
+
+Use this checklist for every PR review. Check off each item as you complete it.
+
+## Resume Detection (Phase -1)
+
+- [ ] Look for existing checkpoint: `find /tmp -maxdepth 1 -type d -name "pr-review-${repo}-${pr_number}-*"`
+- [ ] If found: read `manifest.json` from `.checkpoints/`
+- [ ] Validate checkpoint: check PR number and head SHA match
+- [ ] Ask user: "Resume from phase {next_phase}? (y/n)"
+- [ ] If yes: load manifest + phase files, jump to `next_phase`
+- [ ] If no or invalid: delete old directory, start fresh from Phase 0
+
+## Pre-Review (Phase 0)
+
+- [ ] Extract repo info: `owner/repo`, `pr_number`, `head_branch`
+- [ ] Create unique temp dir: `/tmp/pr-review-{repo}-{pr}-{timestamp}`
+- [ ] Clone repo to temp dir (shallow clone with `--depth=50`)
+- [ ] Verify correct branch is checked out (`git log --oneline -1`)
+- [ ] Record `$REVIEW_DIR` path for all subsequent phases
+- [ ] Print confirmation with path and branch name
+- [ ] Save checkpoint: `.checkpoints/phase-0-clone.json`
+- [ ] Update manifest: `completed_phase: 0`, `next_phase: 1`
+
+## Context Gathering (Phase 1)
+
+- [ ] Get PR metadata: title, description, author, base branch
+- [ ] Get changed files with diff
+- [ ] Read full file context from `$REVIEW_DIR` (not workspace repo)
+- [ ] Classify each file: LOGIC / STYLE / REFACTOR / NEW
+- [ ] Query nano-brain for past context on changed modules
+- [ ] Save checkpoint: `.checkpoints/phase-1-context.json`
+- [ ] Update manifest: `completed_phase: 1`, `next_phase: 1.5`
+
+## Linear Ticket Context (Phase 1.5)
+
+- [ ] Extract ticket ID from branch name, PR description, or PR title
+- [ ] If found: `linear_get_issue(id)` → fetch ticket details
+- [ ] If found: `linear_list_comments(issueId)` → fetch discussion
+- [ ] Extract acceptance criteria from ticket description
+- [ ] If images in description: `linear_extract_images(description)`
+- [ ] If not found: skip silently, continue without ticket context
+- [ ] Save checkpoint: `.checkpoints/phase-1.5-linear.json`
+- [ ] Update manifest: `completed_phase: 1.5`, `next_phase: 2`
+
+## Smart Tracing (Phase 2)
+
+- [ ] LOGIC changes: trace callers, callees, tests, types, data flow
+- [ ] STYLE changes: verify no hidden logic changes
+- [ ] REFACTOR changes: verify behavior preservation
+- [ ] Query nano-brain for known issues on changed functions
+- [ ] Save checkpoint: `.checkpoints/phase-2-tracing.json`
+- [ ] Update manifest: `completed_phase: 2`, `next_phase: 2.5`
+
+## PR Summary (Phase 2.5)
+
+- [ ] Write "What This PR Does" (1-3 sentences)
+- [ ] Categorize key changes (Feature/Bugfix/Refactor/etc.)
+- [ ] File-by-file summary with line numbers
+- [ ] Save checkpoint: `.checkpoints/phase-2.5-summary.json`
+- [ ] Update manifest: `completed_phase: 2.5`, `next_phase: 3`
+
+## Subagent Execution (Phase 3)
+
+- [ ] Include `$REVIEW_DIR` path in ALL subagent prompts
+- [ ] Launch Code Quality agent (explore)
+- [ ] After Code Quality completes: update `.checkpoints/phase-3-subagents.json` + manifest subagent_status
+- [ ] Launch Security & Logic agent (oracle)
+- [ ] After Security & Logic completes: update `.checkpoints/phase-3-subagents.json` + manifest subagent_status
+- [ ] Launch Docs & Best Practices agent (librarian)
+- [ ] After Docs & Best Practices completes: update `.checkpoints/phase-3-subagents.json` + manifest subagent_status
+- [ ] Launch Tests & Integration agent (general/quick)
+- [ ] After Tests & Integration completes: update `.checkpoints/phase-3-subagents.json` + manifest subagent_status
+- [ ] Collect ALL results (especially Oracle — never skip)
+- [ ] Update manifest: `completed_phase: 3`, `next_phase: 4`
+
+## Refinement (Phase 4)
+
+- [ ] Merge and deduplicate findings across agents
+- [ ] Apply severity filter (critical/warning keep, suggestion count-only)
+- [ ] Gap analysis — any subagent fail? Unreviewed files?
+- [ ] Second pass on gaps if needed
+- [ ] Save checkpoint: `.checkpoints/phase-4-refined.json`
+- [ ] Update manifest: `completed_phase: 4`, `next_phase: 5`
+
+## Report (Phase 5)
+
+- [ ] Save to `.opencode/reviews/{type}_{identifier}_{date}.md`
+- [ ] TL;DR with verdict and counts
+- [ ] Critical issues with full detail
+- [ ] Warnings with full detail
+- [ ] Improvements as one-liners
+- [ ] File summary table
+- [ ] Save checkpoint: `.checkpoints/phase-5-report.md`
+- [ ] Update manifest: `completed_phase: 5`, `next_phase: 5.5`
+
+## Save to Memory (Phase 5.5)
+
+- [ ] Write key findings to nano-brain with tags: review, {repo}
+- [ ] Verify searchable (`npx nano-brain search "PR {number}"`)
+- [ ] Update manifest: `completed_phase: 5.5`, `next_phase: 6`
+
+## Cleanup (Phase 6)
+
+- [ ] Show temp folder path and size to user
+- [ ] **ASK user** before removing (NEVER auto-delete)
+- [ ] If user confirms → `rm -rf "$REVIEW_DIR"` (also removes `.checkpoints/`)
+- [ ] If user declines → remind them to clean up later
+- [ ] For multiple PRs: ask about each temp folder individually
+- [ ] Note: Checkpoints auto-removed with clone dir (PR reviews) or remain in `.checkpoints/` (local reviews)
+
+## Final Notification
+
+- [ ] Report path shown to user
+- [ ] Issue counts (critical/warning/suggestion) displayed
+- [ ] Temp folder cleanup status communicated

package/skills/pr-code-reviewer/references/framework-rules/express.md

@@ -0,0 +1,39 @@
+# Express Code Review Rules
+
+## Critical Rules
+- Unhandled async errors in route handlers → use express-async-handler or try-catch
+- SQL injection in raw queries → use parameterized queries
+- Missing authentication middleware on protected routes
+- Exposing sensitive data in error responses
+
+## Warning Rules
+- Missing input validation → use express-validator or joi
+- Exposing stack traces in production → check NODE_ENV
+- Missing rate limiting on public endpoints
+- No request body size limit → use express.json({ limit: '10kb' })
+
+## Suggestions
+- Use helmet for security headers
+- Use compression middleware
+- Centralize error handling middleware
+- Use router.param() for parameter validation
+
+## Detection Patterns
+
+```javascript
+// CRITICAL: Unhandled async
+app.get('/api', async (req, res) => {
+  const data = await fetchData()  // if throws, crashes server
+})
+
+// SECURE: Wrapped async
+app.get('/api', asyncHandler(async (req, res) => {
+  const data = await fetchData()
+}))
+
+// CRITICAL: SQL injection
+db.query(`SELECT * FROM users WHERE id = ${req.params.id}`)
+
+// SECURE: Parameterized
+db.query('SELECT * FROM users WHERE id = ?', [req.params.id])
+```

package/skills/pr-code-reviewer/references/framework-rules/nestjs.md

@@ -0,0 +1,41 @@
+# NestJS Code Review Rules
+
+## Critical Rules
+- Missing `@Injectable()` decorator on service class
+- Circular dependency without `forwardRef()`
+- Missing guards on sensitive endpoints → use `@UseGuards()`
+- Raw SQL without parameterization in repositories
+
+## Warning Rules
+- Missing DTO validation → use `class-validator` decorators
+- Missing `@ApiTags()` / `@ApiOperation()` for Swagger docs
+- Injecting repository directly in controller → use service layer
+- Missing `@Transactional()` on multi-step database operations
+
+## Suggestions
+- Use `ConfigService` instead of `process.env` directly
+- Use custom exceptions extending `HttpException`
+- Use interceptors for response transformation
+- Use pipes for input transformation
+
+## Detection Patterns
+
+```typescript
+// CRITICAL: Missing Injectable
+class UserService {  // should be @Injectable()
+  constructor(private repo: UserRepository) {}
+}
+
+// WARNING: Missing validation
+@Post()
+create(@Body() dto: CreateUserDto) {}  // dto needs class-validator decorators
+
+// CRITICAL: Circular dependency
+@Injectable()
+export class ServiceA {
+  constructor(private serviceB: ServiceB) {}  // if B also injects A
+}
+
+// SECURE: Forward ref
+constructor(@Inject(forwardRef(() => ServiceB)) private serviceB: ServiceB) {}
+```

package/skills/pr-code-reviewer/references/framework-rules/typeorm.md

@@ -0,0 +1,52 @@
+# TypeORM Code Review Rules
+
+## Critical Rules
+- Raw SQL with string interpolation → SQL injection risk
+- Missing `@Transaction()` on multi-entity operations
+- Forgetting to `await` repository methods → silent failures
+- Using `save()` in loops → N+1 writes, use `save([entities])`
+
+## Warning Rules
+- N+1 query pattern → use `relations` option or `leftJoinAndSelect`
+- Missing indexes on frequently queried columns
+- Using `find()` without `take` limit on large tables
+- Eager loading too many relations → performance hit
+
+## Suggestions
+- Use QueryBuilder for complex queries
+- Use `@Index()` decorator for query optimization
+- Use `createQueryBuilder().insert()` for bulk inserts
+- Consider `@DeleteDateColumn()` for soft deletes
+
+## Detection Patterns
+
+```typescript
+// CRITICAL: SQL injection
+repository.query(`SELECT * FROM users WHERE name = '${name}'`)
+
+// SECURE: Parameterized
+repository.query('SELECT * FROM users WHERE name = ?', [name])
+
+// CRITICAL: N+1 in loop
+for (const user of users) {
+  await userRepo.save(user)  // N writes
+}
+
+// SECURE: Batch save
+await userRepo.save(users)  // 1 write
+
+// WARNING: N+1 query
+const users = await userRepo.find()
+for (const user of users) {
+  const posts = await postRepo.find({ where: { userId: user.id } })
+}
+
+// SECURE: Eager load
+const users = await userRepo.find({ relations: ['posts'] })
+
+// WARNING: Missing limit
+await userRepo.find({ where: { status: 'active' } })  // could return millions
+
+// SECURE: With limit
+await userRepo.find({ where: { status: 'active' }, take: 100 })
+```