obsidian-plugin

name	obsidian-plugin
description	Guide Obsidian plugin development following official guidelines. Use when creating/modifying Obsidian plugins, implementing commands, creating UI elements, or handling file operations.

Develop Obsidian plugins following official best practices for security, API usage, and UI consistency. Use `this.app` - Never use global `app` object (debugging only) Build DOM safely - See `security.md` for mandatory patterns Use managed cleanup - `registerEvent()`, `addCommand()` for auto-cleanup NEVER detach leaves in `onunload()` - Obsidian handles this automatically No `innerHTML`, `outerHTML`, or `insertAdjacentHTML` usage Minimize logging - Errors shown by default, not debug messages Replace placeholders - Change `MyPlugin`, `SampleSettingTab` to actual names All events registered via `registerEvent()` User file paths normalized with `normalizePath()` CSS uses Obsidian variables, not hardcoded colors Settings have general options at top (no heading) ``` my-plugin/ ├── main.ts # Plugin entry point ├── settings.ts # Settings tab and defaults ├── commands/ # Command handlers ├── views/ # Custom views ├── modals/ # Modal dialogs └── styles.css # Plugin styles (use CSS variables) ``` ```typescript // GOOD: Auto-cleanup on plugin unload this.registerEvent( this.app.vault.on('create', (file) => { ... }) );

this.addCommand({ id: 'my-command', name: 'My Command', callback: () => { ... } });

// BAD: Manual cleanup required (avoid) this.app.vault.on('create', this.handler);

  </pattern>
</patterns>

<constraints>
  <must>
    <rule>Apply this skill when creating new Obsidian plugins</rule>
    <rule>Apply when adding commands, settings, or views</rule>
    <rule>Apply when handling file/folder operations</rule>
    <rule>Apply when building plugin UI components</rule>
    <rule>Apply when reviewing Obsidian plugin code</rule>
  </must>
  <avoid>
    <rule>Using `innerHTML`, `outerHTML`, or `insertAdjacentHTML`</rule>
    <rule>Manual event listener cleanup instead of `registerEvent()`</rule>
    <rule>Hardcoded colors instead of CSS variables</rule>
    <rule>Using global `app` object in production code</rule>
  </avoid>
</constraints>

<best_practices>
  <practice priority="critical">See `security.md` for DOM manipulation rules</practice>
  <practice priority="high">See `api-patterns.md` for workspace, vault, and editor patterns</practice>
  <practice priority="high">See `ui-components.md` for settings, modals, and views</practice>
</best_practices>

<patterns>
  <pattern name="terminology">
| Use | Avoid |
|-----|-------|
| keyboard shortcut | hotkey |
| note | file (for .md) |
| folder | directory |
| select | click/tap |
| perform | invoke |

Use sentence case for headings. Bold button text in docs.
  </pattern>
</patterns>

<related_skills>
  <skill name="security.md">DOM manipulation rules (CRITICAL)</skill>
  <skill name="api-patterns.md">Workspace, vault, and editor patterns</skill>
  <skill name="ui-components.md">Settings, modals, and views</skill>
</related_skills>