Zaoqu-Liu/svg-ui-templates
skills/medge-svg-ui-templates/SKILL.md
Generate professional SVG UI panels for structured information display. Use when presenting lists, task checklists, pipeline/dependency status diagrams, or rich-text report layouts as SVG images. Covers four templates - list-panel, checklist-panel, pipeline-status, richtext-layout. Style is professional, business-oriented, academic-grade with Material Design color palette.
$ install --global
skillsauthnpx skillsauth add Zaoqu-Liu/ScienceClaw svg-ui-templatesInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 22, 2026, 4:19 AM135.5s1 file scanned
SKILL.md
- name:
- svg-ui-templates
- description:
- >
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
viewBoxheight 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-cardskill 将图片嵌入飞书交互式卡片，实现图文混排汇报。参见../feishu-rich-card/SKILL.md。
Related Skills
Zaoqu-Liu/pytdc
testing
VerifiedTrustedCommunity
Therapeutics Data Commons. AI-ready drug discovery datasets (ADME, toxicity, DTI), benchmarks, scaffold splits, molecular oracles, for therapeutic ML and pharmacological prediction.
44SKILL.mdUpdated Apr 22, 2026
Zaoqu-Liu/pysam
tools
VerifiedTrustedCommunity
Genomic file toolkit. Read/write SAM/BAM/CRAM alignments, VCF/BCF variants, FASTA/FASTQ sequences, extract regions, calculate coverage, for NGS data processing pipelines.
44SKILL.mdUpdated Apr 21, 2026
Zaoqu-Liu/pyopenms
development
VerifiedTrustedCommunity
Complete mass spectrometry analysis platform. Use for proteomics workflows feature detection, peptide identification, protein quantification, and complex LC-MS/MS pipelines. Supports extensive file formats and algorithms. Best for proteomics, comprehensive MS data processing. For simple spectral comparison and metabolite ID use matchms.
44SKILL.mdUpdated Apr 21, 2026
Zaoqu-Liu/pymoo
development
VerifiedTrustedCommunity
Multi-objective optimization framework. NSGA-II, NSGA-III, MOEA/D, Pareto fronts, constraint handling, benchmarks (ZDT, DTLZ), for engineering design and optimization problems.
44SKILL.mdUpdated Apr 21, 2026