ui-ux-guidelines

Apply UI/UX guidelines for consistent, accessible Obsidian Gemini plugin components.

515|64|Updated Oct 23, 2024

Search Tags:#design #ui #plugin #obsidian #gemini #guidelines #ux

Ready to run

npx skills add https://github.com/allenhutchison/obsidian-gemini --skill ui-ux-guidelines-allenhutchison

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-ux-guidelines
Source: https://github.com/allenhutchison/obsidian-gemini/tree/main/.agents/skills/ui-ux-guidelines
Command: npx skills add https://github.com/allenhutchison/obsidian-gemini --skill ui-ux-guidelines-allenhutchison

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides UI/UX best practices to ensure consistent, accessible, and visually cohesive Obsidian Gemini plugin components, reducing design drift and UI bugs.

Core Features & Use Cases

Modal sizing and responsive layouts using Obsidian CSS containment and the :has() selector to constrain widths gracefully.
Text overflow handling, proper typography, and theme-aware styling to preserve readability across environments.
Icon usage and theming alignment with Obsidian's variables to ensure visual consistency.
Collapsible UI sections and compact defaults to keep interfaces clean while exposing details on demand.
Guidelines for file chips, session state cues, and interaction patterns to create predictable experiences.

Quick Start

Apply these UI/UX guidelines when building or auditing Obsidian Gemini plugin components to ensure consistency and accessibility.

Frequently Asked Questions about ui-ux-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I maintain UI consistency across Obsidian plugin components?▼

Maintain UI consistency in Obsidian plugins by applying standardized UX guidelines that enforce theme variables, proper typography, and responsive layouts. This prevents design drift by ensuring all modal dialogs and in-app views use Obsidian's native CSS variables for visual cohesion.

What is the best way to handle text overflow in Obsidian modal dialogs?▼

Handle text overflow in Obsidian modals by using CSS containment and the :has() selector to constrain widths gracefully. Applying proper text overflow handling and compact defaults keeps interfaces clean while preserving readability across different theme environments.

How do I style Obsidian plugin views to support custom themes?▼

Style Obsidian plugin views by using theme-aware styling with Obsidian's native CSS variables. This ensures your in-app views automatically adapt to custom themes, preserving readability and visual consistency across both light and dark environments.

Can I use collapsible UI sections to organize complex plugin interactions?▼

Yes, you can use collapsible UI sections to organize complex plugin interactions. Setting compact defaults keeps interfaces clean while exposing details on demand, creating predictable experiences for file chips and session state cues within the modal.

Does this UI/UX approach work for responsive layouts in the Obsidian Gemini plugin?▼

Yes, this approach works for responsive layouts in the Obsidian Gemini plugin. It applies CSS containment and the :has() selector to constrain widths gracefully, ensuring modal sizing and in-app views adapt properly across different screen sizes.