القائمة
Use when wiring a SysNDD Vue 3 view or component to the backend API, adding a typed API client, handling API errors, or binding backend data into BootstrapVueNext tables and tooltips — especially around Plumber response shapes and BVN table/tooltip quirks
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Use when adding or changing an external HTTP provider call in SysNDD (gnomAD, Ensembl, UniProt, AlphaFold, MGI, RGD, PubMed, PubTator, MONDO, JAX/HPO) or touching external-call timeouts, retries, caching, or per-request time budgets
Use when adding or changing a SysNDD DB migration, editing a SQL view (especially ndd_entity_view or the core read views), touching the migration runner or manifest, restoring a database, or diagnosing a startup failure related to migrations
Use when reviewing or writing SysNDD code for security vulnerabilities or correctness bugs — authorization/role gates, SQL/expression injection, credential and secret handling, data exposure through public or MCP surfaces, resource-exhaustion/DoS from external calls, error/info leakage, and the repo's known R/Plumber footguns — especially before merging a diff or PR
Use when changing gene clustering (STRING/Leiden functional axis or phenotype MCA/HCPC), the analysis snapshot builder or validator, the memoised clustering cache, cache coherence, or LLM cluster summaries — or deploying a clustering change so public endpoints and summaries reflect it
Use when writing, running, or fixing SysNDD R/Plumber API tests (testthat) — including database-writing tests, running a single test inside the API container, mocking external providers, or diagnosing SKIP-vs-PASS, helper-loading, or path-resolution issues
Use when adding or changing durable async jobs, worker-executed code, job handlers, queue lanes or priorities in SysNDD — or diagnosing why a submitted job never runs, stays queued, or fails with "No durable async job handler registered"
| name | sysndd-frontend-integration |
| description | Use when wiring a SysNDD Vue 3 view or component to the backend API, adding a typed API client, handling API errors, or binding backend data into BootstrapVueNext tables and tooltips — especially around Plumber response shapes and BVN table/tooltip quirks |
Use this skill when connecting the frontend to the API or binding backend data into the UI. These are the boundary rules and BootstrapVueNext (BVN) quirks that repeatedly bite. For visual/layout work, use sysndd-visual-design instead.
All backend access goes through the typed clients in app/src/api/* (client.ts is the shared base). Do not add raw axios calls in views/components, and do not read localStorage.token / localStorage.user directly. Add or extend a typed client method (with its .spec.ts) instead.
["abc"]. Unwrap with unwrapValue before feeding a value back into axios params — otherwise axios encodes param[]=value, which Plumber won't match (e.g. an async job_id).extractApiErrorMessage(err, fallback) (app/src/utils/api-errors.ts, which prefers detail → title). Don't hand-parse error response shapes.BTable (and the GenericTable wrapper) cannot display a field whose key contains a dot: the cell resolver renders blank, and a #cell-a.b slot parses as cell-a + .b modifier. Alias dotted source columns (e.g. MCA stats p.value, v.test) to flat keys (p_value, v_test) before binding them as field keys — see normalizePhenotypeClusterRows() in app/src/components/analyses/phenotypeClusterTable.ts. Keep the original dotted keys on the row if the Excel export header map still reads them.v-b-tooltip is reactive to its binding value, not a bound :title. For a tooltip whose text changes (e.g. faceted "filtered/total" counts), bind through the directive value — v-b-tooltip.hover.bottom="getTooltipText(field)" — never :title="getTooltipText(field)" (that patches data-original-title but never re-renders the popover). Static :title tooltips whose text never changes are fine. Guard: app/src/components/tables/columnHeaderTooltipReactivity.spec.ts.Importing composables from the @/composables barrel drags ngl/markdown/d3 (~600 KB) onto a route's critical path. On perf-sensitive routes, import composables by their direct path, not the barrel.
cd app && npm run type-check # (+ npm run type-check:strict for touched scope)
cd app && npm run test:unit # or: npx vitest run <spec> / -t "<name>"
make lint-app # ESLint + MSW↔OpenAPI drift check