ui-ux-guidelines

name	ui-ux-guidelines
description	UI/UX best practices for obsidian-gemini plugin development. Covers modal sizing, text overflow, message formatting, collapsible UI, animations, icons, file chips, session state, CSS containment, and theme compatibility. Use this skill when building or modifying UI components.
metadata	{"author":"obsidian-gemini","version":"1.0"}
compatibility	Specific to the obsidian-gemini repository.

UI/UX Best Practices

When to use this skill

Use this skill when:

• Building or modifying UI components in the plugin
• Implementing views, modals, or interactive elements
• Working on styling, layout, or theming
• Reviewing UI code for consistency and quality

For Obsidian-specific API guidance (views, modals, workspace, DOM helpers), also refer to the obsidian-plugin-development skill.

Guidelines

1. Modal Sizing

Use the :has() CSS selector to target parent containers for proper width constraints. Obsidian wraps modal content in container elements, so direct width on the modal class may not be enough.

.modal-container:has(.my-modal) {
	max-width: 800px;
}

2. Text Overflow