Menu
Use when changing SysNDD UI, UX, visual design, page layouts, tables, mobile rows, design tokens, authenticated admin/curation surfaces, or public data views
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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 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 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
| name | sysndd-visual-design |
| description | Use when changing SysNDD UI, UX, visual design, page layouts, tables, mobile rows, design tokens, authenticated admin/curation surfaces, or public data views |
Use this skill before editing any SysNDD frontend surface that changes how the app looks or feels.
Read documentation/10-visual-design-guide.md before making UI edits. Treat it as the source of truth for visual positioning, tokens, layout patterns, component rules, and route-specific debt.
AuthenticatedPageShell, TableShell, mobile-row, chip, token, and form patterns.For authenticated admin/curation visual changes, run:
cd app && PLAYWRIGHT_BASE_URL=http://localhost:5173 npx playwright test tests/e2e/authenticated-admin-curation-design.spec.ts --project=chromium-desktop
Before handoff, choose the repo verification lane appropriate to the change from AGENTS.md.