メニュー
HackMD collaborative markdown - slide presentations, embedded SVG diagrams, and real-time editing best practices
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Run shell commands bare — no decorative echo headers ("=== X ==="), no echo-then-cmd chains, no trailing "echo done". Use the Bash tool's description field for any narration. Triggers any time you're about to issue a Bash command.
Expert guide for managing Claude Code global skills and commands. Use when creating new skills, symlinking to projects, updating existing skills, or organizing the centralized skill repository.
Token optimization best practices for cost-effective Claude Code usage. Automatically applies efficient file reading, command execution, and output handling strategies. Includes model selection guidance (Opus for learning, Sonnet for development/debugging). Prefers bash commands over reading files.
BioBlend and Planemo expertise for Galaxy workflow automation. Galaxy API usage, workflow invocation, status checking, error handling, batch processing, and dataset management. Essential for any Galaxy automation project.
Expert in Galaxy tool wrapper development, XML schemas, Planemo testing, and best practices for creating Galaxy tools
Expert in Galaxy workflow development, testing, and IWC best practices. Create, validate, and optimize .ga workflows following Intergalactic Workflow Commission standards.
| name | hackmd |
| description | HackMD collaborative markdown - slide presentations, embedded SVG diagrams, and real-time editing best practices |
| allowed-tools | Read, Grep, Glob, Bash |
HackMD is a collaborative markdown platform that supports real-time editing, slide presentations, and embedded content. This skill covers best practices for creating HackMD-compatible documents, particularly with embedded SVG diagrams.
HackMD supports presentation mode using --- separators between slides.
---
title: Presentation Title
tags: tag1, tag2
slideOptions:
theme: white # white, black, league, beige, sky, night, serif, simple, solarized
transition: slide # none, fade, slide, convex, concave, zoom
---
--- creates a new horizontal slide---- creates a vertical slide (nested under previous)S for speaker viewF for fullscreen<rect x="120" y="95" width="120" height="50" rx="8" fill="#4285f4"/>
<text x="180" y="115" text-anchor="middle" fill="white">Label</text>
<!-- This may not render correctly in HackMD -->
<g transform="translate(180, 120)">
<rect x="-60" y="-25" width="120" height="50"/>
</g>
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#666"/>
</marker>
</defs>
<!-- These will NOT render in HackMD -->
<defs>
<filter id="shadow">
<feDropShadow dx="2" dy="2" stdDeviation="3"/>
</filter>
</defs>
<rect filter="url(#shadow)"/> <!-- Won't work -->
When embedding multiple SVGs in one document, use unique IDs to avoid conflicts:
<!-- First SVG -->
<marker id="arrow-slide1" ...>
<!-- Second SVG -->
<marker id="arrow-slide2" ...>
<g opacity="0.3">
<rect .../>
<text .../>
</g>
<!-- Avoid -->
<style>
.highlight { fill: blue; }
</style>
<svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg"
style="font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;">
<defs>
<marker id="arr" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#666"/>
</marker>
</defs>
<!-- Background -->
<rect x="0" y="0" width="800" height="400" fill="#f5f5f5"/>
<!-- Boxes with direct coordinates -->
<rect x="50" y="100" width="120" height="50" rx="8" fill="#4285f4" stroke="#1a73e8" stroke-width="2"/>
<text x="110" y="130" text-anchor="middle" fill="white" font-size="12" font-weight="bold">Box 1</text>
<!-- Arrows -->
<path d="M 170 125 L 250 125" fill="none" stroke="#666" stroke-width="1.5" marker-end="url(#arr)"/>
<!-- Dimmed elements -->
<g opacity="0.3">
<rect x="50" y="200" width="120" height="50" rx="8" fill="#4285f4"/>
<text x="110" y="230" text-anchor="middle" fill="white" font-size="12">Inactive</text>
</g>
</svg>
| Issue | Cause | Solution |
|---|---|---|
| Boxes don't appear | Using filter="url(#shadow)" | Remove all filter attributes |
| Raw XML showing | Unclosed tags or special characters | Validate XML, escape & as & |
| Elements misaligned | Using transform="translate()" | Use direct x, y coordinates |
| Arrows missing | ID conflicts between SVGs | Use unique IDs per SVG |
| Text cut off | ViewBox too small | Adjust viewBox dimensions |
| Feature | Supported | Notes |
|---|---|---|
| Basic shapes (rect, circle, path) | ✅ | |
| Text elements | ✅ | |
| Fill and stroke | ✅ | |
| Opacity | ✅ | |
| Markers (arrows) | ✅ | Keep simple |
| Gradients | ⚠️ | May work, test first |
| Filters (shadow, blur) | ❌ | Not supported |
| ClipPath | ⚠️ | Limited support |
| Animations | ❌ | Not supported |
| External fonts | ❌ | Use system fonts |
For simpler diagrams, HackMD natively supports Mermaid:
```mermaid
flowchart LR
A[Start] --> B[Process]
B --> C[End]
```
When to use Mermaid vs SVG:
From HackMD you can export to: