obsidian-core-workflow-a

Create an Obsidian plugin from scratch with full project scaffolding. Covers Plugin class, ribbon icons, commands, settings tab, esbuild config, manifest.json, and building/testing. Use when starting a new plugin, scaffolding a project, or learning the plugin lifecycle. Trigger with "create obsidian plugin", "scaffold obsidian plugin", "new obsidian plugin", "obsidian plugin from scratch".

インストールへ移動

リポジトリ: jeremylongshore/tons-of-skills-marketplace
ソースの最終更新活動: 2026年8月19日 12:13
検出された SKILL.md の言語: 英語
スター: 2,677
フォーク: 392

インストール方法

デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。

npx skills add https://github.com/jeremylongshore/tons-of-skills-marketplace --skill obsidian-core-workflow-a

コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。

ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。

ソースファイルを確認

インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。

ファイルエクスプローラー

2 ファイル

SKILL.md

ソースの指示 · 読み取り専用プレビュー

検索に戻るインストールに戻る

Obsidian Core Workflow A: Create a Plugin from Scratch

Overview

Build a complete Obsidian plugin from an empty directory. By the end you will have a working plugin with a ribbon icon, command palette entries, a settings tab, and a production esbuild build. Every file is shown in full -- no stubs.

Prerequisites

Node.js 18+ installed

Obsidian desktop app installed

A vault to test in (create a fresh vault at ~/ObsidianDev if needed)

Instructions

Step 1: Scaffold the project

set -euo pipefail PLUGIN_NAME="my-obsidian-plugin" mkdir -p "$PLUGIN_NAME/src" cd "$PLUGIN_NAME" # Initialize Node project npm init -y # Install Obsidian types and build tool npm install --save-dev obsidian@latest typescript@latest esbuild@latest \ @types/node@latest tslib@latest # TypeScript config cat > tsconfig.json << 'TSEOF' { "compilerOptions": { "baseUrl": ".", "inlineSourceMap": true, "inlineSources": true, "module": "ESNext", "target": "ES2018", "allowJs": true, "noImplicitAny": true, "moduleResolution": "node", "importHelpers": true, "isolatedModules": true, "strictNullChecks": true, "lib": ["DOM", , ] }, : [] } TSEOF

name	obsidian-core-workflow-a
description	Create an Obsidian plugin from scratch with full project scaffolding. Covers Plugin class, ribbon icons, commands, settings tab, esbuild config, manifest.json, and building/testing. Use when starting a new plugin, scaffolding a project, or learning the plugin lifecycle. Trigger with "create obsidian plugin", "scaffold obsidian plugin", "new obsidian plugin", "obsidian plugin from scratch".
allowed-tools	Read, Write, Edit, Bash(npm:), Bash(mkdir:), Bash(ln:*), Glob
version	1.13.0
license	MIT
author	Jeremy Longshore <jeremy@intentsolutions.io>
tags	["obsidian","plugin-development","typescript","scaffolding"]
compatibility	Designed for Claude Code

Obsidian Core Workflow A: Create a Plugin from Scratch

Overview

Prerequisites

Node.js 18+ installed
Obsidian desktop app installed
A vault to test in (create a fresh vault at ~/ObsidianDev if needed)

Instructions

Step 1: Scaffold the project

set -euo pipefail

PLUGIN_NAME="my-obsidian-plugin"
mkdir -p "$PLUGIN_NAME/src"
cd "$PLUGIN_NAME"

# Initialize Node project
npm init -y

# Install Obsidian types and build tool
npm install --save-dev obsidian@latest typescript@latest esbuild@latest \
  @types/node@latest tslib@latest

# TypeScript config
cat > tsconfig.json << 'TSEOF'
{
  "compilerOptions": {
    "baseUrl": ".",
    "inlineSourceMap": true,
    "inlineSources": true,
    "module": "ESNext",
    "target": "ES2018",
    "allowJs": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "isolatedModules": true,
    "strictNullChecks": true,
    "lib": ["DOM", , ]
  },
  : []
}
TSEOF

// src/main.ts import { App, Editor, MarkdownView, Notice, Plugin, PluginSettingTab, Setting, } from "obsidian"; // ── Settings ──────────────────────────────────────────────────────── interface MyPluginSettings { greeting: string; showRibbon: boolean; } const DEFAULT_SETTINGS: MyPluginSettings = { greeting: "Hello from My Plugin!", showRibbon: true, }; // ── Plugin ────────────────────────────────────────────────────────── export default class MyPlugin extends Plugin { settings: MyPluginSettings; async onload() { await this.loadSettings(); // Ribbon icon -- shows a Notice when clicked if (this.settings.showRibbon) { this.addRibbonIcon("sparkles", "My Plugin: Greet", () => { new Notice(this.settings.greeting); }); } // Command: show greeting as Notice this.addCommand({ id: "show-greeting", name: "Show greeting", callback: () => { new Notice(this.settings.greeting); }, }); // Command: insert greeting at cursor (only available in editor) this.addCommand({ id: "insert-greeting", name: "Insert greeting at cursor", editorCallback: (editor: Editor, view: MarkdownView) => { editor.replaceSelection(this.settings.greeting); }, }); // Command: count words in current note this.addCommand({ id: "count-words", name: "Count words in current note", editorCallback: (editor: Editor) => { const text = editor.getValue(); const count = text.split(/\s+/).filter(Boolean).length; new Notice(`Word count: ${count}`); }, }); // Status bar item const statusEl = this.addStatusBarItem(); statusEl.setText("Plugin loaded"); // Settings tab this.addSettingTab(new MyPluginSettingTab(this.app, this)); console.log("MyPlugin loaded"); } onunload() { console.log("MyPlugin unloaded"); } async loadSettings() { this.settings = Object.assign( {}, DEFAULT_SETTINGS, await this.loadData() ); } async saveSettings() { await this.saveData(this.settings); } } // ── Settings Tab ──────────────────────────────────────────────────── class MyPluginSettingTab extends PluginSettingTab { plugin: MyPlugin; constructor(app: App, plugin: MyPlugin) { super(app, plugin); this.plugin = plugin; } display(): void { const { containerEl } = this; containerEl.empty(); new Setting(containerEl) .setName("Greeting message") .setDesc("Text shown by the greet command and ribbon icon.") .addText((text) => text .setPlaceholder("Hello from My Plugin!") .setValue(this.plugin.settings.greeting) .onChange(async (value) => { this.plugin.settings.greeting = value; await this.plugin.saveSettings(); }) ); new Setting(containerEl) .setName("Show ribbon icon") .setDesc("Toggle the sparkles icon in the left ribbon.") .addToggle((toggle) => toggle .setValue(this.plugin.settings.showRibbon) .onChange(async (value) => { this.plugin.settings.showRibbon = value; await this.plugin.saveSettings(); new Notice("Reload plugin to apply ribbon change."); }) ); } }

Error	Cause	Fix
`Cannot find module 'obsidian'`	Missing dev dependency	`npm install --save-dev obsidian`
Plugin not in list	`manifest.json` missing or invalid	Verify `id` field matches folder name
Ribbon icon missing	Invalid icon name	Use a Lucide icon name (sparkles, file-text, search, etc.)
Settings not persisting	Forgot `await this.saveData()`	Always await `saveData` in onChange
`editorCallback` command greyed out	No active editor	Open a markdown note first
Build fails with external error	Forgot to externalize obsidian	Check `external` array in esbuild config

obsidian-core-workflow-a

インストール方法

ソースファイルを確認

Obsidian Core Workflow A: Create a Plugin from Scratch

Overview

Prerequisites

Instructions

Step 1: Scaffold the project

Obsidian Core Workflow A: Create a Plugin from Scratch

Overview

Prerequisites

Instructions

Step 1: Scaffold the project

Step 2: Create manifest.json

Step 3: Write the esbuild config

Step 4: Write main.ts -- the full plugin

Step 5: Add npm scripts and build

Step 6: Install into your vault and test

Output

Error Handling

Examples

Resources

Next Steps

obsidian-core-workflow-a

ソース情報

インストール方法

ソースファイルを確認

このリポジトリの他の Skills

このリポジトリの他の Skills

Obsidian Core Workflow A: Create a Plugin from Scratch

Overview

Prerequisites

Instructions

Step 1: Scaffold the project

Obsidian Core Workflow A: Create a Plugin from Scratch

Overview

Prerequisites

Instructions

Step 1: Scaffold the project

Step 2: Create manifest.json

Step 3: Write the esbuild config

Step 4: Write main.ts -- the full plugin

Step 5: Add npm scripts and build

Step 6: Install into your vault and test

Output

Error Handling

Examples

Resources

Next Steps