Skill UI

A comprehensive guide detailing Apple's Human Interface Guidelines (HIG) for building adaptive and consistent user interfaces. It covers best practices for layout architecture, navigation patterns (e.g., Tab Bars, Sidebars, Split Views), and component usage across multiple platforms, including iOS, iPadOS, macOS, and visionOS. Essential for developers aiming for a native, high-quality user experience.

Master the art of building complex, production-grade user interfaces for Obsidian plugins. This guide covers implementing custom sidebar views (ItemView), interactive modal dialogs (for forms and confirmations), context menus, status bar widgets, and advanced editor commands. Learn how to interact with the Obsidian Vault API for file manipulation, significantly enhancing your plugin's functionality and user experience.

Generates a complete, self-contained HTML dashboard for analytics, admin, or control panel views. It structures the layout with a fixed sidebar, top navigation, KPI cards, and detailed charts (using inline SVG). Ideal when the brief requires visualizing key metrics, performance over time, or operational statistics.

This skill creates a comprehensive, three-column documentation page in pure HTML. It is ideal when the brief requires a professional "guide," "tutorial," or "API reference." It includes structured elements like a sticky left navigation sidebar, a main article body, and a dynamic right Table of Contents, ensuring technical content is highly readable and navigable.

A comprehensive OKR tracker dashboard designed to visualize team objectives and key results (KRs). It includes a quarter banner, multiple objective cards with progress bars, owner details, and a dedicated sidebar for at-a-glance KPIs, ideal for quarterly performance reviews and strategic planning.

Wraps any existing HTML artifact (landing page, dashboard, etc.) with a live sidebar panel of controls. This panel allows users to instantly adjust design variables—such as accent color, typography scale, layout density, and dark mode—by rewriting CSS custom properties in real time. All changes are persisted via localStorage, enabling continuous exploration and variant testing without losing state.

A comprehensive, professional single-page dashboard template designed for administration and analytics. It features a fixed sidebar, top navigation bar, KPI card grid, and dedicated space for 1-2 main charts (line, bar, area). It is ideal for operational monitoring, business reporting, and visualizing key performance indicators.

A comprehensive presentation template designed for educational workshops and training sessions. It features a warm paper aesthetic, persistent learning objectives on the left sidebar, core content slides, interactive Multiple Choice Question (MCQ) self-assessment pages, and module wrap-ups, ensuring a structured and engaging learning experience.

Design, implement, review, or refactor native macOS 27 Golden Gate interfaces in SwiftUI or AppKit. Ensures apps match Apple's current macOS 27 UI kit with restrained Liquid Glass language, integrated windows, full-height sidebars, native toolbars, flat lists, and clear pane boundaries. Ideal for Figma design-to-code work and audits of boxed interfaces.

Operate and verify webpages in the OpenSquilla Desktop sidebar using the conversation-owned browser MCP tools. Use for interactive browsing, forms, page navigation, and visual checks.