LLMs-Universal-Life-Science-and-Clinical-Skills- svg-ui-templates

install

source · Clone the upstream repo

git clone https://github.com/mdbabumiamssm/LLMs-Universal-Life-Science-and-Clinical-Skills-

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/mdbabumiamssm/LLMs-Universal-Life-Science-and-Clinical-Skills- "$T" && mkdir -p ~/.claude/skills && cp -r "$T/Skills/Research_Tools/Reporting/svg-ui-templates" ~/.claude/skills/mdbabumiamssm-llms-universal-life-science-and-clinical-skills-svg-ui-templates && rm -rf "$T"

manifest: Skills/Research_Tools/Reporting/svg-ui-templates/SKILL.md

source content

Repository note: Located at
repo/Skills/Research_Tools/Reporting/svg-ui-templates
. Pair with the sibling
feishu-rich-card
skill when turning the generated PNGs into Feishu cards.

SVG UI Templates

Generate professional-grade SVG information panels optimized for horizontal (landscape) display.

Templates

Template	File	Use Case
list-panel	`assets/list-panel.svg`	数据表格、参数列表、对比表
checklist-panel	`assets/checklist-panel.svg`	任务清单、进度追踪、TODO
pipeline-status	`assets/pipeline-status.svg`	流程依赖图、阶段状态、里程碑
richtext-layout	`assets/richtext-layout.svg`	图文混排、报告摘要、数据简报

Workflow

Read the appropriate template SVG from
```
assets/
```
Replace
```
{{PLACEHOLDER}}
```
tokens with actual content
Adjust row count / node count by duplicating elements with y-offset
Adjust
```
viewBox
```
height if content exceeds default
Save final SVG → convert to PNG with cairosvg for messaging platforms

For detailed placeholder lists, color system, and extension methods: read

references/template-guide.md

Key Rules

viewBox width = 1200 (landscape, ~16:9). Adjust height as needed.

Font stack:

'Inter','Helvetica Neue','Microsoft YaHei',sans-serif

— never change order.

Status colors: Green=#43A047, Amber=#FF8F00, Grey=#90A4AE, Red=#E53935
Shadow filter on all cards:
```
filter="url(#cardShadow)"
```
or equivalent id.
Row spacing: duplicate row blocks with +56px (list) or +60px (checklist) y-offset.

PNG conversion:

python3 -c "import cairosvg; cairosvg.svg2png(url='in.svg', write_to='out.png', output_width=2400)"

When sending via Feishu/WeChat, always convert to PNG first (SVG not rendered inline).
飞书图文卡片集成: 生成 PNG 后，使用
```
feishu-rich-card
```
skill 将图片嵌入飞书交互式卡片，实现图文混排汇报。参见
```
../feishu-rich-card/SKILL.md
```
。