skills.rest
marcus
marcusCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-features

Guide developers in implementing Sidecar UI modals, keyboard shortcuts, and responsive layouts.

1.0k|79|Updated Dec 26, 2025
Search Tags:#ui#layout#shortcuts#modals#keyboard#mouse
One-click install
npx skills add https://github.com/marcus/sidecar --skill ui-features
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-features
Source: https://github.com/marcus/sidecar/tree/main/.claude/skills/ui-features
Command: npx skills add https://github.com/marcus/sidecar --skill ui-features

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Sidecar UI features improve user interaction by providing modular, consistent modals, shortcuts, and responsive UI patterns across all plugins.

Core Features & Use Cases

  • Implement modals using internal/modal with consistent styling and focus management
  • Add keyboard shortcuts and mouse support for efficient navigation
  • Improve UX with pills, tabs, scrolling, and resizable panes across the UI

Quick Start

Initialize a sample feature by integrating a modal and keyboard shortcut into the Sidecar UI to observe the behavior.

Frequently Asked Questions about ui-features

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

FAQPage Schema
How do I implement modals and keyboard shortcuts in Sidecar UI?▼

Implement Sidecar UI modals and keyboard shortcuts by using the internal/modal system for consistent styling and focus management, alongside enforced keyboard and mouse interaction patterns to ensure UX consistency and efficient navigation across plugins.

What is the best way to add pills and tabs to a Sidecar layout?▼

The best way to add pills and tabs to a Sidecar layout is to use the designated style systems for pills, ensuring consistent visual styling and responsive behavior across all user interaction surfaces within the interface.

Can I create resizable panes and scrolling areas in Sidecar?▼

Yes, you can create resizable panes and scrolling areas in Sidecar to improve user interaction and accessibility. The system provides responsive layout components that support pane resizing and scrolling for enhanced UX.

Does Sidecar UI support consistent focus management for modals?▼

Yes, Sidecar UI supports consistent focus management for modals by enforcing the use of the internal/modal system. This ensures proper focus handling and styling consistency whenever modal dialogs are opened or closed.

Why should I use internal modal systems instead of custom UI components?▼

Using internal modal systems instead of custom UI components ensures modular, consistent modals and shortcuts across all plugins. It enforces consistent keyboard and mouse interaction patterns, guaranteeing UX consistency and extensibility.

Related Skills

Explore More Design & Creative Skills→
jykimjykim
31

obsidian-links

Format, validate and fix Obsidian wiki links to conform with vault conventions.

Community
Basic
syncfusionsyncfusion

syncfusion-angular-splitter

Compose resizable Angular Splitter panes with pixel, percent, and auto sizing.

Official
Advanced
priyansh19priyansh19
1

design-guide

Establish and enforce CrewSpace UI design system standards across frontend components.

Community
Advanced
umbracoumbraco
26

umbraco-monaco-markdown-editor-action

Implement custom toolbar buttons and keyboard shortcuts for the Umbraco Monaco Markdown editor.

Official
Intermediate