| 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>
