Agent Skills › xjtulyc/MedgeClaw › svg-ui-templates

svg-ui-templates

GitHub

生成专业级 SVG UI 面板，支持列表、清单、流水线状态及富文本布局。通过替换占位符和动态调整尺寸构建图表，并转换为 PNG 以适配飞书等即时通讯平台发送。

skills/svg-ui-templates/SKILL.md xjtulyc/MedgeClaw

触发场景

需要生成结构化信息展示的图片创建任务清单或进度追踪图制作流程依赖或里程碑状态图生成图文混排的报告摘要或数据简报

安装

npx skills add xjtulyc/MedgeClaw --skill svg-ui-templates -g -y

更多选项

不安装直接使用

npx skills use xjtulyc/MedgeClaw@svg-ui-templates

指定 Agent (Claude Code)

npx skills add xjtulyc/MedgeClaw --skill svg-ui-templates -a claude-code -g -y

安装 repo 全部 skill

npx skills add xjtulyc/MedgeClaw --all -g -y

预览 repo 内 skill

npx skills add xjtulyc/MedgeClaw --list

SKILL.md

Frontmatter

{
    "name": "svg-ui-templates",
    "description": "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."
}

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。