Skip to content

Add CLAUDE.md and Claude Code skills for MS webapp development#357

Merged
t0mdavid-m merged 2 commits intomainfrom
claude/plan-webapp-skills-8zGQF
Mar 27, 2026
Merged

Add CLAUDE.md and Claude Code skills for MS webapp development#357
t0mdavid-m merged 2 commits intomainfrom
claude/plan-webapp-skills-8zGQF

Conversation

@t0mdavid-m
Copy link
Copy Markdown
Member

@t0mdavid-m t0mdavid-m commented Mar 26, 2026

Summary

Adds Claude Code project documentation and skills to help developers build and modify mass spectrometry web applications using this template.

CLAUDE.md — MS domain framing

The CLAUDE.md establishes this as the standard framework for building MS web applications for proteomics and metabolomics research. It documents:

  • MS domain context: data types (mzML, featureXML, consensusXML, idXML), TOPP tool pipelines, proteomics vs metabolomics workflows
  • Production apps built from this template: quantms-web, umetaflow, FLASHApp
  • Architecture: pages, WorkflowManager pattern, parameter system, presets, python-tools
  • Visualization libraries: pyopenms-viz (DataFrame .plot() extension) and OpenMS-Insight (Vue.js interactive components)

6 Claude Code skills (.claude/skills/)

Skill Purpose
/create-page Scaffold a new Streamlit page with proper registration
/create-workflow Scaffold a full TOPP workflow (WorkflowManager subclass + 4 pages) — asks for scientific purpose, TOPP tools, MS file types
/add-python-tool Add a custom Python analysis script with DEFAULTS-based auto-UI
/add-presets Add/modify parameter presets in presets.json
/configure-deployment Set up Docker, settings.json, and CI/CD for a new app
/add-visualization Add pyopenms-viz or OpenMS-Insight MS data visualizations

Skills reference derived apps (quantms-web, umetaflow, FLASHApp) as real-world examples so Claude can learn from and modify them.

Recommendations for other repos (not in this PR)

  • pyopenms-viz: Add CLAUDE.md documenting DataFrame .plot() API, plot types, backends. Consider /add-plot-type skill.
  • OpenMS-Insight: Add CLAUDE.md documenting Vue.js component architecture, cross-linking, caching. Consider /add-component skill.
  • Derived apps: Each needs a domain-specific CLAUDE.md and can inherit these template skills. umetaflow and FLASHApp are missing CLAUDE.md files.

Test plan

  • Verify all 7 new files are present and well-formed markdown
  • Test each skill by invoking it in Claude Code on the template repo
  • Confirm existing tests still pass: python -m pytest tests/
  • Confirm streamlit run app.py still works

https://claude.ai/code/session_01WYotmLfqRtB8WJXj1Eosiz

Adds project documentation (CLAUDE.md) and 6 skills to help developers
scaffold and extend OpenMS web applications built from this template:
- /create-page: add a new Streamlit page with proper registration
- /create-workflow: scaffold a full TOPP workflow (class + 4 pages)
- /add-python-tool: add a custom Python analysis script with auto-UI
- /add-presets: add parameter presets for workflows
- /configure-deployment: set up Docker and CI/CD for a new app
- /add-visualization: add pyopenms-viz or OpenMS-Insight visualizations

https://claude.ai/code/session_01WYotmLfqRtB8WJXj1Eosiz
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Mar 26, 2026

📝 Walkthrough

Walkthrough

Adds seven documentation/skill files describing presets, custom Python tools, visualizations, deployment, Streamlit pages, TOPP workflows, and a repository overview for the OpenMS Streamlit WebApp Template.

Changes

Cohort / File(s) Summary
Skill: presets & tools
./.claude/skills/add-presets.md, ./.claude/skills/add-python-tool.md
Docs for creating/modifying presets.json (structure, runtime behavior, key rules) and for authoring Python analysis tools (src/python-tools/*.py metadata, DEFAULTS, get_params(), wiring into configure()/execution()).
Skill: visualizations
./.claude/skills/add-visualization.md
Guidance on selecting visualization backends (pyopenms-viz, OpenMS-Insight, plotly), example component patterns, cross-component linking via link_id, and integration into workflow results() pages.
Skill: deployment & pages
./.claude/skills/configure-deployment.md, ./.claude/skills/create-page.md
Instructions for Docker/CI config, settings.json updates, docker-compose.yml, and adding Streamlit pages under content/ plus registering pages and updating default-parameters.json.
Skill: workflow authoring
./.claude/skills/create-workflow.md
End-to-end spec for authoring TOPP workflows: WorkflowManager subclass pattern, lifecycle methods (upload, configure, execution, results), file resolution, chaining executor.run_topp(...), and UI/persistence conventions.
Template overview
CLAUDE.md
Repository and runtime overview: architecture, key src/ modules, parameter persistence (default-parameters.json, presets.json), page lifecycle (page_setup(), save_params()), Python tool conventions, visualization notes, and local/Docker run guidance.

Possibly related PRs

Poem

🐰
I hopped through docs both near and far,
Presets, pages, tools — each a star.
Workflows stitched with care and art,
Builders start with a joyful heart.
Hop on — a template’s ready to chart!

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately reflects the main change—adding CLAUDE.md and a comprehensive set of Claude Code skills for MS webapp development.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch claude/plan-webapp-skills-8zGQF

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
CLAUDE.md (1)

15-36: Consider adding language specifier to fenced code block.

The ASCII art architecture diagram is missing a language specifier. While this works fine, adding ```text would satisfy the linter and make the intent clearer.

📝 Proposed improvement
-```
+```text
 app.py                          # Entry point — registers pages via st.Page() in a dict
 settings.json                   # App config: name, version, deployment mode, threading
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@CLAUDE.md` around lines 15 - 36, Update the fenced ASCII-art block in
CLAUDE.md to include a language specifier by changing the opening fence from ```
to ```text so the architecture diagram (the block containing app.py,
settings.json, src/, Dockerfile, etc.) is marked as plain text and satisfies the
linter.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@CLAUDE.md`:
- Around line 15-36: Update the fenced ASCII-art block in CLAUDE.md to include a
language specifier by changing the opening fence from ``` to ```text so the
architecture diagram (the block containing app.py, settings.json, src/,
Dockerfile, etc.) is marked as plain text and satisfies the linter.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 30f4e374-82ba-4170-960a-49b274b24993

📥 Commits

Reviewing files that changed from the base of the PR and between 128da6d and a10fc3e.

📒 Files selected for processing (7)
  • .claude/skills/add-presets.md
  • .claude/skills/add-python-tool.md
  • .claude/skills/add-visualization.md
  • .claude/skills/configure-deployment.md
  • .claude/skills/create-page.md
  • .claude/skills/create-workflow.md
  • CLAUDE.md

Make it clear to Claude that this is THE framework for building mass
spectrometry web applications for proteomics and metabolomics research.
Add domain-specific context about MS data types, TOPP tool pipelines,
and scientific visualization needs.

https://claude.ai/code/session_01WYotmLfqRtB8WJXj1Eosiz
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@CLAUDE.md`:
- Around line 26-47: The fenced code block in CLAUDE.md listing project files is
missing a language tag; update that opening triple-backtick (the block that
begins with the lines showing app.py, settings.json, etc.) to include a language
identifier such as text (e.g., ```text) so markdownlint MD040 is satisfied—no
other changes to the block contents are needed.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: daf2dbe4-54f7-4b5e-9c3a-8c610437c2af

📥 Commits

Reviewing files that changed from the base of the PR and between a10fc3e and 0122380.

📒 Files selected for processing (4)
  • .claude/skills/add-python-tool.md
  • .claude/skills/add-visualization.md
  • .claude/skills/create-workflow.md
  • CLAUDE.md
✅ Files skipped from review due to trivial changes (2)
  • .claude/skills/create-workflow.md
  • .claude/skills/add-python-tool.md
🚧 Files skipped from review as they are similar to previous changes (1)
  • .claude/skills/add-visualization.md

Comment thread CLAUDE.md
Comment on lines +26 to +47
```
app.py # Entry point — registers pages via st.Page() in a dict
settings.json # App config: name, version, deployment mode, threading
default-parameters.json # Default workspace parameters (tracked via widget keys)
presets.json # Parameter presets for TOPP workflows
content/ # Streamlit pages (one .py per page)
src/
common/common.py # Utilities: page_setup(), save_params(), show_fig(), show_table()
Workflow.py # Example WorkflowManager subclass (TOPP workflow)
workflow/
WorkflowManager.py # Base class: upload/configure/execution/results pattern
StreamlitUI.py # Widget library: upload_widget, input_TOPP, input_python, etc.
ParameterManager.py # JSON parameter persistence + TOPP .ini generation
CommandExecutor.py # Runs TOPP tools and Python scripts as subprocesses
FileManager.py # Workspace file organization
Logger.py # Structured workflow logging
QueueManager.py # Redis queue for online deployments
python-tools/ # Custom Python analysis scripts (with DEFAULTS dicts)
Dockerfile # Full build: OpenMS + TOPP tools + pyOpenMS
Dockerfile_simple # Lightweight: pyOpenMS only
docker-compose.yml # Deployment config
```
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Add a language tag to the fenced code block.

The fence starting at Line 26 is missing a language identifier, which triggers markdownlint MD040.

Proposed fix
-```
+```text
 app.py                          # Entry point — registers pages via st.Page() in a dict
 settings.json                   # App config: name, version, deployment mode, threading
 default-parameters.json         # Default workspace parameters (tracked via widget keys)
@@
 docker-compose.yml              # Deployment config
</details>

<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion

🧰 Tools
🪛 markdownlint-cli2 (0.22.0)

[warning] 26-26: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@CLAUDE.md` around lines 26 - 47, The fenced code block in CLAUDE.md listing
project files is missing a language tag; update that opening triple-backtick
(the block that begins with the lines showing app.py, settings.json, etc.) to
include a language identifier such as text (e.g., ```text) so markdownlint MD040
is satisfied—no other changes to the block contents are needed.

@t0mdavid-m t0mdavid-m changed the title Add CLAUDE.md and Claude Code skills for webapp development Add CLAUDE.md and Claude Code skills for MS webapp development Mar 27, 2026
@t0mdavid-m t0mdavid-m merged commit 42fc187 into main Mar 27, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants