ERT UI Refactor Skill

This skill guides the refactoring of Obsidian plugin settings and modals to the Radial Timeline (ERT) UI system.

Core Principles

1. •Theme-First: Respect Obsidian theme variables for surfaces, borders, and typography.
2. •Scoped: All custom styles MUST be under .ert-ui. Skins (e.g., .ert-skin--social) are nested under .ert-ui.
3. •Tokens: Use --ert-* tokens for spacing and rhythm. Avoid literal pixels.
4. •Archetypes: Use reusable layout patterns (ert-panel, ert-row, ert-stack). Do not use ad-hoc wrappers.
5. •Additive: Add accents (glows, borders) rather than replacing theme surfaces.
6. •Preservation: Do NOT delete legacy rt- styles or files until the entire refactor is verified and complete. Keep them in reserve.

Refactoring Checklist

For each file (SettingsTab or Modal):

1. •Add Scope Class: Ensure the top-level container has .ert-ui.
   • •For Modals: Add to contentEl or a wrapper div.
   • •For Settings: Add to the main container.
2. •Apply Archetypes:
   • •Replace generic divs with ert-panel, ert-row, ert-stack where layout dictates.
   • •Use ert-density--compact for tighter spacing if needed.
3. •Remove Legacy Styles:
   • •Remove inline styles (except dynamic values).
   • •Remove setting-item or other Obsidian classes if creating a custom ERT component, BUT generic settings should generally strictly follow "Theme-First" and might just need the scope wrapper if they are standard. Correction: The guidelines say ❌ .setting-item { ... } in CSS, meaning don't style them globally. But in HTML, we should use ERT archetypes if we want the ERT look.
   • •Clarification: If the element is a standard Obsidian setting (new Setting(container)), leave it as is unless replacing with a custom React/HTML ERT component. The guidelines seem to focus on styling bespoke components or wrapping standard ones.
4. •Tokenize Spacing:
   • •Ensure spacing uses vars like var(--ert-row-gap).

CSS Selectors (Reference)

• •Scope: .ert-ui
• •Skins: .ert-skin--social, .ert-skin--pro (apply to .ert-ui container or specific children).
• •Archetypes:
  • •.ert-panel: Card-like container.
  • •.ert-row: Flex row.
  • •.ert-stack: Vertical stack.

Example Transformation

Before:

const div = containerEl.createDiv();
div.addClass("my-custom-modal");
div.style.padding = "20px";

After:

const div = containerEl.createDiv("ert-ui"); // Scope
div.addClass("ert-panel"); // Archetype
// Spacing handled by archetype or tokens in CSS, not inline style.