← ClaudeAtlas

obsidian-theme-designerlisted

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".
aiskillstore/marketplace · ★ 329 · Web & Frontend · score 79
Install: claude install-skill aiskillstore/marketplace
# 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 ```dot digraph theme_design { "1. Analyze Vault" [shape=box]; "2. Extract Theme Variables" [shape=box]; "3. Launch Visual Companion" [shape=box]; "4. Gather Preferences" [shape=box]; "5. Iterative Design Refinement" [shape=diamond]; "5b. Install Fonts" [shape=box]; "6. Generate CSS Snippet" [shape=box]; "7. Import Guide" [shape=doublecircle]; "1. Analyze Vault" -> "2. Extract Theme Variables"; "2. Extract Theme Variables" -> "3. Launch Visual Companion"; "3. Launch Visual Companion" -> "4. Gather Preferences"; "4. Gather Preferences" -> "5. Iterative Design Refinement"; "5. Iterative Design Refinement" -> "5. Iterative Design Refinement" [label="user requests changes"]; "5. Iterative Design Refinement" -> "5b. Install Fonts" [label="user approves"]; "5b. Install Fonts" -> "6. Generate CSS Snippet"; "6. Generate CSS Snippet" -> "7. Import Guide"; } ``` ## 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