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.
npx skills add BioTender-max/awesome-bio-agent-skills --skill svg-ui-templates --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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(
- Templates
- Workflow
- Key Rules
What does the svg-ui-templates 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.
How do I install it?
Run `npx skills add BioTender-max/awesome-bio-agent-skills --skill svg-ui-templates --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From BioTender-max/awesome-bio-agent-skills, a repository with 135 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.