Agent skill
obsidian-hello-world
Create a minimal working Obsidian plugin with commands and settings. Use when building your first plugin feature, testing your setup, or learning basic Obsidian plugin patterns. Trigger with phrases like "obsidian hello world", "first obsidian plugin", "obsidian quick start", "simple obsidian plugin".
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/obsidian-hello-world
SKILL.md
Obsidian Hello World
Overview
Build a minimal working Obsidian plugin demonstrating core features: commands, settings, and ribbon icons.
Prerequisites
- Completed
obsidian-install-authsetup - Development vault configured
- Build pipeline working
Instructions
Step 1: Create Main Plugin Class
// src/main.ts
import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian';
interface MyPluginSettings {
greeting: string;
}
const DEFAULT_SETTINGS: MyPluginSettings = {
greeting: 'Hello, Obsidian!'
}
export default class MyPlugin extends Plugin {
settings: MyPluginSettings;
async onload() {
await this.loadSettings();
// Add ribbon icon
this.addRibbonIcon('dice', 'Greet Me', (evt: MouseEvent) => {
new Notice(this.settings.greeting);
});
// Add command to command palette
this.addCommand({
id: 'show-greeting',
name: 'Show Greeting',
callback: () => {
new Notice(this.settings.greeting);
}
});
// Add command with editor context
this.addCommand({
id: 'insert-greeting',
name: 'Insert Greeting at Cursor',
editorCallback: (editor: Editor, view: MarkdownView) => {
editor.replaceSelection(this.settings.greeting);
}
});
// Add settings tab
this.addSettingTab(new MySettingTab(this.app, this));
}
onunload() {
console.log('Goodbye from My Plugin!');
}
async loadSettings() {
this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
}
async saveSettings() {
await this.saveData(this.settings);
}
}
Step 2: Create Settings Tab
// Add to src/main.ts
class MySettingTab extends PluginSettingTab {
plugin: MyPlugin;
constructor(app: App, plugin: MyPlugin) {
super(app, plugin);
this.plugin = plugin;
}
display(): void {
const { containerEl } = this;
containerEl.empty();
containerEl.createEl('h2', { text: 'My Plugin Settings' });
new Setting(containerEl)
.setName('Greeting')
.setDesc('The message to display when greeting')
.addText(text => text
.setPlaceholder('Enter your greeting')
.setValue(this.plugin.settings.greeting)
.onChange(async (value) => {
this.plugin.settings.greeting = value;
await this.plugin.saveSettings();
}));
}
}
Step 3: Create a Modal
// Add to src/main.ts
class GreetingModal extends Modal {
greeting: string;
constructor(app: App, greeting: string) {
super(app);
this.greeting = greeting;
}
onOpen() {
const { contentEl } = this;
contentEl.createEl('h1', { text: this.greeting });
contentEl.createEl('p', { text: 'Click outside or press Escape to close.' });
}
onClose() {
const { contentEl } = this;
contentEl.empty();
}
}
// Add to onload():
this.addCommand({
id: 'show-greeting-modal',
name: 'Show Greeting Modal',
callback: () => {
new GreetingModal(this.app, this.settings.greeting).open();
}
});
Step 4: Build and Test
# Build the plugin
npm run build
# In Obsidian:
# 1. Open Settings > Community plugins
# 2. Enable "My Plugin"
# 3. Click the dice icon in ribbon
# 4. Open command palette (Ctrl/Cmd+P) and search "Show Greeting"
Output
- Working plugin with:
- Ribbon icon that shows a notice
- Commands in command palette
- Editor command to insert text
- Settings tab to configure greeting
- Modal for displaying content
Error Handling
| Error | Cause | Solution |
|---|---|---|
| Plugin not loading | Build errors | Check console for TypeScript errors |
| Settings not saving | Missing loadData/saveData | Verify async/await usage |
| Command not showing | Plugin not enabled | Enable in Community Plugins |
| Ribbon icon missing | Wrong icon name | Use valid Lucide icon name |
Examples
Available Icon Names
Obsidian uses Lucide icons. Common examples:
file-text,folder,search,settingsstar,heart,bookmark,tagedit,trash,copy,clipboardlink,external-link,globedice,bot,sparkles,wand
Status Bar Item
// Add to onload():
const statusBarItem = this.addStatusBarItem();
statusBarItem.setText('Plugin Active');
Register Event Listeners
// Listen to file open
this.registerEvent(
this.app.workspace.on('file-open', (file) => {
if (file) {
console.log('Opened:', file.path);
}
})
);
Resources
Next Steps
Proceed to obsidian-local-dev-loop for hot-reload development workflow.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?