Obsidian Layout Adjustment

Obsidian Layout Adjustment

This skill is for changing how Obsidian looks with CSS files while working with the user's visual language.

Obsidian is always the same kind of environment: app frame, tab headers, side docks, view headers, pane shells, note surface, properties, file explorer, backlinks, graph, rendered markdown, and status bar. The vault, theme, snippets, plugins, and desired taste direction change, but the canvas stays Obsidian.

The core behavior is translation:

the user names a visible Obsidian object. Translate that phrase into the stable Obsidian layer/backend object, edit the active snippets safely, screenshot the result, and keep iterating without losing good states.

This is not a general CSS workflow and not a fixed-theme generator.

Normal Output Mode

This skill should make live styling work faster, not turn every small request into a report.

In normal use:

1. Say the mapping only when it prevents ambiguity.
2. Keep the mapping short: one sentence is usually enough.
3. Then act: inspect active snippets, checkpoint, patch, format, reload, screenshot.
4. Report the result concisely with changed files, checkpoint, and screenshot status.

Good normal update:

"I’m treating 'tabs above the note' as workspace tab headers, not the arrows/book/dots view header. I’ll checkpoint active snippets, patch that selector family only, and screenshot the tab strip."

Do not write a long workflow report unless:

• the user asks for a plan, audit, review, or explanation.
• You are running evals or building this skill.
• You are refactoring without visual changes.
• The request is ambiguous enough that acting first would be risky.

The value is in preventing bad CSS loops while still moving quickly.

Use The Reference

Read references/workflow-reference.md when:

• the user names a visible Obsidian object in natural language.
• The requested target could be more than one Obsidian layer.
• A screenshot shows "nothing changed," "still wrapped," "not lifted," uneven edges, washed-out surfaces, or unreadable icons.
• You are refactoring active snippets without changing the accepted look.
• You need the Obsidian surface map, change-type map, or failure-pattern list.

The reference is Obsidian-specific. Use it before treating the UI as an unknown web page.

Operating Loop

1. Start from the live vault.
2. Read <vault>/.obsidian/appearance.json.
3. Treat enabledCssSnippets as the active styling source of truth.
4. Read active snippets before archives, backups, or old experiments.
5. Translate the user's phrase into an Obsidian object and owning layer.
6. Classify the change type: color, readability, lift, shape, structure, density, simplification, workflow, or refactor.
7. Save a named checkpoint before subjective edits: copy the active snippets to .obsidian/snippet-archive/, never into .obsidian/snippets, so the snippet picker stays clean.
8. Re-read the exact current block, then edit one owning layer: stage, shell, header, wrapper, or child. Formatting reshapes the file; a patch written from a remembered shape misses mechanically.
9. Format CSS.
10. Reload/focus Obsidian and screenshot the exact affected area.
11. Use the screenshot and the user's correction as evidence.
12. If it fails, inspect ownership or restore; do not keep piling CSS onto the same wrong target.
13. Refactor only after the user accepts the visual state.

Translate Before Editing

The user will usually name what they see, not the selector:

• "tabs above the note"
• "arrows/book/dots above the note"
• "left side note buttons"
• "right sidebar"
• "links in those little areas"
• "the thing around the note"
• "selected icon"
• "top-left white corner"

Before editing, map the phrase:

user phrase -> visible object -> Obsidian layer -> likely selector/settings surface -> change type -> owning layer

Say the mapping back when it could be ambiguous:

"When you say the tabs above the note, I am treating that as the workspace tab headers, not the arrows/book/dots row inside the note pane."

This is the main mistake-prevention step. Most frustrating failures came from changing a plausible element that was not the object the user meant, or changing a child when the wrapper/header/stage owned the visible shape.

Stable Layer Stack

Use this compact map first, then verify exact selectors in the live vault:

The visible object and backend layer should be treated as stable across Obsidian work. Exact class names can vary by theme/plugin/app version, so verify in the live vault before patching.