Jirayu Sirivorawong
22b8da70c5
Move SKILL.md, references/, and assets/ into skills/diagram-design/
and drop `"skills": ["./"]` from .claude-plugin/plugin.json.
Current state fails to load in Claude Code with:
skills path escapes plugin directory: ./
→ Paths in plugin.json must not use ".." to reference files outside the plugin directory
Claude Code's plugin loader rejects `"./"` as a skill path because
it's ambiguous (plugin root vs. parent) and fails closed to prevent
path-escape attacks. The conventional layout is `skills/<name>/SKILL.md`
per plugin (compare obsidian-skills, claude-plugins-official).
README.md links are updated to point at the new paths so they keep
resolving on GitHub. SKILL.md's internal relative links (e.g.
`references/style-guide.md`) are unchanged — they still resolve
correctly from its new location.
Tested locally: plugin reloads cleanly with no errors and the skill
appears in /skills.
1.7 KiB
1.7 KiB
Sketchy Filter (hand-drawn variant)
Optional displacement filter that wobbles every stroke and edge slightly — turns any minimal variant into a hand-drawn "editorial" register without changing layout. Use when the diagram accompanies an essay rather than technical docs.
Grammar
<defs>
<filter id="sketchy" x="-2%" y="-2%" width="104%" height="104%">
<feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="2" seed="4"/>
<feDisplacementMap in="SourceGraphic" scale="1.5"/>
</filter>
</defs>
<!-- Apply to a group wrapping shapes — NOT text -->
<g filter="url(#sketchy)">
<!-- rects, paths, circles, lines go here -->
</g>
<!-- Text sits OUTSIDE the filtered group — legibility stays crisp -->
<text ...>Labels go here</text>
Tuning
| Parameter | Range | Effect |
|---|---|---|
baseFrequency |
0.01–0.04 | Lower = lazy wavy lines; higher = jittery. 0.02 default. |
numOctaves |
1–3 | More = more noise detail. 2 is plenty. |
scale |
1–6 | 1 barely-there, 1.5 default, 2 visible, 4+ cartoon. |
seed |
integer | Swap for a different random pattern. |
Critical rule
Filter shapes, NOT text. Displacement-mapped text becomes illegible. Structure your SVG so text is in a sibling group outside the filtered group.
When to use
- Essay / blog post / newsletter where the diagram is the hero of a narrative page.
- "Working sketch" register — showing something is mid-thought, not final architecture.
When not to use
- Technical documentation (precision matters).
- Diagrams with dense labels or tight alignments (filter reads as noise).
- Dark variants — wobble reads as artifact on dark backgrounds. Test first.