Menu
Implement an interactive scientific Datagrok application from an approved spec.md
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
| name | implement-interactive-scientific-application-from-spec |
| description | Implement an interactive scientific Datagrok application from an approved spec.md |
| when-to-use | When a spec.md exists and user asks to implement, code, or build the scientific application from it. NOT for CRUD apps. |
| context | fork |
| effort | high |
This skill takes an approved specification (spec.md) and produces a
complete, working Datagrok application.
Input: spec.md — created by the create-interactive-scientific-application-spec skill or written manually.
Output: fully implemented application with tests.
Base path: .claude/skills/implement-interactive-scientific-application-from-spec/ (relative to repo root).
All file paths below use {SKILL}/ as shorthand.
Find spec.md:
spec.md there.Read spec.md in full. Verify it contains at minimum:
If the spec is incomplete or missing critical sections — tell the user
and suggest running the create-interactive-scientific-application-spec skill first.
Read the following files. Read only what is relevant to the current application — check the spec's complexity level to decide.
Always read:
| File | Purpose |
|---|---|
{SKILL}/references/guide.md | Full implementation guide |
{SKILL}/references/reference/datagrok-api-reference.md | Datagrok inputs, viewers, layouts, subscriptions |
{SKILL}/references/reference/datagrok-coding-conventions.md | File structure, naming, formatting, error handling |
Read the reference example (complete working implementation):
| File | Purpose |
|---|---|
{SKILL}/references/examples/lotka-volterra-spec/lotka-volterra-spec.md | Example spec |
{SKILL}/references/examples/lotka-volterra-spec/code/ | Complete implementation following this architecture |
Read if the spec uses workers (Sections 1.2–1.3 are not N/A):
| File | Purpose |
|---|---|
{SKILL}/references/reference/WORKER-GUIDE.md | Worker-utils infrastructure and lifecycle |
Read if the spec uses parallel execution (e.g., grid search, sensitivity):
| File | Purpose |
|---|---|
{SKILL}/references/reference/PARALLEL-EXECUTION.md | Distribution across worker pools |
Read if the spec involves array-heavy computations:
| File | Purpose |
|---|---|
{SKILL}/references/reference/COMPUTATION-PATTERNS.md | Raw data and null handling |
{SKILL}/references/reference/ARRAY-OPERATIONS.md | Efficient typed array operations |
Follow this implementation sequence strictly:
datagrok-api or ui.validate() returning Map<InputId, string>
(Section 7 of spec).src/<app-name>/workers/
(Section 1.3 of spec). Each worker must be added as a separate entry
point in webpack.config.js:
'<worker-name>': {filename: '<worker-name>.js', import: './src/<app-name>/workers/<worker-name>.ts'}
new Worker(_package.webRoot + 'dist/<worker-name>.js').css/<app-name>.css with app-specific prefix.
No inline styles (Section 5.3 of spec).Follow the architecture guide strictly. Key principles:
<app-name>- prefix. No generic names.computationsBlocked flag for batch updates.subs[], terminate
workers on close, cancel pending operations.addValidators().busy wait loop for demo
purposes — never reproduce this pattern.alpha, beta),
not UI-prefixed identifiers (ctrl_alpha). The coordinator maps between
domain names and control IDs. Similarly, RANGES (slider min/max) belongs
to the UI adapter, not the core — the core should only define mathematical
domains (e.g., > 0).If during implementation you discover that the specification is incomplete, ambiguous, or inconsistent:
Do NOT improvise or fill gaps silently.
subs[] array.onViewRemoved handler cleans up all resources.| File | Required | When |
|---|---|---|
references/guide.md | Yes | Always |
references/reference/datagrok-api-reference.md | Yes | Always |
references/reference/datagrok-coding-conventions.md | Yes | Always |
references/reference/WORKER-GUIDE.md | Conditional | Spec uses workers |
references/reference/PARALLEL-EXECUTION.md | Conditional | Spec uses parallel execution |
references/reference/COMPUTATION-PATTERNS.md | Conditional | Array-heavy computations |
references/reference/ARRAY-OPERATIONS.md | Conditional | Typed array operations |
references/examples/lotka-volterra-spec/ | Yes | Complete reference implementation with spec |
Use whenever you need the Datagrok browser to actually execute JavaScript — adding viewers, filtering, modifying the view, or returning a result widget to the chat. Open this skill before calling the datagrok_exec tool.
Filter rows of a Datagrok DataFrame inside a datagrok-exec block through the Filters panel — by range, equals/contains/in-set, multi-value, boolean, free-text row expressions, or substructure (SMILES / SMARTS / molblock). Also covers clearing, inverting, the show-only-filtered vs destructive-drop split, and the filter event lifecycle (onRowsFiltering / onFilterChanged / onRowsFiltered). Use whenever the user says "filter", "show only", "hide rows where", "narrow to subset", "find rows that", "contains", "substructure search", "categorical filter", "range filter", "invert", "clear the filter", "clear filters", "drop rows", or asks for the filtered subset as a new table. Does NOT cover selection (separate skill) or generic DataFrame cloning (datagrok-df-and-columns).
Add a calculated, formula-based column to a dataframe inside a datagrok-exec block. Use whenever the user asks to compute, derive, add, or create a new column from existing columns — LipE, ratios, log/round, heavy atom count, any expression in the Datagrok formula DSL. Replaces hand-written addNewFloat/addNewInt + for-loop with a single formula-attached column that recomputes when source columns change.
Find, describe, add, remove, rename, clone, or set metadata on columns of a Datagrok DataFrame inside a datagrok-exec block. Use whenever the user asks to locate "the X column", summarize a column, add a typed/empty/values-filled/virtual column, set semantic type / units / format / friendly name, apply linear or categorical or conditional color coding, drop or rename columns, or copy a DataFrame. Covers everything in DataFrame.columns and Column.meta — but not row filtering/selection (datagrok-filtering, datagrok-selection) and not formula-only columns (datagrok-calc-column).
Sort, hide, show, reorder, resize, pin, format, and color-code columns in a Datagrok TableView grid from a datagrok-exec block. Use whenever the user asks to sort by a column (any direction), multi-sort, hide / show / reorder / pin / resize columns, freeze the first N columns, change number-format display, color-code cells (defaults and grid-only tint here; full per-type reference in datagrok-df-and-columns), set row height, or reset the grid back to defaults. Distinct from datagrok-df-and-columns (which owns column-level data metadata like semType, units, friendlyName, and is also where canonical color-coding lives) and from datagrok-viewers (which owns scatter plot / histogram / etc.). Does NOT cover filtering (`datagrok-filtering`), selection (`datagrok-selection`), custom cell renderer authoring (`create-cell-renderer`), saving / restoring layouts, or grid event handlers.
Add a viewer, configure a viewer, change viewer options, find viewer, close viewer, view a scatter plot, bar chart, histogram, line chart, box plot, pie chart, heat map, correlation plot, 3D scatter, trellis, density plot, statistics, on a Datagrok TableView inside a datagrok-exec block. Use whenever the user asks to plot, chart, visualize, show a graph, draw a distribution, color by a column, swap a viewer's axis, toggle a legend / regression line / log scale, replace one viewer with another, close every chart, reset the view to just the grid, or find an existing viewer by type. Plugin viewers like "Chem space", "sequence space", "activity cliffs" are NOT viewer types — they're registered functions — route those to `grok.functions.call`. Does NOT cover filtering (separate skill `datagrok-filtering`), selection (`datagrok-selection`), grid cell rendering (`datagrok-grid-customization`), layout save/restore, or custom-viewer authoring.