@gallopsystems/agent-skills 1.9.0 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gallopsystems/agent-skills",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "Gallop Systems Claude Code skills, symlinked into .claude/skills on install.",
   "license": "UNLICENSED",
   "repository": {

package/plugins/nitro-testing/skills/nitro-testing/frontend-testing.md

@@ -482,6 +482,77 @@ for (const tz of timezones) {
 }
 ```
 
+### 7. Reading or driving a stubbed child needs an explicit stub
+
+`Stub: true` (auto-stub) renders the child but **does not expose its props** to
+`findComponent(Stub).props("x")`. To read or drive a child's `modelValue`, give it
+an explicit stub that declares the prop:
+
+```typescript
+const SelectStub = {
+  name: "Select",
+  props: ["modelValue"],
+  emits: ["update:modelValue"],
+  template: "<div />",
+};
+// findComponent(SelectStub).props("modelValue")  — now readable
+// findComponent(SelectStub).vm.$emit("update:modelValue", x)  — drives the v-model
+```
+
+For a deep tree (a dialog full of fields), `shallow: true` auto-stubs everything;
+add explicit stubs only for the parts you assert on — plus a dialog stub that
+renders its slot, since UI-lib dialogs gate content behind a `visible` prop:
+
+```typescript
+const DialogStub = { props: ["visible"], template: "<div v-if='visible'><slot /><slot name='footer' /></div>" };
+```
+
+### 8. Driving and asserting route/query state
+
+A global route middleware that redirects unauthenticated navigations (to a public
+`/login`) means `mountSuspended(Comp, { route: "/private?foo=1" })` lands on the
+public path and **drops the query** — so a `useRouteQuery`-bound ref reads empty.
+Two ways around it:
+
+- **Carry the params on the public route:** `route: "/login?foo=1"`. `useRouteQuery`
+  binds to `route.query` regardless of the path.
+- **Assert URL *writes* by spying on `router.replace`**, not by reading
+  `currentRoute` (the redirect strips what you'd read back):
+
+```typescript
+const replace = vi.spyOn((wrapper.vm as any).$router, "replace");
+input.vm.$emit("update:modelValue", "foo");
+await flushPromises();
+expect(replace.mock.calls.some((c) => (c[0] as any)?.query?.q === "foo")).toBe(true);
+```
+
+### 9. Testing a composable that needs a component scope
+
+For a composable using lifecycle hooks or `provide`/`inject`, mount a throwaway
+component whose `setup()` calls it and capture the return:
+
+```typescript
+let api: ReturnType<typeof useThing>;
+const Comp = defineComponent({ setup() { api = useThing(); return () => h("div"); } });
+await mountSuspended(Comp);
+```
+
+Control a VueUse dependency with `vi.mock("@vueuse/core", …)` to return refs you
+drive. And make sure the vitest `include` glob covers `app/composables/**` — a
+composables dir is easy to leave out of the frontend config.
+
+### 10. Reset the shared `useFetch` cache between mounts
+
+`useFetch`/`useAsyncData` cache by key, and the cache is **shared across
+`mountSuspended` calls in a file**. When several tests mount the same component
+(fixed URL) but `registerEndpoint` returns different data per test, the second
+test sees the first's response unless you clear it:
+
+```typescript
+import { clearNuxtData } from "#imports"; // not exported from @nuxt/test-utils/runtime
+beforeEach(() => clearNuxtData());
+```
+
 ## File Organization
 
 Co-locate tests with source files:

package/plugins/vue-nuxt/skills/vue-nuxt/vueuse.md

@@ -45,6 +45,32 @@ URL sync (`router.replace({ query: { ...route.query, tab } })`) →
 param. Nuxt's own `useRoute()` is already reactive for *reads*; reach for
 `useRouteQuery` when you want a **writable** ref bound to a single param.
 
+### `useLocalStorage` reads at setup — guard SSR hydration
+
+`useLocalStorage`/`useStorage` is SSR-safe: on the server there's no `window`, so
+it returns the default and never touches storage (no `import.meta.client` guard
+needed — that guard was only for raw `localStorage.*` calls, which throw on the
+server). But on the client it reads storage **synchronously at setup**, so a value
+rendered *without a mount gate* differs between the server render (the default) and
+the hydrating client render (the stored value) → a hydration mismatch. Pass
+`{ initOnMounted: true }` to defer the read to `onMounted` so the first client
+render matches the server, or gate the rendering until mounted.
+
+```ts
+// shown straight away (no v-if gate) → defer the storage read to onMounted
+const view = useLocalStorage('view', 'list', { initOnMounted: true })
+```
+
+### `useRouteQuery` makes the URL the single source of truth
+
+Because the bound ref reads from and writes to the query param, the URL *is* the
+state — so it **can't represent a ref with two distinct "empty" states** (e.g. a
+filter that defaults to `"Open"` on load but clears to `null`; both would be "param
+absent"). When you need that distinction, keep a plain `ref` + a projecting `watch`
+(a sanctioned `watch.md` "URL sync" case). And **don't mix `useUrlSearchParams`
+(History API) with `useRouteQuery` (vue-router) in the same component** — they write
+the URL through different mechanisms and clobber each other's params; pick one.
+
 ## VueUse's `watch` sugar — when a `watch` IS warranted
 
 When the effect genuinely belongs in a watcher, VueUse's Watch category removes the

package/plugins/vue-nuxt/skills/vue-nuxt/watch.md

@@ -68,9 +68,18 @@ Only when the effect crosses **out of** the reactive graph:
   polling `setInterval` (clear it in `onUnmounted`).
 - **Persist** — a `localStorage`/`useCookie` write, debounced auto-save of a
   deep-watched form.
-- **URL sync** — `router.replace({ query: { ...route.query, tab } })`.
+- **URL sync** — `router.replace({ query: { ...route.query, tab } })`. For a single
+  ref ↔ one query param, prefer `useRouteQuery` (see below). A write-back watch is
+  the right tool only when the URL can't model the state: a ref with **two distinct
+  "empty" states** (e.g. a filter that defaults to `"Open"` on load but clears to
+  `null` — an absent param can map to only one of them), or a **composite object
+  fanning out to many params** (a PrimeVue filter object) that a one-ref-per-param
+  `useRouteQuery` can't express.
 - **Re-seed local state on dialog open** — `watch(visible, (v) => { if (v) initForm() })`.
-  The single most common legit pattern.
+  The single most common legit pattern. Its one-liner is `whenever(visible, initForm)`
+  (see `vueuse.md`); a compound guard keeps its inner half —
+  `watch(visible, (v) => { if (v && !props.x) reset() })` →
+  `whenever(visible, () => { if (!props.x) reset() })`.
 - **Clone a server prop into a locally-editable draft** —
   `watch(() => props.record, (r) => { if (r) form.value = structuredClone(toRaw(r)) }, { immediate: true })`.
 
@@ -130,6 +139,22 @@ watch(activeId, () => scrollActiveIntoView(), { flush: 'post' })  // DOM already
 | **side-effect-in-handler** | watching a value that only changes via one control, to clear a dependent field | that control's `@update:model-value` handler |
 | **manual-refetch** | watching filter refs to call a function that calls `useFetch` | a `computed` `query` passed to `useFetch` |
 
+**An external source doesn't legitimize a deriving watch.** The
+watch-vs-`computed` decision turns on whether the *body* leaves the reactive
+graph — **not** on whether the *source* came from outside it. A watcher whose
+source is a composable/library ref (`useEventSource`'s `status`, a store getter,
+a `useWindowSize`) but whose body only assigns a derived value is still a
+`computed`. "The source is external state" is the most common excuse for keeping
+such a watch, and it's wrong — it's still derivation.
+
+```ts
+// ❌ a library ref as source tempts a watch, but the body only derives
+const isConnected = ref(false)
+watch(status, (s) => { isConnected.value = s === 'OPEN' })   // status from useEventSource
+// ✅ derivation is a computed, regardless of where status came from
+const isConnected = computed(() => status.value === 'OPEN')
+```
+
 The biggest real cluster was **side-effect-in-handler** — resetting dependent
 fields when a Select changed. In a watcher it hides cause/effect and re-fires on
 programmatic form reseeds; the colocated handler is direct and only fires on the