fix: restructure plugin so Claude Code loads it without errors

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.
This commit is contained in:
Jirayu Sirivorawong
2026-04-20 15:51:16 +07:00
parent 66d0d6ab76
commit 22b8da70c5
63 changed files with 7 additions and 8 deletions
+1 -2
View File
@@ -12,6 +12,5 @@
"flowchart",
"visualization",
"editorial"
],
"skills": ["./"]
]
}
+6 -6
View File
@@ -40,7 +40,7 @@ All 13 diagrams ship in three variants: minimal light, minimal dark, and full-ed
</tr>
</table>
**Browse the live gallery:** open [`assets/index.html`](assets/index.html) in your browser to flip through all 13 types with light / dark / full-editorial tabs.
**Browse the live gallery:** open [`skills/diagram-design/assets/index.html`](skills/diagram-design/assets/index.html) in your browser to flip through all 13 types with light / dark / full-editorial tabs.
---
@@ -111,7 +111,7 @@ Before writing tokens, the skill verifies WCAG AA contrast on `ink` over `paper`
### Manual override
Prefer to set tokens by hand? Open [`references/style-guide.md`](references/style-guide.md) and edit the table. Everything downstream reads from there — the 13 types, the annotation primitive, and the gallery all inherit semantic role names (`accent`, not `#b5523a`).
Prefer to set tokens by hand? Open [`skills/diagram-design/references/style-guide.md`](skills/diagram-design/references/style-guide.md) and edit the table. Everything downstream reads from there — the 13 types, the annotation primitive, and the gallery all inherit semantic role names (`accent`, not `#b5523a`).
### First-run gate
@@ -119,7 +119,7 @@ The skill won't silently ship default-skinned diagrams into a branded project. O
> *"This is your first diagram in this project. The style guide is still at the default. Want to run onboarding, paste tokens manually, or proceed with default?"*
See [`references/onboarding.md`](references/onboarding.md) for the full spec.
See [`skills/diagram-design/references/onboarding.md`](skills/diagram-design/references/onboarding.md) for the full spec.
---
@@ -197,14 +197,14 @@ No matter how many types exist, Claude only reads the one you need. Add a new ty
## The design system (in one paragraph)
One accent color, 1–2 focal elements per diagram. Three font families: Instrument Serif (title + italic callouts), Geist sans (node names), Geist Mono (technical sublabels). 1px hairline borders, no shadows, max border-radius 10px. Every coord, width, and gap divisible by 4 — non-negotiable, it's what keeps the diagrams from feeling AI-generated. Mono is for technical content (ports, URLs, field types), not a blanket "dev" aesthetic. Coral-tinted focal nodes draw the eye to the 1–2 things that matter. Full spec in [`SKILL.md`](SKILL.md#5-design-system).
One accent color, 1–2 focal elements per diagram. Three font families: Instrument Serif (title + italic callouts), Geist sans (node names), Geist Mono (technical sublabels). 1px hairline borders, no shadows, max border-radius 10px. Every coord, width, and gap divisible by 4 — non-negotiable, it's what keeps the diagrams from feeling AI-generated. Mono is for technical content (ports, URLs, field types), not a blanket "dev" aesthetic. Coral-tinted focal nodes draw the eye to the 1–2 things that matter. Full spec in [`SKILL.md`](skills/diagram-design/SKILL.md#5-design-system).
---
## Primitives
- **Annotation callout** — italic Instrument Serif + dashed Bézier leader, for editorial asides that sit in the margins. See [`references/primitive-annotation.md`](references/primitive-annotation.md).
- **Sketchy filter** — SVG turbulence + displacement map for a hand-drawn variant. Good for essays, not for technical docs. See [`references/primitive-sketchy.md`](references/primitive-sketchy.md).
- **Annotation callout** — italic Instrument Serif + dashed Bézier leader, for editorial asides that sit in the margins. See [`skills/diagram-design/references/primitive-annotation.md`](skills/diagram-design/references/primitive-annotation.md).
- **Sketchy filter** — SVG turbulence + displacement map for a hand-drawn variant. Good for essays, not for technical docs. See [`skills/diagram-design/references/primitive-sketchy.md`](skills/diagram-design/references/primitive-sketchy.md).
---