feat: Create Skill button with template scaffolding

- New "Create" button in sidebar below Marketplace
- Modal with name input + target dropdown (agent + type)
- Creates SKILL.md in directory for skills, flat .md for commands
- Auto-refreshes store and selects the new skill after creation
- Slugifies name for filesystem, validates for duplicates

Closes #17

Author: Railly

main.js

@@ -0,0 +1,159 @@
+import { Modal, Notice, Setting, type App } from "obsidian";
+import { existsSync, mkdirSync, writeFileSync } from "fs";
+import { join } from "path";
+import { TOOL_CONFIGS } from "../tool-configs";
+import type { SkillType } from "../types";
+
+interface CreateTarget {
+	toolId: string;
+	toolName: string;
+	baseDir: string;
+	type: SkillType;
+	pattern: string;
+}
+
+function getCreateTargets(): CreateTarget[] {
+	const targets: CreateTarget[] = [];
+	for (const tool of TOOL_CONFIGS) {
+		if (!tool.isInstalled()) continue;
+		for (const sp of [...tool.paths, ...tool.agentPaths]) {
+			if (sp.type === "rule" || sp.type === "memory") continue;
+			targets.push({
+				toolId: tool.id,
+				toolName: tool.name,
+				baseDir: sp.baseDir,
+				type: sp.type,
+				pattern: sp.pattern,
+			});
+		}
+	}
+	return targets;
+}
+
+function buildTargetLabel(t: CreateTarget): string {
+	return `${t.toolName} → ${t.type}`;
+}
+
+export class CreateSkillModal extends Modal {
+	private onCreated: (filePath: string) => void;
+	private name = "";
+	private selectedTarget: CreateTarget | null = null;
+	private targets: CreateTarget[];
+
+	constructor(app: App, onCreated: (filePath: string) => void) {
+		super(app);
+		this.onCreated = onCreated;
+		this.targets = getCreateTargets();
+		if (this.targets.length > 0) {
+			this.selectedTarget = this.targets[0];
+		}
+	}
+
+	onOpen(): void {
+		const { contentEl } = this;
+		contentEl.addClass("as-create-modal");
+
+		contentEl.createEl("h3", { text: "Create Skill" });
+
+		new Setting(contentEl)
+			.setName("Name")
+			.setDesc("Skill name (used for directory and display)")
+			.addText((text) =>
+				text
+					.setPlaceholder("my-awesome-skill")
+					.onChange((value) => {
+						this.name = value.trim();
+					})
+			);
+
+		if (this.targets.length > 0) {
+			const options: Record<string, string> = {};
+			for (let i = 0; i < this.targets.length; i++) {
+				options[String(i)] = buildTargetLabel(this.targets[i]);
+			}
+
+			new Setting(contentEl)
+				.setName("Target")
+				.setDesc("Where to create the skill")
+				.addDropdown((drop) =>
+					drop
+						.addOptions(options)
+						.setValue("0")
+						.onChange((value) => {
+							this.selectedTarget = this.targets[parseInt(value)];
+						})
+				);
+		}
+
+		const btnContainer = contentEl.createDiv("as-create-buttons");
+		const cancelBtn = btnContainer.createEl("button", { text: "Cancel" });
+		cancelBtn.addEventListener("click", () => this.close());
+
+		const createBtn = btnContainer.createEl("button", {
+			text: "Create",
+			cls: "mod-cta",
+		});
+		createBtn.addEventListener("click", () => this.create());
+	}
+
+	private create(): void {
+		if (!this.name) {
+			new Notice("Please enter a skill name");
+			return;
+		}
+		if (!this.selectedTarget) {
+			new Notice("No target available");
+			return;
+		}
+
+		const slug = this.name.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
+		const t = this.selectedTarget;
+		let filePath: string;
+
+		if (t.pattern === "directory-with-skillmd") {
+			const dir = join(t.baseDir, slug);
+			if (existsSync(dir)) {
+				new Notice(`Directory already exists: ${slug}`);
+				return;
+			}
+			mkdirSync(dir, { recursive: true });
+			filePath = join(dir, "SKILL.md");
+			writeFileSync(filePath, [
+				"---",
+				`name: ${this.name}`,
+				'description: ""',
+				"---",
+				"",
+				`# ${this.name}`,
+				"",
+				"## Instructions",
+				"",
+				"",
+			].join("\n"), "utf-8");
+		} else {
+			if (!existsSync(t.baseDir)) {
+				mkdirSync(t.baseDir, { recursive: true });
+			}
+			filePath = join(t.baseDir, `${slug}.md`);
+			if (existsSync(filePath)) {
+				new Notice(`File already exists: ${slug}.md`);
+				return;
+			}
+			writeFileSync(filePath, [
+				"---",
+				`description: ""`,
+				"---",
+				"",
+				"",
+			].join("\n"), "utf-8");
+		}
+
+		new Notice(`Created ${this.name}`);
+		this.close();
+		this.onCreated(filePath);
+	}
+
+	onClose(): void {
+		this.contentEl.empty();
+	}
+}

src/views/create-skill-modal.ts

@@ -6,6 +6,7 @@ import { ListPanel } from "./list";
 import { DetailPanel } from "./detail";
 import { DashboardPanel } from "./dashboard";
 import { MarketplacePanel } from "./marketplace-view";
+import { CreateSkillModal } from "./create-skill-modal";
 
 export const VIEW_TYPE = "agentfiles-view";
 
@@ -74,7 +75,8 @@ export class AgentfilesView extends ItemView {
 			this.sidebarEl,
 			this.store,
 			() => this.toggleDashboard(),
-			() => this.toggleMarketplace()
+			() => this.toggleMarketplace(),
+			() => this.openCreateModal()
 		);
 		this.listPanel = new ListPanel(this.listEl, this.store, (item: SkillItem) =>
 			this.onSelectItem(item)
@@ -158,6 +160,16 @@ export class AgentfilesView extends ItemView {
 		}
 	}
 
+	private openCreateModal(): void {
+		new CreateSkillModal(this.app, (filePath: string) => {
+			this.store.refresh(this.settings);
+			setTimeout(() => {
+				const created = this.store.allItems.find((i) => i.filePath === filePath || i.realPath === filePath);
+				if (created) this.onSelectItem(created);
+			}, 100);
+		}).open();
+	}
+
 	private onSelectItem(item: SkillItem): void {
 		if (this.isDashboard) this.toggleDashboard();
 		if (this.isMarketplace) this.toggleMarketplace();

src/views/main-view.ts

@@ -10,14 +10,16 @@ export class SidebarPanel {
 	private store: SkillStore;
 	private onToggleDashboard: () => void;
 	private onToggleMarketplace: () => void;
+	private onCreateSkill: () => void;
 	private dashboardActive = false;
 	private marketplaceActive = false;
 
-	constructor(containerEl: HTMLElement, store: SkillStore, onToggleDashboard: () => void, onToggleMarketplace: () => void) {
+	constructor(containerEl: HTMLElement, store: SkillStore, onToggleDashboard: () => void, onToggleMarketplace: () => void, onCreateSkill: () => void) {
 		this.containerEl = containerEl;
 		this.store = store;
 		this.onToggleDashboard = onToggleDashboard;
 		this.onToggleMarketplace = onToggleMarketplace;
+		this.onCreateSkill = onCreateSkill;
 	}
 
 	setDashboardActive(active: boolean): void {
@@ -229,6 +231,12 @@ export class SidebarPanel {
 			if (this.dashboardActive) this.onToggleDashboard();
 			if (!this.marketplaceActive) this.onToggleMarketplace();
 		});
+
+		const createRow = section.createDiv("as-sidebar-item as-sidebar-create");
+		const createIcon = createRow.createSpan("as-sidebar-icon");
+		setIcon(createIcon, "plus");
+		createRow.createSpan({ cls: "as-sidebar-label", text: "Create" });
+		createRow.addEventListener("click", () => this.onCreateSkill());
 	}
 
 	private renderSkillkitCta(): void {

src/views/sidebar.ts

@@ -1920,3 +1920,21 @@
 .as-filter-clear:hover {
 	text-decoration: underline;
 }
+
+/* Create skill */
+.as-sidebar-create {
+	border-top: 1px solid var(--background-modifier-border);
+	margin-top: 4px;
+	padding-top: 8px !important;
+}
+
+.as-create-modal h3 {
+	margin: 0 0 12px;
+}
+
+.as-create-buttons {
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+	margin-top: 16px;
+}