@agentvibes/guardrails 0.1.0

package/rules/__fixtures__/direct-store-import/good.tsx

@@ -0,0 +1,34 @@
+// NOTHING in this file may be reported by `direct-store-import`.
+
+// D1: the global rootStore imported at a screen is legal.
+import { rootStore } from "../../stores/rootStore"
+
+// Type-only imports are the view-model contract (C40), not a store dependency.
+import type { IGalleryModel } from "../../stores/galleryStore"
+import type { RootStore } from "../../stores/rootStore"
+import type Photo from "../../stores/photo"
+import type * as StoreTypes from "../../stores/types"
+import { type IUiModel, type ITabModel } from "../../stores/uiStore"
+
+// A mixed import: a real value constant alongside an inline-typed store name.
+// The statement is not type-only, but the store binding in it still is.
+import { NOTIFICATION_KINDS, type NotificationSettingsStore } from "../../stores/NotificationSettingsStore"
+
+// The sanctioned access hooks are not store instances.
+import { useStore } from "../../stores/StoreContext"
+import { usePageStore } from "../../stores/usePageStore"
+
+// Non-store bindings from a stores path are untouched — the rule keys on the
+// binding name, not on the directory alone.
+import { StoreProvider } from "../../stores/StoreContext"
+import { SESSION_KEY } from "../../stores/keys"
+
+// Imports from paths that are not a stores directory.
+import { Restore } from "../../components/Restore/Restore"
+import { formatBytes } from "../../lib/format"
+
+export const X = ({ model }: { model: IGalleryModel }) => (
+  <StoreProvider value={rootStore}>
+    <Restore label={formatBytes(model.size)} k={SESSION_KEY} />
+  </StoreProvider>
+)

package/rules/__fixtures__/direct-store-import/showcase/ignored.tsx

@@ -0,0 +1,9 @@
+// Pins the `ignores:` globs. These are the SAME imports bad.tsx is flagged for,
+// under `showcase/` — a preview harness legitimately builds stores over
+// fixtures (fake-data.md). If someone removes the ignore globs, this file
+// starts reporting and the assertion below it fails, instead of the 21-hit
+// false-positive class quietly coming back.
+import { GalleryStore } from "../../stores/galleryStore"
+import { galleryStore } from "../../stores/galleryStore"
+
+export const Preview = () => <div>{GalleryStore.name}{galleryStore.count}</div>

package/rules/__fixtures__/discriminator-ternary/bad.tsx

@@ -0,0 +1,10 @@
+// Every ternary here MUST be reported by `discriminator-ternary`.
+
+// The terse option-unwrap the PPA audit found 18 of.
+export const first = (m: Maybe<string[]>) => (m.kind === "some" ? m.value : [])
+export const adapter = (s: S) => (s.adapter.kind === "some" ? s.adapter.value : "—")
+// Other discriminator names the rule covers.
+export const label = (r: R) => (r.status === "error" ? "Bad" : "Ok")
+export const port = (c: C) => (c.type === "tcp" ? c.port : 0)
+export const key = (p: P) => (p.provider === "openai" ? p.apiKey : p.token)
+export const tone = (n: N) => (n.mode !== "dark" ? "light" : "dark")

package/rules/__fixtures__/discriminator-ternary/good.tsx

@@ -0,0 +1,23 @@
+// NOTHING in this file may be reported by `discriminator-ternary`.
+import { match } from "ts-pattern"
+
+// The fix: match the value, so a new variant is a build error.
+export const first = (m: Maybe<string[]>) =>
+  match(m)
+    .with({ kind: "some" }, ({ value }) => value)
+    .with({ kind: "none" }, () => [])
+    .exhaustive()
+
+// A ternary whose branches are JSX belongs to `jsx-ternary`, which owns that
+// case with the same fix. This rule stands down so the two can never report the
+// same line twice — measured overlap on tg-gallery + observatory: 0.
+export const View = (r: R) => (r.status === "error" ? <ErrorState /> : <Ready />)
+export const View2 = (r: R) => (r.kind === "idle" ? null : <Spinner />)
+
+// Not a discriminator field.
+export const n = (u: U) => (u.count === 0 ? "none" : "some")
+export const s = (u: U) => (u.name === "root" ? 1 : 2)
+
+// Not an equality test on a discriminator.
+export const t = (u: U) => (u.ready ? "y" : "n")
+export const v = (u: U) => (u.items.length > 3 ? "many" : "few")

package/rules/__fixtures__/hardcoded-url-in-component/components/bad.tsx

@@ -0,0 +1,8 @@
+// Every URL here MUST be reported by `hardcoded-url-in-component`.
+const API = "https://api.example.com/v1"
+
+export const Panel = () => {
+  const upload = "http://uploads.example.com/put"
+  const cdn = "https://cdn.example.com/assets"
+  return <a href="https://gallery.internal.example/g/abc">{API}{upload}{cdn}</a>
+}

package/rules/__fixtures__/hardcoded-url-in-component/components/good.tsx

@@ -0,0 +1,14 @@
+// NOTHING in this file may be reported by `hardcoded-url-in-component`.
+
+// The fix: the URL comes from a constants module (or a store computed), so the
+// component does not know which environment it is in.
+import { API_BASE, GALLERY_URL } from "../../lib/constants/urls"
+
+export const Panel = () => <a href={GALLERY_URL}>{API_BASE}</a>
+
+// Relative paths carry no environment.
+export const Link = () => <a href="/g/abc">gallery</a>
+
+// Schema/namespace URLs are identifiers, not endpoints — the honest exception.
+export const Icon = () => <svg xmlns="http://www.w3.org/2000/svg" />
+export const SCHEMA = "https://json-schema.org/draft/2020-12/schema"

package/rules/__fixtures__/inline-map-row/bad.tsx

@@ -0,0 +1,72 @@
+// Every `.map` in this file MUST be reported by `inline-map-row`.
+//
+// All of them sit inside `observer(...)`: that is the whole defect. The
+// parent's reactive scope tracks every field every row body reads, so one
+// item changing one field re-renders the entire list.
+
+import { observer } from "mobx-react-lite"
+
+// Arrow with an expression body.
+export const A = observer(() => <ul>{xs.map((x) => <li key={x.id}><img src={x.src} /><span>{x.title}</span></li>)}</ul>)
+
+// Arrow with a block body and an explicit return.
+export const B = observer(() => (
+  <ul>
+    {xs.map((x) => {
+      return (
+        <li key={x.id}>
+          <img src={x.src} />
+          <span>{x.title}</span>
+        </li>
+      )
+    })}
+  </ul>
+))
+
+// `function` expression callback.
+export const C = observer(() => (
+  <ul>
+    {xs.map(function (x) {
+      return <li key={x.id}><img src={x.src} /><span>{x.title}</span></li>
+    })}
+  </ul>
+))
+
+// Chained before `.map`, parenthesized body, index parameter.
+export const D = observer(() => (
+  <ul>{xs.filter(Boolean).map((x, i) => (<li key={i}><b>{x.a}</b><i>{x.b}</i></li>))}</ul>
+))
+
+// Deeply nested rather than sibling-nested — three levels of inline row body.
+export const E = observer(() => (
+  <div>
+    {rows.map((r) => (
+      <div key={r.id}>
+        <header>
+          <h3>{r.title}</h3>
+          <time>{r.at}</time>
+        </header>
+      </div>
+    ))}
+  </div>
+))
+
+// The real shape, with design-system tags rather than host elements:
+// observatory's SessionsTreeSection with its extracted <StatusGroup/> inlined.
+export const SessionsTreeSection = observer(() => {
+  const { data, ui } = useStore()
+  const byStatus = (s: SessionStatus) => data.sessions.filter((x) => x.status === s)
+  return (
+    <TreeSection sectionKey="section:sessions" onActivate={() => ui.openSessions("all")}>
+      {GROUP_ORDER.map((status) => (
+        <VStack key={status} gap={0}>
+          <HStack align="center">
+            <Text weight="bold">{sessionStatusLabel(status)}</Text>
+            <Badge count={byStatus(status).length} />
+          </HStack>
+          <Divider />
+        </VStack>
+      ))}
+    </TreeSection>
+  )
+})

package/rules/__fixtures__/inline-map-row/good.tsx

@@ -0,0 +1,51 @@
+// NOTHING in this file may be reported by `inline-map-row`.
+
+import { observer } from "mobx-react-lite"
+import { SessionRow } from "./SessionRow/SessionRow"
+
+// The target pattern: one extracted, self-closed row component per item.
+export const A = observer(() => <ul>{xs.map((x) => <SessionRow key={x.id} item={x} />)}</ul>)
+
+// An extracted row that takes children is still one component reference.
+export const B = observer(() => <ul>{xs.map((x) => <SessionRow key={x.id}>{x.title}</SessionRow>)}</ul>)
+
+// A single host element with only an expression inside is not a row body.
+export const C = observer(() => <ul>{xs.map((x) => <li key={x.id}>{x.title}</li>)}</ul>)
+
+// A thin wrapper around ONE extracted component. Deliberately not flagged: the
+// rule needs two or more nested elements before it calls something a row body,
+// so the wrapper costs a false positive at `error` severity rather than a fix.
+export const D = observer(() => <ul>{xs.map((x) => <li key={x.id}><SessionRow item={x} /></li>)}</ul>)
+
+// One nested element deep. Same reasoning as D.
+export const E = observer(() => <ul>{xs.map((x) => <li key={x.id}><a href={x.href}>{x.title}</a></li>)}</ul>)
+
+// Mapping to non-JSX values is untouched.
+export const F = observer(() => <ul>{xs.map((x) => x.title).join(", ")}</ul>)
+
+// A literal array — CLAUDE.md's "pure data" carve-out. A skeleton drawing four
+// placeholder cards has no observable to subscribe to and no row to extract.
+export const G = observer(() => (
+  <div>
+    {[1, 2, 3, 4].map((i) => (
+      <div key={i}>
+        <Skeleton width={80} />
+        <Skeleton width="60%" />
+      </div>
+    ))}
+  </div>
+))
+
+// The same inline row body, in a component that is NOT an observer. There is no
+// reactive scope to over-subscribe, so there is no defect of this kind — a
+// plain UI library renders lists exactly like this and must stay silent.
+export const H = () => (
+  <ul>
+    {items.map((it) => (
+      <li key={it.id}>
+        <img src={it.src} />
+        <span>{it.title}</span>
+      </li>
+    ))}
+  </ul>
+)

package/rules/__fixtures__/instanceof-map-set/bad.ts

@@ -0,0 +1,7 @@
+// Every check here MUST be reported by `instanceof-map-set`.
+export const a = (v: unknown) => v instanceof Map
+export const b = (v: unknown) => v instanceof Set
+// ADDED BY THE WAVE-2 UPGRADE: the old body named only Map and Set, and these
+// two have exactly the same cross-realm failure.
+export const c = (v: unknown) => v instanceof WeakMap
+export const d = (v: unknown) => v instanceof WeakSet

package/rules/__fixtures__/instanceof-map-set/good.ts

@@ -0,0 +1,8 @@
+// NOTHING in this file may be reported by `instanceof-map-set`.
+// The fix: a structural check that survives a realm boundary (iframe, worker,
+// vm context), where `instanceof` silently returns false.
+export const isMapLike = (v: unknown): v is Map<unknown, unknown> =>
+  typeof v === "object" && v !== null && typeof (v as Map<unknown, unknown>).get === "function"
+
+export const a = (v: unknown) => v instanceof Date
+export const b = (v: unknown) => v instanceof Error

package/rules/__fixtures__/literal-union-in-component/components/bad.ts

@@ -0,0 +1,8 @@
+// Every type here MUST be reported by `literal-union-in-component`.
+// Path matters: the rule is scoped to component/screen/app directories.
+
+// Enum-style UI state redeclared in the file that renders it.
+export type Tab = "tasks" | "habits" | "stream"
+export type LoadPhase = "idle" | "loading" | "ready" | "error"
+type Align = "start" | "center" | "end"
+export type Tone = "neutral" | "danger" | "success" | "warning"

package/rules/__fixtures__/literal-union-in-component/components/good.ts

@@ -0,0 +1,23 @@
+// NOTHING in this file may be reported by `literal-union-in-component`.
+
+// The fix: consume the shared type, do not restate it.
+import type { Tab } from "../../stores/uiStore"
+import type { Tone } from "../../lib/tone"
+
+export interface TabBarProps {
+  tab: Tab
+  tone: Tone
+}
+
+// A single-member alias is not an enum-style union.
+export type Only = "one"
+
+// A union of non-literals is a different thing entirely.
+export type Id = string | number
+export type Handler = (() => void) | undefined
+
+// A discriminated union of OBJECT shapes is the pattern this codebase wants
+// everywhere — it is not a bare string enum and must not be flagged.
+export type Resource<T> =
+  | { status: "idle" }
+  | { status: "ready"; data: T }

package/rules/__fixtures__/missing-observer/bad.tsx

@@ -0,0 +1,66 @@
+// Every declaration in this file MUST be reported by `missing-observer`.
+
+import { useStore } from "../../stores/StoreContext"
+
+// Arrow component reading the store hook, no observer wrap — the canonical shape
+// the previously-documented (never-implemented) rule could not match.
+export const SessionsList = () => {
+  const { data, ui } = useStore()
+  return <div>{data.sessions.length} sessions, tab {ui.tab}</div>
+}
+
+// Bare call, no destructuring.
+export const Header = () => {
+  const store = useStore()
+  return <header>{store.auth.userName}</header>
+}
+
+// function_declaration form.
+export function Footer() {
+  const { ui } = useStore()
+  return <footer>{ui.statusText}</footer>
+}
+
+// A project-specific store hook (`use<Name>Store`), not just `useStore`.
+export const GalleryGrid = () => {
+  const { photos } = useGalleryStore()
+  return <div>{photos.length}</div>
+}
+
+// Page store created on a screen — still needs the observer wrap.
+export const GalleryScreen = () => {
+  const page = usePageStore(() => new GalleryPageStore(rootStore, "slug"), [])
+  return <section>{page.title}</section>
+}
+
+// The model-prop arm: takes `model`, dereferences it, never wrapped. This is
+// the per-row extraction done right and then de-observed — the row re-renders
+// only when the parent does.
+export const SessionRow = ({ model }: { model: ISessionModel }) => {
+  return <li>{model.title}</li>
+}
+
+// Same for a prop named `store`.
+export const TabBar = ({ store }: { store: IUiModel }) => {
+  return <nav>{store.activeTab}</nav>
+}
+
+// ── shapes taken from real components, not invented ────────────────────
+// The store read happens at body level and never appears inside the JSX.
+// tg-gallery's GalleryView does exactly this; an earlier "deref must be inside
+// a jsx_expression" version of this rule missed it completely.
+export const GalleryView = function GalleryView() {
+  const { galleryStore, themeStore } = useStore()
+  const layoutType = themeStore.layout.type
+  return match(galleryStore.detailState)
+    .with({ status: "loading" }, () => <GalleryViewSkeleton />)
+    .with({ status: "loaded" }, ({ gallery }) => <GalleryLoadedView gallery={gallery} layoutType={layoutType} />)
+    .exhaustive()
+}
+
+// Read straight into a local derivation — observatory's SessionsTreeSection.
+export const SessionsTreeSection = () => {
+  const { data, ui } = useStore()
+  const matched = data.sessions.filter((s) => sessionMatches(s, ui.searchQuery))
+  return <TreeSection count={matched.length}>{null}</TreeSection>
+}

package/rules/__fixtures__/missing-observer/good.tsx

@@ -0,0 +1,69 @@
+// NOTHING in this file may be reported by `missing-observer`.
+
+import { observer } from "mobx-react-lite"
+import { useStore } from "../../stores/StoreContext"
+
+// The canonical wrapped shape.
+export const SessionsList = observer(() => {
+  const { data, ui } = useStore()
+  return <div>{data.sessions.length} sessions, tab {ui.tab}</div>
+})
+
+// Wrapped named function expression — the shape tg-gallery uses.
+export const GalleryEmptyStateView = observer(function GalleryEmptyStateView({
+  title,
+}: {
+  title: string
+}) {
+  const { platform } = useStore()
+  return <p>{title} on {platform.name}</p>
+})
+
+// Destructured props, wrapped.
+export const SessionRow = observer(({ model }: { model: ISessionModel }) => {
+  return <li>{model.title}</li>
+})
+
+// A custom hook that reads the store: hooks are not components, the CONSUMER
+// carries the observer wrap. camelCase name keeps it out of the rule.
+export const useSessionTitle = (id: string) => {
+  const { data } = useStore()
+  return data.sessionById(id)?.title ?? ""
+}
+
+// Same, as a function declaration.
+export function useTabLabel() {
+  const { ui } = useStore()
+  return ui.tab
+}
+
+// A presentational component with no store contact at all — observer is not
+// required and adding it would be noise.
+export const Badge = ({ label }: { label: string }) => <span>{label}</span>
+
+// A non-component helper that happens to be PascalCase but renders no JSX.
+export const StoreKeys = () => {
+  const { data } = useStore()
+  return Object.keys(data)
+}
+
+// A `model` prop that is never dereferenced as `model.x` — no observable read.
+export const ModelDebugLabel = ({ model }: { model: unknown }) => (
+  <code>{JSON.stringify(model)}</code>
+)
+
+// Pulls the store ONLY to call a stable action from a handler. Nothing is read
+// during render, so nothing needs subscribing and the parent observer owns the
+// page. Observatory writes two of these on purpose (`RichEntityListView`,
+// `KanbanView`) with a comment saying exactly this.
+export const OpenEntityButton = ({ id, label }: { id: string; label: string }) => {
+  const { ui } = useStore()
+  return <button onClick={() => ui.openPluginEntity(id)}>{label}</button>
+}
+
+// Same shape via a component-level handler rather than an inline arrow.
+export const CloseButton = ({ id }: { id: string }) => {
+  const { ui } = useStore()
+  const onPress = () => ui.close(id)
+  return <button onClick={onPress}>close</button>
+}

package/rules/__fixtures__/no-local-kit-clone/bad.ts

@@ -0,0 +1,30 @@
+// Every declaration here MUST be reported by `no-local-kit-clone`.
+
+// 7 of these exist across the park, discriminated by `kind` in three repos,
+// `status` in two and `state` in one.
+export type Resource<T> =
+  | { kind: "loading" }
+  | { kind: "ready"; value: T }
+  | { kind: "error"; message: string }
+
+export type QueryState<T> =
+  | { status: "pending" }
+  | { status: "success"; data: T }
+
+export class ObservableQuery<T> {
+  constructor(private readonly fetcher: () => Promise<T>) {}
+}
+
+// gramforge carries six byte-identical copies of these two inside one monorepo.
+export function warnDegraded(context: string, detail: string): void {
+  console.warn(`[degraded] ${context}: ${detail}`)
+}
+
+export function warnNotImplemented(category: string, detail: string): void {
+  console.warn(`[not-implemented] ${category}: ${detail}`)
+}
+
+// The useMemo improvisation with no dispose that report §8 found everywhere.
+export const usePageStore = <T>(factory: () => T, deps: unknown[]): T => {
+  return useMemo(factory, deps)
+}

package/rules/__fixtures__/no-local-kit-clone/bad.tsx

@@ -0,0 +1,30 @@
+// Every declaration here MUST be reported by `no-local-kit-clone`.
+
+// 7 of these exist across the park, discriminated by `kind` in three repos,
+// `status` in two and `state` in one.
+export type Resource<T> =
+  | { kind: "loading" }
+  | { kind: "ready"; value: T }
+  | { kind: "error"; message: string }
+
+export type QueryState<T> =
+  | { status: "pending" }
+  | { status: "success"; data: T }
+
+export class ObservableQuery<T> {
+  constructor(private readonly fetcher: () => Promise<T>) {}
+}
+
+// gramforge carries six byte-identical copies of these two inside one monorepo.
+export function warnDegraded(context: string, detail: string): void {
+  console.warn(`[degraded] ${context}: ${detail}`)
+}
+
+export function warnNotImplemented(category: string, detail: string): void {
+  console.warn(`[not-implemented] ${category}: ${detail}`)
+}
+
+// The useMemo improvisation with no dispose that report §8 found everywhere.
+export const usePageStore = <T,>(factory: () => T, deps: unknown[]): T => {
+  return useMemo(factory, deps)
+}

package/rules/__fixtures__/no-local-kit-clone/good.ts

@@ -0,0 +1,31 @@
+// NOTHING in this file may be reported by `no-local-kit-clone`.
+
+// The fix: import, do not redeclare.
+import { warnDegraded, warnNotImplemented } from "@agentvibes/kit/diagnostics"
+import { usePageStore } from "@agentvibes/kit/react"
+import type { QueryState, Resource } from "@agentvibes/kit/resource"
+
+// An unrelated domain type that happens to be called Resource. Real: the
+// VolumePhotography conferences page. No type parameters, no async state — the
+// type-parameter requirement is what keeps this out.
+interface Resource {
+  name: string
+  url: string
+  type: string
+  description: string
+}
+
+const conferences: Resource[] = []
+
+// Re-exporting the kit's types is not redeclaring them.
+export type { QueryState, Resource }
+export { usePageStore, warnDegraded, warnNotImplemented }
+
+// A local helper with a name of its own.
+export function warnStale(context: string): void {
+  warnDegraded(context, "cache is stale")
+}
+
+// A differently-named local async union is out of this rule's scope; it is
+// `state-loading-boolean-shape` and the Resource migration that speak to it.
+export type LoadPhase = { status: "idle" } | { status: "busy" }

package/rules/__fixtures__/no-local-kit-clone/good.tsx

@@ -0,0 +1,31 @@
+// NOTHING in this file may be reported by `no-local-kit-clone`.
+
+// The fix: import, do not redeclare.
+import { warnDegraded, warnNotImplemented } from "@agentvibes/kit/diagnostics"
+import { usePageStore } from "@agentvibes/kit/react"
+import type { QueryState, Resource } from "@agentvibes/kit/resource"
+
+// An unrelated domain type that happens to be called Resource. Real: the
+// VolumePhotography conferences page. No type parameters, no async state — the
+// type-parameter requirement is what keeps this out.
+interface Resource {
+  name: string
+  url: string
+  type: string
+  description: string
+}
+
+const conferences: Resource[] = []
+
+// Re-exporting the kit's types is not redeclaring them.
+export type { QueryState, Resource }
+export { usePageStore, warnDegraded, warnNotImplemented }
+
+// A local helper with a name of its own.
+export function warnStale(context: string): void {
+  warnDegraded(context, "cache is stale")
+}
+
+// A differently-named local async union is out of this rule's scope; it is
+// `state-loading-boolean-shape` and the Resource migration that speak to it.
+export type LoadPhase = { status: "idle" } | { status: "busy" }

package/rules/__fixtures__/non-exhaustive-match/bad.ts

@@ -0,0 +1,8 @@
+// Every chain here MUST be reported by `non-exhaustive-match`.
+import { match } from "ts-pattern"
+export const a = (r: R) => match(r).with({ kind: "idle" }, () => 0).otherwise(() => -1)
+export const b = (r: R) =>
+  match(r)
+    .with({ kind: "idle" }, () => 0)
+    .with({ kind: "ready" }, () => 1)
+    .otherwise(() => -1)

package/rules/__fixtures__/non-exhaustive-match/good.ts

@@ -0,0 +1,14 @@
+// NOTHING in this file may be reported by `non-exhaustive-match`.
+import { match } from "ts-pattern"
+
+export const a = (r: R) =>
+  match(r)
+    .with({ kind: "idle" }, () => 0)
+    .with({ kind: "ready" }, () => 1)
+    .exhaustive()
+
+// REMOVED BY THE WAVE-2 UPGRADE: the old body was a bare `$X.otherwise($$$)`
+// pattern, so any method called `otherwise` on any object was a finding. The
+// rule now anchors to a ts-pattern `match()` chain.
+export const q = someBuilder.otherwise(() => 1)
+export const r = config.fallback.otherwise

package/rules/__fixtures__/page-store-bare-usememo/bad.ts

@@ -0,0 +1,15 @@
+// BAD: a page store on a bare useMemo — no dispose, two of them under StrictMode.
+import { useMemo } from "react";
+
+class GalleryPageStore {
+  constructor(readonly slug: string) {}
+}
+class SettingsPageStore {}
+
+export function useGallery(slug: string) {
+  return useMemo(() => new GalleryPageStore(slug), [slug]);
+}
+
+export function useSettings() {
+  return useMemo(() => new SettingsPageStore(), []);
+}

package/rules/__fixtures__/page-store-bare-usememo/bad.tsx

@@ -0,0 +1,13 @@
+// BAD: same leak, in the file where page stores actually get created.
+import { useMemo } from "react";
+
+class GalleryPageStore {
+  constructor(readonly slug: string) {}
+}
+class FiltersPageStore {}
+
+export function GalleryScreenBody(props: { readonly slug: string }) {
+  const store = useMemo(() => new GalleryPageStore(props.slug), [props.slug]);
+  const filters = useMemo(() => new FiltersPageStore(), []);
+  return <span>{String(store.slug) + String(filters)}</span>;
+}

package/rules/__fixtures__/page-store-bare-usememo/good.ts

@@ -0,0 +1,17 @@
+// GOOD: the sanctioned hook owns creation, ref-counting and disposal.
+// A plain useMemo over a non-store value stays legal.
+import { useMemo } from "react";
+import { usePageStore } from "@agentvibes/kit/react";
+
+class GalleryPageStore {
+  constructor(readonly slug: string) {}
+  dispose(): void {}
+}
+
+export function useGallery(slug: string) {
+  return usePageStore(() => new GalleryPageStore(slug), [slug]);
+}
+
+export function useIndex() {
+  return useMemo(() => new Map<string, number>(), []);
+}

package/rules/__fixtures__/page-store-bare-usememo/good.tsx

@@ -0,0 +1,14 @@
+// GOOD: usePageStore, plus a plain useMemo over a non-store value.
+import { useMemo } from "react";
+import { usePageStore } from "@agentvibes/kit/react";
+
+class GalleryPageStore {
+  constructor(readonly slug: string) {}
+  dispose(): void {}
+}
+
+export function GalleryScreenBody(props: { readonly slug: string }) {
+  const store = usePageStore(() => new GalleryPageStore(props.slug), [props.slug]);
+  const seen = useMemo(() => new Set<string>(), []);
+  return <span>{store.slug + String(seen.size)}</span>;
+}

package/rules/__fixtures__/screen-file-styling/bad.screen.tsx

@@ -0,0 +1,10 @@
+// BAD: a screen growing its own layout instead of delegating to a view.
+export function GalleryScreen() {
+  return (
+    <section className="p-4">
+      <header style={{ gap: 8 }}>
+        <h1 className="title">Gallery</h1>
+      </header>
+    </section>
+  );
+}