1What you can ask it

2It catches problems as Claude writes them

A typical first draft of a plate-QC dashboard: MUI, Recharts, a native select, a hard-coded brand colour. The moment Claude saves the file, Netrya's hook reviews it and hands the findings straight back to Claude, which fixes them in the same turn. It never blocks the edit.

import { useEffect, useState } from "react";
import { Button } from "@mui/material";
import { LineChart } from "recharts";

export function PlateQCDashboard({ plates }: { plates: Plate[] }) {
  const [passRate, setPassRate] = useState(0);
  useEffect(() => {
    setPassRate(plates.filter((p) => p.ok).length / plates.length);
  }, [plates]);

  return (
    <div className="bg-blue-500 font-medium" style={{ color: "#005596" }}>
      <select>{plates.map((p) => <option key={p.id}>{p.id}</option>)}</select>
      <LineChart data={plates} />
      <Button onClick={() => window.confirm("Reject plate?")}>Reject</Button>
      Pass rate {passRate}
    </div>
  );
}

Design system check — app/src/PlateQCDashboard.tsx
  • Material UI import — use @cs-coe registry components (npx shadcn@latest add @cs-coe/<name>)
  • Chart library import — use @tanstack/charts
  • <select> — use <Select> from @cs-coe/select
  • window.confirm() — use <AlertDialog> from @cs-coe/alert-dialog
  • Hardcoded #005596 — use bg-primary / text-primary
  • Tailwind color-scale class — use semantic tokens (bg-primary, text-muted-foreground)
  • font-medium — Gene Sans has no weight 500. Use font-normal (400), font-semibold (600), or font-bold (700)
  Run 'npm run check:design-system' for the full, authoritative pass.

3The same gate before every PR

/netrya:doctor and /netrya:ship run the full quality gate. Two of its checks are shown here: the design-system check, and the monorepo's mandatory useEffect rule, which Netrya now wires into every new app.

Design system check — 1 files in: src

✗ BANNED_IMPORT  src/PlateQCDashboard.tsx:2
  Material UI import
  → Use @cs-coe registry components: npx shadcn@latest add @cs-coe/<name>
✗ BANNED_IMPORT  src/PlateQCDashboard.tsx:3
  Banned chart library import
  → Use @tanstack/charts
✗ RAW_HTML  src/PlateQCDashboard.tsx:13
  Native <select> element
  → Use <Select> from @cs-coe/select
✗ RAW_HTML  src/PlateQCDashboard.tsx:15
  window.confirm()
  → Use <AlertDialog> from @cs-coe/alert-dialog
⚠ HARDCODED_COLOR  src/PlateQCDashboard.tsx:12
  Hardcoded Genentech Blue
  → Use bg-primary / text-primary
⚠ TAILWIND_COLOR  src/PlateQCDashboard.tsx:12
  Tailwind color-scale class
  → Use semantic tokens (bg-primary, text-muted-foreground)
⚠ FONT_WEIGHT  src/PlateQCDashboard.tsx:12
  font-medium — Gene Sans has no weight 500
  → Use font-normal (400), font-semibold (600, house style), or font-bold (700)

Violations: 4  Warnings: 3

Install registry components with:
  npx shadcn@latest add @cs-coe/<component>

See AGENTS.md for the full component mapping and token list.
Note: .astro files are not scanned — review those templates by eye.

━━━ useEffect Guard ━━━

Scanning for unjustified useEffect calls...

  ✗ src/PlateQCDashboard.tsx:7
      useEffect(() => {
    → Add: // useEffect: <describe the external system being synchronized>

━━━ useEffect Guard Summary ━━━

○        1 file(s) with useEffect in exempt paths (ui/, gyde/, tests)
✗ 1 unjustified useEffect call(s)

Every useEffect must have a comment on the line above:

  // useEffect: sync chart resize observer with container dimensions
  useEffect(() => { ... }, [width, height]);

Common replacements (https://react.dev/learn/you-might-not-need-an-effect):
  • Derived state        → compute during render
  • Data fetching        → TanStack Query, loader, or server component
  • User-caused work     → event handler
  • Reset on prop change → key the component
  • External store       → useSyncExternalStore

4Staying current with the design system

A month after adopting v0.3.0, upstream ships v0.4.0. /netrya:drift compares every installed component against the registry and a saved baseline, so it knows which side moved.

Registry items: 4   Local ui files: 4

! upstream-update (1)
    safe to reinstall: npx shadcn@latest add @cs-coe/<name>
      button                   src/components/ui/button.tsx

! conflict (1)
    both sides changed — merge by hand, then --write-baseline --resolve <name>
      card                     src/components/ui/card.tsx

  local-customization (1)
    allowed — confirm it is still intentional
      badge                    src/components/ui/badge.tsx

  in-sync (1)
      dialog                   src/components/ui/dialog.tsx

Actionable: 2

drift-scan: card resolved at its current hashes

Registry items: 4   Local ui files: 4

! upstream-update (1)
    safe to reinstall: npx shadcn@latest add @cs-coe/<name>
      button                   src/components/ui/button.tsx

  local-customization (2)
    allowed — confirm it is still intentional
      badge                    src/components/ui/badge.tsx
      card                     src/components/ui/card.tsx

  in-sync (1)
      dialog                   src/components/ui/dialog.tsx

Actionable: 1

5DevOps and DevEx: from first commit to production

Netrya doesn't stop at the code. It knows the environments, pipelines and deploys the CS CoE runs, and /netrya:ship wires the same CI and deployment into a new app, so it has the monorepo's path to production from day one.

Ephemeral dev environments in the monorepo

• One click opens a fresh Ona workspace from .devcontainer, on Roche's Ona base image
• Node 22, the GitHub CLI and the pinned Playwright Chromium builds are baked in; ffmpeg and Xvfb are there for screenshots and demo GIFs
• Automations install all three apps, verify the browsers, and install @cs-coe components into prototypes from a registry served locally
• Dev servers start with health checks on :4320 components, :4321 showcase and :4322 prototypes, and are thrown away when you're done

CI that is a real gate in new apps

• An 8-job pipeline template: lockfile sync, design-system and useEffect checks, lint, typecheck, unit tests with coverage, accessibility, visual regression, build
• Every action is pinned to a commit SHA, and every workflow has least-privilege permissions
• react-doctor as advisory, knip for dead code, CODEOWNERS and a PR template with screenshot and test evidence
• /netrya:ship runs the gate, then drafts the PR

Continuous deployment live

• main goes to production on every merge; tags mark the versions teams upgrade to
• Cloudflare Pages at cscoe-frontend.ghpages.roche.com: every Roche employee via SSO, no GitHub licence needed
• Deploys use GitHub OIDC exchanged for a Vault token, so no cloud secret lives in the repo
• GitHub Pages mirror; each app gets its own ASTRO_BASE subpath, with the registry JSON served alongside

Protected review environments ready to enable

• Model evals run on Amazon Bedrock through OIDC: no API keys anywhere
• netrya-evals is locked to main for the unattended weekly run
• netrya-evals-review requires a second reviewer before any branch run gets credentials
• Built and in review; switches on once the Bedrock role is created
• Pull requests get an offline validation job and never touch paid infrastructure

Per-PR preview environments, for review and for prototyping proven on TargetNexus part of Netrya

Every pull request gets its own live, short-lived environment with a shareable link, torn down on merge. It's the same mechanism whether the change is production code or a prototype.

Prototype in code, not in decksTry a real, clickable idea on a real link the same day, instead of a mockup that has to be rebuilt later

Review the thing itselfReviewers click through the change, not screenshots of it

Global collaborationA link works across time zones, so teams in different regions review asynchronously without a hand-off meeting

Non-technical stakeholders includedScientists, PMs and leadership give feedback from a browser, with no clone, no setup and no GitHub needed

How TargetNexus uses it: each iteration ships to its own preview. Stakeholders around the world react to the live version, the team adjusts, and the next preview follows. The loop runs many times before anything reaches production, so what ships has already been used and agreed on.

Example A drive-by UX suggestion from a new engineer

A new engineer on TargetNexus spotted rough edges in the Reports table. Instead of filing a ticket or drawing a mockup, they used the AI coding setup to prototype table changes in a preview environment the team could try for themselves.

Give the target more visual weightDropdown filtersDifferent colours for Completed and RunningDurations as 02:20:13Clearer action iconsResizable columns for truncated textFull-word therapeutic-area pillsNo dash in empty cells

A drive-by idea became something working to react to, without touching production.

6TargetNexus as a benchmark

Our team works in the open… in private Slack channels. So the iteration history lived in threads, not in any tracker. I built a skill to read it back and measure how often each feature was reworked: the UX/Product Rework-Rate Baseline Report.

7Netrya on a real app: DDC Forge

DDC Forge is built on the Frontend Tech Solutions stack and was AI-coded from the app starter prompts. I ran Netrya's quality gate, useEffect guard and drift check against its frontend (roche-innersource/cscoe-ddc-forge, commit c4f1534), read-only, with no install and none of its own code executed.

1. Add check:useeffect and check:design-system to PR CI, and run the accessibility suite on PRs, not nightly.

2. Move status colours onto the success, warning and info tokens, and decide on Gene Sans vs Inter.

3. Swap the hand-built multi-select, pagination and date-range picker for the registry versions, then re-run the drift check with a baseline.

Dogfooding on a real codebase found four fixes to make in the plugin itself:

• The batch design-system script ran over 7 minutes on 349 files without finishing; the hook's rules covered 575 files in 34 s.
• The drift check counted .test and .stories files as components.
• --ignore-whitespace doesn't absorb Prettier style such as semicolons, so a formatted fork reads as all-drift.
• The font-medium rule assumes Gene Sans; it should follow the app's actual font.

8Netrya on a real app: Autolab

A different starting point. Autolab's web frontend (roche-innersource/cscoe-openlab, src/autolab/web, commit a72af34) is hand-built and doesn't use the Frontend Tech Solutions stack. Where DDC Forge needs a drift check, Autolab needs /netrya:modernize. Same read-only run: no install, and none of its code executed.

1. Test hardening first: Playwright journeys that query by role and name, and visual baselines that lock in today's look.
2. React 18 → 19, then a Tailwind v4 token layer carrying Autolab's current palette.
3. Registry components screen by screen: dialogs, tables, tooltips, select, alert dialog.
4. Justify or replace the 94 effects, and add the gates to CI.
5. Optional, last: adopt the Genentech theme, as a deliberate and reviewed visual change.

DDC Forge started on the stack via starter prompts, so Netrya's job is keeping it there: drift checks, gates, and effect discipline.

Autolab predates the stack, so Netrya's job is getting it there without breaking it: tests first, look and feel preserved by contract, one phase at a time.

Both scans ran in seconds; each analysis cost one to two dollars.

9Built to the bar it enforces