본문으로 건너뛰기
cccskills
무료GitHub에 공개

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

xjtulyc/MedgeClaw스타 617(GitHub 617 + cccskills 0)

실행 점수 미검증

설치 방법 보기

포함된 파일(6)

  • SKILL.md2.2 KB
  • assets/checklist-panel.svg6.0 KB
  • assets/list-panel.svg4.5 KB
  • assets/pipeline-status.svg7.6 KB
  • assets/richtext-layout.svg5.3 KB
  • references/template-guide.md4.2 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

SVG UI Templates

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

Templates

TemplateFileUse Case
list-panelassets/list-panel.svg数据表格、参数列表、对比表
checklist-panelassets/checklist-panel.svg任务清单、进度追踪、TODO
pipeline-statusassets/pipeline-status.svg流程依赖图、阶段状态、里程碑
richtext-layoutassets/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。

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Dispatch biomedical research and data analysis tasks to Claude Code with K-Dense Scientific Skills. Use this skill when the user asks to run any bioinformatics, genomics, drug discovery, clinical data analysis, proteomics, multi-omics, medical imaging, or scientific computation task. Also use for literature search (PubMed, bioRxiv), pathway analysis, protein structure prediction, or scientific writing tasks.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

xjtulyc/MedgeClaw6172026년 3월 12일 업데이트

CHARLS (China Health and Retirement Longitudinal Study) database-specific knowledge for reproducing published papers. Use when reproducing or analyzing papers that use CHARLS data, including variable mapping from harmonized to raw questionnaire items, cognitive function scoring (episodic memory, mental status, TICS), CESD-10 depression screening, social isolation index construction, and chronic disease coding. Also use for any CHARLS data cleaning, variable construction, or cohort selection task.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

xjtulyc/MedgeClaw6172026년 3월 12일 업데이트

cjk-viz

무료

CJK (中日韩) 字体检测与 matplotlib 配置。任何涉及中文标签、标题、图例的 可视化任务启动前必须先执行本 skill 的字体检测流程,确保不会出现方块乱码。 适用于 matplotlib / seaborn / plotly 静态导出等场景。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

xjtulyc/MedgeClaw6172026년 3월 12일 업데이트

Send rich interactive cards with embedded images in Feishu group chats. Use when reporting progress, sharing analysis results, or presenting any content that benefits from mixed text+image layout in Feishu. Combines SVG UI templates (or matplotlib/PIL charts) with Feishu Card Kit API.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

xjtulyc/MedgeClaw6172026년 3월 12일 업데이트

Systematic methodology for reproducing published academic papers using provided data. Use when the user asks to reproduce, replicate, or verify results from a published paper, including sample selection, descriptive statistics, regression analyses, and generating reproduction reports (Markdown + LaTeX PDF). Covers the full pipeline: data exploration, variable identification/mapping, sample filtering, variable construction, statistical analysis, result comparison, and documentation. Applicable to any observational study, clinical cohort, or survey-based research paper.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

xjtulyc/MedgeClaw6172026년 3월 12일 업데이트

xjtulyc의 스킬 모두 보기

이 스킬의 문제 신고