Agent skill · design visual · aiskillstore
obsidian-theme-designer
Use when the user wants to design, preview, or customize an Obsidian vault theme — including choosing styles, comparing color schemes, adjusting typography, or generating CSS snippets. Triggers on keywords like "Obsidian theme", "color scheme", "CSS snippet", "appearance".
Why this skill is useful
Generates CSS snippets and provides domain-specific design guidance for Obsidian themes that the AI wouldn't reliably create on its own.
What it needs
Requires grep installed locally. About 7k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Obsidian Theme Designer Help users iteratively design Obsidian themes through visual browser previews, then generate an importable CSS snippet. Language: Respond in the same language the user writes in. If they write in Chinese, reply in Chinese. If English, reply in English. Process Flow Step 1: Analyze Vault Read the following files to understand current configuration: .obsidian/appearance.json — current theme, font size, light/dark mode .obsidian/community-plugins.json — installed plugins (check for Style Settings) .obsidian/themes/ — downloaded community themes .obsidian/snippets/ — existing custom CSS Also scan the vault directory structure to understand note types (papers, journals, project management, etc.) so preview content reflects real usage. Step 2: Extract Theme CSS Variables Use grep to extract key variables from each installed theme's theme.css: Category Key Variables ---------- -------------- Background --background-primary, --background-secondary, --color-base-00 Text --text-normal, --text-muted, --text-accent Accent --interactive-accent, --color-accent Font --font-text-theme, --font-interface-theme Headings --h1-color ~ --h6-color, --size-h1 ~ --size-h6 Typography line-height, --p-spacing, font-size Extract values for both .theme-light and .theme-dark. Use an Explore agent for parallel extraction. Step 3: Launch Visual Companion Use the superpowers brainstorming Visual Companion to show options in the browser. Windows: Then read $STATEDIR/server-info for URL. Step 4: Gather Preferences Ask one question at a time with multiple choices. Always provide a recommended default for users who are unsure ("if you're not sure, I recommend X because..."). 4a. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/obsidian-theme-designer