obsidian-plugin — Obsidian Plugin Development Skill

Keyword:

obsidian plugin

·

create obsidian plugin

·

obsidian eslint

·

obsidian submission

Build high-quality Obsidian plugins that pass community review on first attempt. Covers all 27 rules from

eslint-plugin-obsidianmd

v0.1.9, boilerplate generation, vault API patterns, accessibility requirements, and submission validation.

When to use this skill

• Generate a new Obsidian plugin project with clean boilerplate (no sample code bloat)
• Review and fix ESLint violations from

  eslint-plugin-obsidianmd

• Prepare a plugin for Obsidian community directory submission
• Apply memory-safe lifecycle patterns (

  registerEvent

  , no view reference storage)
• Implement proper type safety (no unsafe

  as TFile

  casts, no

  any

  )
• Enforce accessibility requirements (keyboard navigation, ARIA labels, focus management)
• Apply Obsidian CSS variables for theme-compatible styling
• Validate plugin metadata (manifest.json, plugin ID/name/description rules)

Instructions

Step 1: Generate a new plugin project

# Interactive boilerplate generator — validates metadata against submission rules
node scripts/create-plugin.js

# Or use npx directly from the source repo
npx github:gapmiss/obsidian-plugin-skill create-plugin

• src/main.ts

  — Plugin class with settings integration

• src/settings.ts

  — Settings interface and PluginSettingTab

• manifest.json

  — Validated plugin metadata

• styles.css

  — CSS scaffold with Obsidian variables comment

• tsconfig.json

  ,

  package.json

  ,

  esbuild.config.mjs

  — Build toolchain

• version-bump.mjs

  ,

  versions.json

  — Version management

• LICENSE

  — MIT with auto-populated year/author

Step 2: Install ESLint validation

npm install --save-dev eslint eslint-plugin-obsidianmd

// eslint.config.mjs
import pluginObsidianmd from "eslint-plugin-obsidianmd";
export default [
  pluginObsidianmd.configs.recommended,
  // For locale string checking:
  // pluginObsidianmd.configs.recommendedWithLocalesEn,
];

npx eslint src/
npx eslint src/ --fix   # auto-fix where possible

Step 3: Follow the submission validation workflow

1. Run

   bash scripts/install.sh

   to set up the development environment
2. Validate plugin ID and name against naming rules (see below)
3. Run ESLint — all 27 rules must pass
4. Complete the Code Review Checklist (see References)
5. Submit PR to obsidianmd/obsidian-releases

Plugin Naming Rules

.

?

!

)

# Validate your manifest.json
node scripts/create-plugin.js --validate-only

ESLint Rules Summary (27 rules)

Submission & Naming

no-obsidian-in-id

no-plugin-suffix-in-id

no-obsidian-in-name

no-plugin-suffix-in-name

valid-description

Memory & Lifecycle

prefer-register-event

this.registerEvent()

no-view-reference

Type Safety

no-tfile-cast

as TFile

as TFolder

instanceof

UI/UX (sentence-case rules — mostly auto-fixable)

sentence-case

no-plugin-name-in-command

no-command-in-command

no-default-hotkey

no-manual-headings

setHeading()

API Best Practices

no-global-app

this.app

app

prefer-request-url

requestUrl()

fetch()

no-console-log

console.log

prefer-abstract-input-suggest

AbstractInputSuggest

Styling

no-inline-styles

style

prefer-css-variables

scope-plugin-styles

Accessibility (MANDATORY)

require-aria-label

aria-label

require-keyboard-nav

require-focus-visible

:focus-visible

Key Code Patterns

Memory-safe event registration

// ✅ Correct — auto-cleaned on plugin unload
this.registerEvent(
  this.app.vault.on('create', (file) => this.handleCreate(file))
);

// ❌ Wrong — leaks memory
this.app.vault.on('create', (file) => this.handleCreate(file));

Type-safe file access

// ✅ Correct — instanceof narrowing
const file = this.app.workspace.getActiveFile();
if (file instanceof TFile) {
  await this.app.vault.read(file);
}

// ❌ Wrong — unsafe cast
const file = this.app.workspace.getActiveFile() as TFile;

Accessibility — ARIA on icon buttons

// ✅ Correct
const btn = containerEl.createEl('button', { cls: 'clickable-icon' });
btn.setAttribute('aria-label', 'Delete note');
setIcon(btn, 'trash');

// ❌ Wrong — no aria-label
const btn = containerEl.createEl('button', { cls: 'clickable-icon' });
setIcon(btn, 'trash');

CSS with Obsidian variables

/* ✅ Correct — theme-compatible */
.my-plugin-button {
  background-color: var(--interactive-accent);
  color: var(--text-on-accent);
  border-radius: var(--radius-m);
}

/* ❌ Wrong — hardcoded colors */
.my-plugin-button {
  background-color: #7c3aed;
  color: white;
}

Quick Reference

node scripts/create-plugin.js

npm install --save-dev eslint eslint-plugin-obsidianmd

npx eslint src/

npx eslint src/ --fix

npm run build

npm run dev

npm run version

References

• Accessibility Guide — Keyboard nav, ARIA, focus management (MANDATORY)
• Code Quality Guide — Security, platform compat, API usage
• CSS Styling Guide — Obsidian variables, scoped styles, dark/light mode
• File Operations Guide — Vault API, editor vs vault, atomic ops
• Memory Management Guide — registerEvent, lifecycle patterns
• Submission Guide — Repository structure, naming, submission process
• Type Safety Guide — instanceof narrowing, no

  any

  , const/let
• UI/UX Guide — Sentence case, commands, settings structure
• eslint-plugin-obsidianmd — Official ESLint rules
• Obsidian Plugin Developer Docs
• Source Skill Repository — MIT License