anthropics · XiangyuSu611 · Apr 8, 2026
diff --git a/skills/obsidian-theme-designer/LICENSE.txt b/skills/obsidian-theme-designer/LICENSE.txt
@@ -0,0 +1,13 @@
+Copyright 2025 XiangyuSu611
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/skills/obsidian-theme-designer/SKILL.md b/skills/obsidian-theme-designer/SKILL.md
@@ -0,0 +1,245 @@
+---
+name: obsidian-theme-designer
+description: 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".
+---
+
+# 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
+- `.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:**
+```bash
+# run_in_background: true
+scripts/start-server.sh --project-dir /path/to/vault
+```
+Then read `$STATE_DIR/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. Reference Collection (ask first)
+
+Before showing style options, ask the user:
+> "Do you have any references you like — a screenshot, website, or app whose look you want to emulate? If not, no worries, I'll show you some options."
+
+If the user provides a reference, analyze its visual characteristics (color temperature, font style, density, decoration level) and use them to guide subsequent choices. **If the reference clearly determines style direction and/or color preference, skip the corresponding sub-steps (4b, 4c) and go directly to the next undecided question.** Don't ask what the user has already shown you.
+
+### 4b. Overall Style Direction
+
+Show style directions **visually in the browser** with mini mockups, not just text labels. Each option should include a relatable analogy so non-designers can understand:
+
+| Direction | Analogy for non-designers |
+|-----------|--------------------------|
+| Academic | "Like a LaTeX PDF or printed journal" |
+| Minimal | "Like Apple Notes — clean, lots of white space" |
+| Dark immersive | "Like a code editor at night — easy on the eyes" |
+| Cyberpunk-dev | "Like VS Code or a hacker terminal" |
+| Warm texture | "Like writing on real paper — soft, warm tones" |
+
+If the user says "I don't know" or "any is fine", recommend the direction that best matches their vault content (e.g., academic for research-heavy vaults).
+
+### 4c. Color Preference
+
+Ask in plain terms, NOT hex codes:
+> "Do you prefer cool tones (blue, teal, gray), warm tones (gold, orange, brown), or neutral (pure black & white)?"
+
+Then show 2-3 color palette options **visually in the browser** with the chosen direction applied. Never ask users to pick hex values directly.
+
+### 4d. Light/Dark Mode
+
+- Dark only / Light only / Dual mode
+- If dual mode: each mode can have a different accent color — show side-by-side in browser
+
+### 4e. Font Selection with frontend-design
+
+**REQUIRED:** Invoke the `frontend-design:frontend-design` skill to select distinctive font pairings.
+
+**Critical:** NEVER present font names in the terminal as the primary selection method. Users don't know what "Playfair Display" looks like. Always show fonts **rendered in the browser** — users choose by visual appearance, not by name.
+
+**Principles (from frontend-design):**
+- NEVER use generic fonts (Arial, Inter, Roboto, system-ui defaults). Choose fonts with character.
+- Each variant should use a DIFFERENT font combination to give real contrast.
+- For CJK + Latin bilingual content, pair Latin fonts with matching CJK fonts (e.g., Playfair Display + Noto Serif SC, DM Sans + Noto Sans SC).
+- Load fonts via Google Fonts `<link>` tags in previews. In the final CSS snippet, use locally-installable font names with fallbacks.
+
+| Role | Examples |
+|------|---------|
+| Heading (display) | Playfair Display, DM Sans, Outfit, Libre Baskerville, Sora |
+| Body (reading) | Source Serif 4, Literata, DM Sans, Outfit |
+| CJK pairing | Noto Serif SC (with serif), Noto Sans SC (with sans-serif), LXGW WenKai |
+| Code (monospace) | JetBrains Mono, IBM Plex Mono, Fira Code, Cascadia Code |
+
+**Font showcase format:** Create a full-page HTML gallery (not content fragments) with 8-10 font cards. Each card should render the SAME sample content (including bilingual text AND numbers/data) in that card's font pairing. Include a Dark/Light mode toggle at the top. Users can click cards to select. The sample text must include:
+- A Chinese heading
+- A paragraph with mixed Chinese and English
+- A line with numbers and data (e.g., "从 127.4s 降至 48.6s，优化率达 61.8%")
+- A code snippet in the monospace font
+- Tags
+
+**Users may mix-and-match:** A user may like the Chinese rendering from one card and the English/number rendering from another. Support this — the final CSS can combine fonts from different cards (e.g., Spectral for Latin + Noto Serif SC for CJK).
+
+## Step 5: Iterative Design Refinement
+
+Show full simulation in browser (sidebar + editor), confirm step by step.
+
+**Critical rules (MUST follow):**
+
+- **Bilingual content**: Preview MUST include both Chinese and English text — headings, body, and quotes
+- **Dual-mode side-by-side**: Use `<div class="split">` to show light/dark modes next to each other
+- **Unified fonts**: Light and dark modes MUST use the same font family — only change colors
+- **Real elements**: Preview must cover h1-h3 headings, body text, blockquotes, code blocks, inline code, tags, tables, and links
+- **Use real content**: Read actual notes from the vault for preview text
+
+Write a new file for each iteration (e.g., `design-v2.html`). Never overwrite previous versions.
+
+## Step 5b: Install Fonts
+
+After the user approves the font selection, download and install the chosen fonts to the system so Obsidian can use them.
+
+**Download from Google Fonts CSS API:**
+```bash
+# 1. Fetch the CSS which contains direct .ttf URLs
+CSS=$(curl -s "https://fonts.googleapis.com/css2?family=FontName:wght@400;600;700" \
+  -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)")
+
+# 2. Extract and download all .ttf URLs
+echo "$CSS" | grep -o 'https://[^)]*' | while read url; do
+  curl -sL "$url" -o "/tmp/fonts/$(basename "$url")"
+done
+```
+
+**Install per platform:**
+
+- **Windows:** Copy `.ttf` files to `$HOME/AppData/Local/Microsoft/Windows/Fonts/` and register in registry:
+  ```bash
+  FONTDIR="$HOME/AppData/Local/Microsoft/Windows/Fonts"
+  cp /tmp/fonts/*.ttf "$FONTDIR/"
+  # Register each font in HKCU registry
+  for f in /tmp/fonts/*.ttf; do
+    fname=$(basename "$f")
+    powershell.exe -Command "New-ItemProperty -Path 'HKCU:\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts' -Name '$fname' -Value '$(cygpath -w "$FONTDIR")\\$fname' -PropertyType String -Force"
+  done
+  ```
+- **macOS:** Copy to `~/Library/Fonts/`
+- **Linux:** Copy to `~/.local/share/fonts/` then run `fc-cache -f`
+
+**Important:** Remind user to restart Obsidian after font installation for changes to take effect.
+
+## Step 6: Generate CSS Snippet
+
+Once the user approves, generate a CSS snippet file to `.obsidian/snippets/`.
+
+**CSS structure template:**
+
+```css
+/* Shared fonts */
+body {
+  --font-text-theme: '...';
+  --font-interface-theme: '...';
+}
+
+/* Light mode */
+.theme-light {
+  --background-primary: ...;
+  --text-accent: ...;
+  --h1-color: ...; --h2-color: ...;
+}
+
+/* Dark mode */
+.theme-dark {
+  --background-primary: ...;
+  --text-accent: ...;
+  --h1-color: ...; --h2-color: ...;
+}
+
+/* Element-specific styles: headings, blockquotes, code, tags, etc. */
+```
+
+**Notes:**
+- Use Obsidian's native CSS variable names for compatibility
+- Use `!important` only when necessary to override a base theme
+- Separate light/dark with `.theme-light` / `.theme-dark`
+
+## Step 7: Import Guide
+
+Tell the user how to enable the snippet:
+
+1. Open Obsidian **Settings** (Ctrl+,)
+2. Go to **Appearance**
+3. Optionally switch CSS theme back to default (or keep a base theme)
+4. Scroll to **CSS Snippets** at the bottom
+5. Click the refresh button, then toggle the new snippet on
+6. Use Obsidian's built-in light/dark mode toggle to see both color schemes
+
+## Common Mistakes
+
+| Mistake | Correct Approach |
+|---------|-----------------|
+| Asking user to pick hex colors or font names in terminal | Always show colors and fonts visually in browser — users choose by appearance |
+| Using generic fonts (Inter, Arial, Roboto) | Invoke frontend-design skill for distinctive font pairings per variant |
+| Showing text-only style options without visual examples | Every style direction must have a visual mockup in browser |
+| No fallback when user says "I don't know" | Always provide a recommended default with reasoning |
+| Not asking for references first | Ask if user has screenshots/websites they like before showing options |
+| Preview in English only | Must include bilingual content (Chinese + English) in headings and body |
+| Different fonts in light/dark modes | Font family must be unified; only change colors |
+| Too many options at once | Show 3-4 options max per screen |
+| Oversimplified preview | Must include headings, body, quotes, code, tables, tags |
+| Generate CSS without preview | Always confirm design in browser before generating |
+| Snippet in wrong directory | Must be placed in `.obsidian/snippets/` |