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:

```text
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 user points at | Usually means |
| --- | --- |
| top-left white/native area | titlebar/native chrome or adjacent app header |
| tabs above note | workspace tab headers |
| plus next to tab | new tab control |
| green/top bar | app frame or tab header container |
| far-left icons | ribbon / side dock |
| selected side icon | active side-dock tab header plus icon state |
| buttons above file list | file explorer nav controls |
| left note/folder buttons | file explorer tree rows |
| vault name/footer | side dock profile/footer |
| arrows/book/dots above note | markdown view header |
| note/page/paper | markdown leaf, editor, or readable surface |
| note shadow/lift/edge | stage, shell, gutter, overflow, or pseudo-element relationship |
| properties | metadata container or Properties View workflow |
| links | internal link spans in reading/editing modes |
| right sidebar | right workspace split and utility leaves |
| linked mentions/backlinks | backlinks plugin result groups |
| graph | graph plugin leaf/canvas |
| bottom stats | status bar |

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.

## Change-Type Split

The same object needs different work depending on the request:

- **Color/accent**: update background, text, border, icon stroke/fill, and active/hover/focus states together.
- **Readability**: check rendered contrast, especially for icons on colored toolbars.
- **Lift/depth**: decide foreground, stage, shell, gutter, overflow, and