Agent skill

Obsidian Local Dev Loop

by jeremylongshore in jeremylongshore/tons-of-skills-marketplace

Set up a fast Obsidian plugin development loop with hot reload.

MITAuto-check passedTesting & QA

Install Obsidian Local Dev Loop

skills CLI
$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill obsidian-local-dev-loop -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install jeremylongshore/tons-of-skills-marketplace obsidian-local-dev-loop --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/.curated/obsidian-local-dev-loop .claude/skills/obsidian-local-dev-loop && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
obsidian-local-dev-loop
GitHub stars
2.8k
Token cost
~2.4k tokens
SKILL.md length
638 words
Files
2 (incl. references)
Skills in repo
3,342
Repo updated
First seen
Licence
MIT

At a glance

Set up a fast Obsidian plugin development loop with hot reload.

  • Works in 7 steps: Clone the official sample plugin → Create a dedicated dev vault → Symlink the plugin into the dev vault → …
  • Starting plugin development
  • SKILL.md covers Overview, Prerequisites, Instructions and Output, plus 4 more sections
  • Calls npm, npx and git; reaches github.com

What it does

Obsidian Local Dev Loop is an agent skill from jeremylongshore/tons-of-skills-marketplace. Set up a fast Obsidian plugin development loop with hot reload. Covers cloning the sample plugin, esbuild watch mode, symlinking into a vault, Ctrl+R hot reload, Chrome DevTools debugging, and testing with vitest. Use when starting plugin development or configuring a dev environment. Trigger with "obsidian dev loop", "obsidian hot reload", "obsidian development setup", "develop obsidian plugin".

Its SKILL.md is about 2.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/implementation-guide.md`). Compatibility notes: Designed for Claude Code

It sits in Testing & QA, covering Browser testing, Unit testing and Hooks and plugins. It works with Obsidian, Chrome DevTools and Vitest. The repository describes itself as: Model-agnostic agent-skills platform with a harness-free canonical layer, verified adapters, and the ccpi package manager. Explore at tonsofskills.com. The licence is MIT.

When your agent uses it

  • Starting plugin development
  • Configuring a dev environment
  • With obsidian dev loop
  • Obsidian hot reload

Example prompts

  • “obsidian dev loop”
  • “obsidian hot reload”
  • “obsidian development setup”
  • “/obsidian-local-dev-loop”

Requirements

  • Node.js
  • Compatibility (from SKILL.md): Designed for Claude Code
  • Pre-approved tools (allowed-tools): Read, Write, Edit, Bash(npm:*), Bash(pnpm:*), Bash(mkdir:*), Bash(ln:*), Bash(ls:*), Grep

Workflow steps

7 steps, taken from the step headings in SKILL.md.

  1. Clone the official sample plugin
  2. Create a dedicated dev vault
  3. Symlink the plugin into the dev vault
  4. Run esbuild in watch mode
  5. Hot-reload in Obsidian
  6. Debug with Chrome DevTools
  7. Testing with vitest

What it can do on your machine

Read from SKILL.md and the folder at commit 80f86df. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Write
    • Edit
    • Bash(npm:*)
    • Bash(pnpm:*)
    • Bash(mkdir:*)
    • Bash(ln:*)
    • Bash(ls:*)
    • Grep

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm
    • npx
    • git
    • node

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • github.com

    Also links to:

    • docs.obsidian.md
    • esbuild.github.io
    • vitest.dev

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Designed for Claude Code

    From compatibility in the SKILL.md frontmatter.

Context cost

Obsidian Local Dev Loop loads about 2.4k tokens when it runs, and up to ~3.3k if it reads all its reference files. Until then it costs about 106 tokens; SKILL.md has 638 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~106
When it runs · the whole SKILL.md, loaded when a task matches
~2.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from jeremylongshore/tons-of-skills-marketplace at commit 80f86df, republished under its MIT licence (© jeremylongshore). 638 words, ~2,441 tokens.

Download SKILL.mdSave it as .claude/skills/obsidian-local-dev-loop/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
obsidian-local-dev-loop
description
Set up a fast Obsidian plugin development loop with hot reload. Covers cloning the sample plugin, esbuild watch mode, symlinking into a vault, Ctrl+R hot reload, Chrome DevTools debugging, and testing with vitest. Use when starting plugin development or configuring a dev environment. Trigger with "obsidian dev loop", "obsidian hot reload", "obsidian development setup", "develop obsidian plugin".
allowed-tools
Read, Write, Edit, Bash(npm:*), Bash(pnpm:*), Bash(mkdir:*), Bash(ln:*), Bash(ls:*), Grep
compatibility
Designed for Claude Code
version
1.13.0
license
MIT
author
Jeremy Longshore <jeremy@intentsolutions.io>
tags
obsidian, development, hot-reload, debugging, testing

Obsidian Local Dev Loop

Overview

Establish a fast edit-build-test cycle for Obsidian plugins. Clone the official sample plugin, run esbuild in watch mode, symlink into a dev vault, hot-reload with Ctrl+R, debug with Chrome DevTools, and run tests with vitest. Aimed at sub-second feedback from save to reload.

Prerequisites

  • Node.js 18+ with npm
  • Git
  • Obsidian desktop app installed
  • A vault dedicated to development (keep it separate from your real notes)

Instructions

Step 1: Clone the official sample plugin

Start from the maintained template rather than from scratch:

bash
set -euo pipefail

git clone https://github.com/obsidianmd/obsidian-sample-plugin.git my-plugin
cd my-plugin
rm -rf .git
git init

npm install

The sample includes esbuild.config.mjs, tsconfig.json, manifest.json, and a working src/main.ts.

Step 2: Create a dedicated dev vault

Keep a vault just for testing. Pre-populate it with sample notes.

bash
set -euo pipefail

DEV_VAULT="$HOME/ObsidianDev"
mkdir -p "$DEV_VAULT/.obsidian/plugins"
mkdir -p "$DEV_VAULT/Test Notes"

cat > "$DEV_VAULT/Test Notes/Sample.md" << 'EOF'
---
tags: [test, sample]
---
# Sample Note

This note exists for plugin development testing.

## Section A

Some content with a [[link]] and a #tag.

## Section B

- Item 1
- Item 2
- Item 3
EOF

echo "Dev vault ready at $DEV_VAULT"

Open this vault in Obsidian: File > Open vault > select ~/ObsidianDev.

Instead of copying files after every build, symlink the entire project directory. The build outputs main.js at the project root, right where Obsidian expects it.

bash
set -euo pipefail

DEV_VAULT="$HOME/ObsidianDev"
PLUGIN_DIR="$(pwd)"
PLUGIN_ID=$(node -e "console.log(require('./manifest.json').id)")

# Symlink project root into vault plugins folder
ln -sfn "$PLUGIN_DIR" "$DEV_VAULT/.obsidian/plugins/$PLUGIN_ID"

# Verify
ls -la "$DEV_VAULT/.obsidian/plugins/$PLUGIN_ID/manifest.json"
echo "Symlinked $PLUGIN_ID into dev vault."

On Windows, use an admin terminal:

powershell
mklink /D "%USERPROFILE%\ObsidianDev\.obsidian\plugins\my-plugin" "%cd%"
Step 4: Run esbuild in watch mode

Watch mode rebuilds main.js on every source file change (typically <50ms).

bash
npm run dev
# esbuild watches src/ and rebuilds main.js on save
# Output: "build finished" messages in the terminal

The esbuild.config.mjs from the sample plugin already supports this. Inline source maps are enabled in dev mode for accurate stack traces.

Step 5: Hot-reload in Obsidian

After esbuild rebuilds, reload the plugin in Obsidian:

Method A -- Keyboard (fastest): Press Ctrl+R (or Cmd+R on macOS) to reload the app. This unloads all plugins and reloads them, picking up the new main.js.

Method B -- Hot Reload plugin (automatic): Install the Hot Reload community plugin. It watches for main.js changes in plugin directories and auto-reloads only the changed plugin. No manual refresh needed.

  1. In Obsidian, install "Hot Reload" from Community plugins
  2. Enable it
  3. Create a .hotreload file in your plugin directory: touch .hotreload
  4. Now every esbuild rebuild triggers an automatic plugin reload

Method C -- Command palette: Press Ctrl+P, type "Reload app without saving", Enter.

Step 6: Debug with Chrome DevTools

Obsidian is an Electron app, so full Chrome DevTools are available.

  1. Press Ctrl+Shift+I (or Cmd+Option+I on macOS) to open DevTools
  2. Console tab -- see console.log output from your plugin
  3. Sources tab -- set breakpoints in your code (source maps required)
  4. Network tab -- inspect any HTTP requests your plugin makes
  5. Elements tab -- inspect Obsidian's DOM for CSS/layout work

Tips:

  • With inline source maps enabled, your TypeScript source appears in Sources > src/main.ts
  • Use debugger; statements in code for precise breakpoints
  • console.log('[MyPlugin]', ...) prefix makes filtering easy
typescript
// Add to onload() for development:
if (process.env.NODE_ENV !== "production") {
  console.log("[MyPlugin] Dev mode active. Use Ctrl+Shift+I for DevTools.");
}
Show full SKILL.md (228 more words)Show less
Step 7: Testing with vitest

Obsidian plugins can be unit-tested by mocking the obsidian module.

bash
set -euo pipefail
npm install --save-dev vitest

Create vitest.config.ts:

typescript
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    globals: true,
    environment: "node",
  },
});

Create a mock for the obsidian module at __mocks__/obsidian.ts:

typescript
export class Plugin {
  app = {};
  loadData = vi.fn().mockResolvedValue({});
  saveData = vi.fn().mockResolvedValue(undefined);
  addCommand = vi.fn();
  addRibbonIcon = vi.fn();
  addSettingTab = vi.fn();
  addStatusBarItem = vi.fn().mockReturnValue({ setText: vi.fn() });
  registerEvent = vi.fn();
  registerInterval = vi.fn();
}

export class Notice {
  constructor(public message: string) {}
}

export class PluginSettingTab {
  containerEl = { empty: vi.fn(), createEl: vi.fn() };
  constructor(public app: any, public plugin: any) {}
  display() {}
}

export class Setting {
  constructor(el: any) {}
  setName = vi.fn().mockReturnThis();
  setDesc = vi.fn().mockReturnThis();
  addText = vi.fn().mockReturnThis();
  addToggle = vi.fn().mockReturnThis();
}

export class Modal {
  app: any;
  contentEl = { createEl: vi.fn(), empty: vi.fn() };
  constructor(app: any) { this.app = app; }
  open = vi.fn();
  close = vi.fn();
  onOpen() {}
  onClose() {}
}

Write a test:

typescript
// src/__tests__/main.test.ts
import { describe, it, expect, vi } from "vitest";

vi.mock("obsidian");

describe("Plugin settings", () => {
  it("merges defaults with saved data", async () => {
    const { Plugin } = await import("obsidian");
    const { default: MyPlugin } = await import("../main");

    const plugin = new MyPlugin() as any;
    plugin.loadData = vi.fn().mockResolvedValue({ greeting: "Custom" });
    plugin.saveData = vi.fn();

    await plugin.loadSettings();

    expect(plugin.settings.greeting).toBe("Custom");
    expect(plugin.settings.showRibbon).toBe(true); // default preserved
  });
});

Run tests:

bash
npx vitest run           # single run
npx vitest --watch       # watch mode alongside npm run dev

Add to package.json:

json
{
  "scripts": {
    "dev": "node esbuild.config.mjs",
    "build": "node esbuild.config.mjs production",
    "test": "vitest run",
    "test:watch": "vitest --watch"
  }
}

Output

After completing all steps:

  • Dev vault at ~/ObsidianDev with test notes
  • Plugin symlinked into vault (no manual copying)
  • npm run dev for sub-second rebuilds on save
  • Hot Reload plugin for automatic Obsidian reload (or Ctrl+R manual)
  • Chrome DevTools available via Ctrl+Shift+I with source maps
  • vitest configured with obsidian mocks for unit testing
  • Two-terminal workflow: terminal 1 runs npm run dev, terminal 2 runs npx vitest --watch

Error Handling

ErrorCauseFix
Symlink not workingPermission denied (Windows)Run terminal as Administrator
Plugin not in listSymlink target wrongVerify ls -la shows correct target
Hot Reload not triggeringMissing .hotreload filetouch .hotreload in plugin dir
Source maps not showingsourcemap: false in configSet sourcemap: "inline" for dev
Build not watchingUsed build instead of devRun npm run dev (watch mode)
Tests fail with import errorsMissing vitest mockCreate __mocks__/obsidian.ts
DevTools won't openKeyboard shortcut conflictUse menu: View > Toggle Developer Tools

Examples

Quick dev startup script (dev.sh):

bash
#!/usr/bin/env bash
set -euo pipefail

# Terminal 1: esbuild watch
npm run dev &
ESBUILD_PID=$!

# Terminal 2: vitest watch
npx vitest --watch &
VITEST_PID=$!

echo "Dev servers running. Ctrl+C to stop."
trap "kill $ESBUILD_PID $VITEST_PID" EXIT
wait

VSCode task for integrated dev:

json
{
  "version": "2.0.0",
  "tasks": [{
    "label": "Obsidian Dev",
    "type": "npm",
    "script": "dev",
    "isBackground": true,
    "problemMatcher": {
      "pattern": { "regexp": "^x]$" },
      "background": {
        "activeOnStart": true,
        "beginsPattern": ".",
        "endsPattern": "build finished"
      }
    }
  }]
}

Resources

Next Steps

  • Build UI features: see obsidian-core-workflow-b
  • Apply production patterns: see obsidian-sdk-patterns

© jeremylongshore, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (references) in skills/.curated/obsidian-local-dev-loop of jeremylongshore/tons-of-skills-marketplace.

  • SKILL.md
  • references/implementation-guide.md

Open the folder on GitHubat commit 80f86df

Compare with similar skills

Obsidian Local Dev Loop next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Obsidian Local Dev Loop compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Obsidian Local Dev Loop this skilljeremylongshore/tons-of-skills-marketplace2.8k—~2.4kAutomated safety check: PassMIT
Ckeditor5 TestingTriliumNext/Trilium38k—~3.3kAutomated safety check: PassAGPL-3.0
Chrome Devtools MCPmanagedcode/dotnet-skills486—~2.2kAutomated safety check: PassMIT
Control UI E2Eopenclaw/openclaw392k—~2.9kAutomated safety check: PassMIT
Check Visual Changesigrlk/storybook-addon-test-codegen1541 repos~1.4kAutomated safety check: PassMIT
Svelte Testingspences10/sveltest113—~579Automated safety check: PassMIT

Similar skills

  • Ckeditor5 Testing

    TriliumNext/Trilium

    Testing CKEditor 5 plugins in the Trilium monorepo. An agent skill from TriliumNext/Trilium.

    38k GitHub stars~3.3k tokensUpdated today
    Testing & QAAuto-check passed
  • Chrome Devtools MCP

    managedcode/dotnet-skills

    Use Chrome DevTools MCP from .NET agents and .NET-focused repos to inspect, debug, and automate Chrome through an MCP client.

    486 GitHub stars~2.2k tokensUpdated today
    DevelopmentAuto-check passed
  • Control UI E2E

    openclaw/openclaw

    A skill your agent uses when designing, testing, fixing, or extending the OpenClaw Control UI GUI, including UI stress-test galleries with feedback inputs, Vitest + Playwright end-to-end checks…

    392k GitHub stars~2.9k tokensUpdated today
    Testing & QAAuto-check passed
  • Check Visual Changes

    igrlk/storybook-addon-test-codegen

    Check the visual impact of an edit mid-task with uiverify check — render just the components you're touching on the UI Verify fleet and diff them against the real CI baseline, without opening a PR…

    154 GitHub starsUsed in 1 repo~1.4k tokens
    Testing & QAAuto-check passed
  • Svelte Testing

    spences10/sveltest

    Fix and create Svelte 5 tests with vitest-browser-svelte and Playwright.

    113 GitHub stars~579 tokensUpdated today
    Testing & QAAuto-check passed
  • Playwright Testing

    chongdashu/vibejam-starter-pack

    Plan, implement, and debug frontend tests: unit/integration/E2E/visual/a11y.

    149 GitHub stars~2.1k tokensUpdated 5 mo ago
    Testing & QAAuto-check passed

More from jeremylongshore/tons-of-skills-marketplace

All 3,342 skills in this repo
  • Performing Security Code Review

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to conduct a security-focused code review using the security-agent plugin.

    2.8k GitHub starsUsed in 2 repos~1.3k tokens
    Auto-check: notes
  • Adapting Transfer Learning Models

    jeremylongshore/tons-of-skills-marketplace

    Build this skill automates the adaptation of pre-trained machine learning models using transfer learning techniques.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Agent Context Loader

    jeremylongshore/tons-of-skills-marketplace

    Execute proactive auto-loading: automatically detects and loads agents.md files.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Aggregating Performance Metrics

    jeremylongshore/tons-of-skills-marketplace

    Aggregate and centralize performance metrics from applications, systems, databases, caches, and services.

    2.8k GitHub stars~1.2k tokensUpdated today
    Auto-check passed
  • Analyzing Capacity Planning

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to analyze capacity requirements and plan for future growth.

    2.8k GitHub stars~947 tokensUpdated today
    Auto-check passed
  • Analyzing Database Indexes

    jeremylongshore/tons-of-skills-marketplace

    Process use when you need to work with database indexing. An agent skill from jeremylongshore/tons-of-skills-marketplace.

    2.8k GitHub stars~2k tokensUpdated today
    Auto-check passed

Categories

Questions about Obsidian Local Dev Loop

What does Obsidian Local Dev Loop do?

Set up a fast Obsidian plugin development loop with hot reload. Obsidian Local Dev Loop is an agent skill from jeremylongshore/tons-of-skills-marketplace. Set up a fast Obsidian plugin development loop with hot reload.

When should I use Obsidian Local Dev Loop?

Obsidian Local Dev Loop fits situations like: starting plugin development; configuring a dev environment; with obsidian dev loop; obsidian hot reload.

How do I install Obsidian Local Dev Loop in Claude Code?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill obsidian-local-dev-loop -a claude-code`. Or copy the skill folder (skills/.curated/obsidian-local-dev-loop in jeremylongshore/tons-of-skills-marketplace) into .claude/skills/obsidian-local-dev-loop in your project. Claude Code loads it when a task matches its description.

How do I install Obsidian Local Dev Loop in Codex?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill obsidian-local-dev-loop -a codex`. Or copy the skill folder (skills/.curated/obsidian-local-dev-loop in jeremylongshore/tons-of-skills-marketplace) into .agents/skills/obsidian-local-dev-loop in your project. Codex loads it when a task matches its description.

Can I use Obsidian Local Dev Loop in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill obsidian-local-dev-loop -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/obsidian-local-dev-loop, .gemini/skills/obsidian-local-dev-loop, .github/skills/obsidian-local-dev-loop and .opencode/skills/obsidian-local-dev-loop in your project.

What does Obsidian Local Dev Loop need to run?

Going by SKILL.md and its folder, Obsidian Local Dev Loop needs the command-line tools its instructions call (npm, npx, git and node). Our summary lists: Node.js. Its frontmatter pre-approves these tools: Read, Write, Edit, Bash(npm:*), Bash(pnpm:*), Bash(mkdir:*), Bash(ln:*), Bash(ls:*), Grep. Compatibility (from SKILL.md): Designed for Claude Code.

Does Obsidian Local Dev Loop access the network?

SKILL.md names 4 domains. In commands or code: github.com; the agent is likely to contact it when it follows the instructions. As links in the text: docs.obsidian.md, esbuild.github.io and vitest.dev. This is read from the text; nothing was executed.

Is Obsidian Local Dev Loop safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Obsidian Local Dev Loop use?

Obsidian Local Dev Loop is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Obsidian Local Dev Loop use?

About 2.4k tokens (SKILL.md is roughly 9.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 876 tokens, read only when the agent opens those files.

What are the alternatives to Obsidian Local Dev Loop?

Skills that share tags, products or a category with Obsidian Local Dev Loop: Ckeditor5 Testing (TriliumNext/Trilium, 38k stars), Chrome Devtools MCP (managedcode/dotnet-skills, 486 stars), Control UI E2E (openclaw/openclaw, 392k stars) and Check Visual Changes (igrlk/storybook-addon-test-codegen, 154 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Obsidian Local Dev Loop?

jeremylongshore (a GitHub user) maintains it in jeremylongshore/tons-of-skills-marketplace, which has 2,825 GitHub stars. The repository holds 3,342 skills in this directory. The repository was last updated on October 9, 2026.

Source: jeremylongshore/tons-of-skills-marketplace on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.