Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
drshailesh88 avatar

Visual Design System

  • 6 installs
  • 5 repo stars
  • Updated June 18, 2026
  • drshailesh88/integrated_content_os

Renders medical infographics from pre-built templates (trial results, drug mechanisms, comparisons) to publication-ready HTML, SVG, or PNG.

About

Generates template-driven medical infographics from clinical data using the AntV Infographic framework. A creator uses it to produce publication-ready charts like trial timelines, mechanism steps, and treatment comparisons.

  • Renders medical infographics from 11+ templates (trial timelines, mechanisms, comparisons)
  • Outputs publication-ready HTML/SVG/PNG via the AntV Infographic framework CLI or Python API

Visual Design System by the numbers

  • 6 all-time installs (skills.sh)
  • Ranked #1,098 of 1,337 Generative Media skills by installs in the Skillselion catalog
  • Data as of Jul 29, 2026 (Skillselion catalog sync)
npx skills add https://github.com/drshailesh88/integrated_content_os --skill visual-design-system

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs6
repo stars5
Last updatedJune 18, 2026
Repositorydrshailesh88/integrated_content_os

What it does

Renders medical infographics from pre-built templates (trial results, drug mechanisms, comparisons) to publication-ready HTML, SVG, or PNG.

Files

antv_infographic/SKILL.mdMarkdownGitHub ↗

AntV Infographic Integration

Purpose: Template-driven medical infographics using the AntV Infographic framework

---

Quick Start & Workflow

Step 1 — List Available Templates

cd skills/cardiology/visual-design-system/antv_infographic
python scripts/antv_cli.py list --verbose

Available Templates (full catalog: see TEMPLATES.md): 1. trial_result_simple — Clinical trial timeline (4 phases) 2. mechanism_of_action — Drug mechanism steps (5 steps) 3. treatment_comparison — Side-by-side treatment comparison 4. patient_journey — Patient care pathway (5 stages) 5. guideline_recommendations — Guideline strength classification 6. dosing_schedule — Medication dosing schedule (4 weeks) 7. safety_profile — Adverse events by frequency 8. biomarker_progression — Biomarker changes over time 9. trial_endpoints — Primary and secondary endpoints 10. risk_stratification — Risk level classification 11. diagnostic_pathway — Diagnostic workflow (5 steps)

Step 2 — Render to HTML

python scripts/antv_cli.py render \
  --template mechanism_of_action \
  --output outputs/mechanism_of_action.html \
  --width 1000 --height 800 \
  --title "Drug Mechanism"

Step 3 — Validate Output

Confirm the HTML file exists and is non-empty before proceeding.

ls -lh outputs/mechanism_of_action.html   # Should be >10KB; if missing or tiny, re-run with --verbose

Step 4 — Download Output

Open the HTML in your browser (path is printed in CLI output), then click Download SVG (vector, editable) or Download PNG (raster, 2× resolution, publication quality).

---

Python API

from scripts.antv_renderer import render_template, AntvRenderer

# Quick render
output = render_template('trial_result_simple', 'output.html')
assert output.exists() and output.stat().st_size > 1000, "Render failed"

# Advanced usage
renderer = AntvRenderer()
renderer.render_template_to_html(
    'mechanism_of_action',
    'mechanism.html',
    width=1000,
    height=800,
    title='Drug Mechanism of Action'
)

Programmatic batch rendering:

from scripts.antv_renderer import AntvRenderer

renderer = AntvRenderer()
templates = ['trial_result_simple', 'mechanism_of_action', 'patient_journey']

for template in templates:
    output = renderer.render_template_to_html(
        template,
        f'outputs/{template}.html',
        width=1200,
        height=900
    )
    assert output.exists() and output.stat().st_size > 1000, f"Render failed: {template}"
    print(f"Generated: {output}")

---

Template Examples

Mechanism of Action (mechanism_of_action)

Use for: Drug mechanisms, biological pathways

infographic list-row-simple-vertical
data
  items:
    - label: Oral Administration
      desc: Drug taken orally, absorbed in GI tract
    - label: Systemic Distribution
      desc: Reaches target organs via bloodstream
    - label: Receptor Binding
      desc: Binds to specific receptors at cellular level
    - label: Cellular Response
      desc: Triggers cascade of intracellular signaling
    - label: Clinical Effect
      desc: Measurable improvement in symptoms/outcomes

---

Custom Spec Syntax

infographic [TEMPLATE_TYPE]
data
  items:
    - label: [LABEL_TEXT]
      desc: [DESCRIPTION_TEXT]

Template types:

  • list-row-simple-horizontal-arrow — Horizontal timeline with arrows
  • list-row-simple-vertical — Vertical list with connectors
  • (200+ more — see AntV documentation)

Render custom spec:

python scripts/antv_cli.py render \
  --spec "infographic list-row-simple-horizontal-arrow
data
  items:
    - label: Step 1
      desc: First action
    - label: Step 2
      desc: Second action" \
  --output custom.html

---

Visual Router Integration

Routing keywords: "template infographic", "structured infographic", "step-by-step infographic", "trial timeline", "mechanism steps", "treatment pathway infographic"

from cardiology_visual_system.scripts.visual_router import VisualRouter

router = VisualRouter()
router.route("Create a template infographic showing trial timeline")   # → AntV
# Other tools: custom infographic → Gemini | forest plot → Plotly | flowchart → Mermaid

---

CLI Reference

python scripts/antv_cli.py list                    # Simple list
python scripts/antv_cli.py list --verbose          # With descriptions
python scripts/antv_cli.py render \
  --template mechanism_of_action \
  --output outputs/mechanism.html \
  --width 1000 --height 800 \
  --title "Drug Mechanism"
python scripts/antv_cli.py examples               # Generate all 11 examples to outputs/examples/
python scripts/antv_cli.py info                   # Show integration info

---

Troubleshooting

SymptomFix
HTML doesn't open automaticallyOpen manually; path is printed in CLI output
SVG download button failsUse a modern browser (Chrome, Firefox, Safari); check console for errors
Python import errorRun from skills/cardiology/visual-design-system/antv_infographic/
Template not foundCheck spelling; use list --verbose; templates live in templates/*.txt

---

References

Related skills

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.