svg-ui-templates
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.
Best use case
svg-ui-templates is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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.
Teams using svg-ui-templates should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/medge-svg-ui-templates/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How svg-ui-templates Compares
| Feature / Agent | svg-ui-templates | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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
1. Read the appropriate template SVG from `assets/`
2. Replace `{{PLACEHOLDER}}` tokens with actual content
3. Adjust row count / node count by duplicating elements with y-offset
4. Adjust `viewBox` height if content exceeds default
5. 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`。Related Skills
venue-templates
Access comprehensive LaTeX templates, formatting requirements, and submission guidelines for major scientific publication venues (Nature, Science, PLOS, IEEE, ACM), academic conferences (NeurIPS, ICML, CVPR, CHI), research posters, and grant proposals (NSF, NIH, DOE, DARPA). This skill should be used when preparing manuscripts for journal submission, conference papers, research posters, or grant proposals and need venue-specific formatting requirements and templates.
ScienceClaw Presentations — Joey's PPT Templates
Joey's reference for all presentation work. Use this skill when creating academic presentations.
zinc-database
Access ZINC (230M+ purchasable compounds). Search by ZINC ID/SMILES, similarity searches, 3D-ready structures for docking, analog discovery, for virtual screening and drug discovery.
zarr-python
Chunked N-D arrays for cloud storage. Compressed arrays, parallel I/O, S3/GCS integration, NumPy/Dask/Xarray compatible, for large-scale scientific computing pipelines.
Academic Writing
## Overview
scientific-visualization
## Overview
vaex
Use this skill for processing and analyzing large tabular datasets (billions of rows) that exceed available RAM. Vaex excels at out-of-core DataFrame operations, lazy evaluation, fast aggregations, efficient visualization of big data, and machine learning on large datasets. Apply when users need to work with large CSV/HDF5/Arrow/Parquet files, perform fast statistics on massive datasets, create visualizations of big data, or build ML pipelines that do not fit in memory.
uspto-database
Access USPTO APIs for patent/trademark searches, examination history (PEDS), assignments, citations, office actions, TSDR, for IP analysis and prior art searches.
uniprot-database
Direct REST API access to UniProt. Protein searches, FASTA retrieval, ID mapping, Swiss-Prot/TrEMBL. For Python workflows with multiple databases, prefer bioservices (unified interface to 40+ services). Use this for direct HTTP/REST work or UniProt-specific control.
umap-learn
UMAP dimensionality reduction. Fast nonlinear manifold learning for 2D/3D visualization, clustering preprocessing (HDBSCAN), supervised/parametric UMAP, for high-dimensional data.
treatment-plans
Generate concise (3-4 page), focused medical treatment plans in LaTeX/PDF format for all clinical specialties. Supports general medical treatment, rehabilitation therapy, mental health care, chronic disease management, perioperative care, and pain management. Includes SMART goal frameworks, evidence-based interventions with minimal text citations, regulatory compliance (HIPAA), and professional formatting. Prioritizes brevity and clinical actionability.
transformers
This skill should be used when working with pre-trained transformer models for natural language processing, computer vision, audio, or multimodal tasks. Use for text generation, classification, question answering, translation, summarization, image classification, object detection, speech recognition, and fine-tuning models on custom datasets.