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".

9 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add XiangyuSu611/obsidian-theme-designer --skill obsidian-theme-designer

Manual install

git clone --depth 1 https://github.com/XiangyuSu611/obsidian-theme-designer.git /tmp/obsidian-theme-designer
mkdir -p ~/.claude/skills
cp -r /tmp/obsidian-theme-designer/. ~/.claude/skills/obsidian-theme-designer

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# 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

Read the full skill on GitHub

Details

Skill name: obsidian-theme-designer
Repository: XiangyuSu611/obsidian-theme-designer
License: MIT
Repo updated: 20 April 2026

FAQ

What does the Obsidian Theme Designer skill do?

How do I install the Obsidian Theme Designer skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add XiangyuSu611/obsidian-theme-designer --skill obsidian-theme-designer. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Obsidian Theme Designer popular?

It lives in XiangyuSu611/obsidian-theme-designer, which has 9 GitHub stars and 1 forks.

Related skills

Pair Design

mary13/pair-design-agent-skill

Use this skill for collaborative UX/UI design work — designing user flows, creating wireframes or prototypes, working through interaction design problems, or making structured design decisions where iteration and rationale matter. Triggers include: 'design a flow', 'create a wireframe', 'let's pair design', 'I need to design X', 'walk me through designing Y', requests for prototype screens, mentions of UX/UI methodology, interaction design, information architecture, or service design. The skill enforces a disciplined one-artifact-at-a-time methodology with clear human-AI roles (Synth/Gen) and

Frontend & Design

Frontend Expert

sukirman1901/frontend-expert

Chat-first frontend UI quality suite — 33 skills across UI Quality, Responsive, Ship FE, and Depth pillars. Token decision tree, compliance gates, anti-AI-slop, motion vocabulary (12 families), marketing landing recipes, and quality loop. Auto-loads on any UI/build/audit/polish request — no slash commands needed.

Frontend & Design

Rsa Whiteboard Teacher

tangyc828/RSA-Whiteboard-Animation

Generate RSA-style whiteboard animation storyboards with scene timing, image prompts, and narration scripts. Supports English and Chinese.

Frontend & Design

Ckw Design

connerkward/ckw-design-skill

Entry point for frontend design. Use WHENEVER building or touching the look of any web UI — components, pages, dashboards, landing pages, React/Vue/HTML-CSS — and whenever the user says "make this look better/nicer", "fix the spacing/layout", or mentions styling, color, typography, fonts, responsive design, polish, or aesthetics, even without the word "design". Load design-thinking for direction; design-system for implementation; design-spatial for layout; design-philosophy for visual philosophy or art-direction.

Frontend & Design

Wcag Accessibility

mrKanoh/wcag-accessibility-audit-skill

WCAG 2.1/2.2 AA accessibility skill: audits, remediation, ARIA roles and patterns, keyboard navigation, focus management, screen reader behavior (NVDA, JAWS, VoiceOver, TalkBack), color contrast, accessible components (modals, menus, tabs, forms, tables, comboboxes), React, Vue, Angular, Svelte and Next.js, mobile a11y (React Native, SwiftUI, Compose), cognitive accessibility, legal compliance (ADA, EAA, Section 508, EN 301 549, VPAT/ACR) and CI testing (axe-core, pa11y, Playwright). Use when the user asks whether UI is accessible or passes WCAG, asks about ARIA, focus traps, live regions, ski

Frontend & Design

Pbi Theme

gusbavia/pbi-theme

Generate complete Power BI Desktop theme files from brand colors. Creates production-ready JSON themes with branded canvas backgrounds, CSS design tokens, DAX HTML visual examples, and A4 PDF design system documents. Runs standalone or chained with pbi-lifecycle (auto-saves into the client's Global Theme/pbi-theme/ folder when invoked inside a lifecycle-managed project). Use when user asks to create a Power BI theme, PBI theme, dashboard theme, report branding, or Power BI color palette. Triggers on "create theme", "Power BI branding", "theme generator", "branded dashboard". Supports light/dar

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.