Skill UI

Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.

Automates Figma workflows through Rube MCP and Composio, covering file inspection, component/token extraction, exports, comments, and team browsing while guiding schema discovery before each run.

Guides creation of production-grade interfaces with a bold aesthetic direction, ensuring typography, color, layout, and motion choices remain intentional and unforgettable for any web component or page request.

A comprehensive guide to Apple's Human Interface Guidelines (HIG) for selecting and implementing content display components. This resource covers best practices for building UIs across various Apple platforms (iOS, macOS, watchOS, tvOS, visionOS), focusing on adaptability, accessibility, visual hierarchy, and optimal performance for charts, collections, image views, and web content.

This guide details Apple's Human Interface Guidelines (HIG) for various presentation components, including alerts, sheets, popovers, and action sheets. It provides best practices on when and how to use these elements to maintain user context, minimize interruptions, and ensure a cohesive design experience across platforms like iOS, macOS, and iPadOS.

Guidance on selecting layout and navigation components that follow Apple HIG, covering adaptive hierarchies, multitasking, and platform-specific behavior for iPhone, iPad, Mac, and visionOS apps.

This guide provides comprehensive principles and best practices for designing user interface components according to Apple's Human Interface Guidelines (HIG). It covers various components, including menu bars, context menus, toolbars, pop-up buttons, and pull-down controls. It emphasizes creating predictable, consistent, and platform-appropriate user experiences across macOS, iOS, and other Apple platforms, ensuring optimal user flow and discoverability.

This skill provides comprehensive guidance based on Apple's Human Interface Guidelines (HIG) for designing core navigation components. It details best practices for Search Fields (instant feedback, scoping), Page Controls (flat, linear sequences), and Path Controls (file hierarchy breadcrumbs). It helps developers ensure their application's UI/UX is consistent, intuitive, and platform-appropriate across iOS, macOS, and visionOS.

Guidance from Apple HIG summarizing how to present progress indicators, status bars, and activity rings with determinate versus indeterminate modes, safe placements, and platform conventions.

A comprehensive guide to Apple's Human Interface Guidelines (HIG) for system-level components. It covers best practices for making app content visible and actionable outside the main app shell, including Widgets, Live Activities, Notifications, Complications, App Clips, and Shortcuts. Learn how to design for glanceability, respect platform constraints, and maintain user engagement on various Apple operating systems.

Toolkit for senior UI designers that creates design tokens, component specs, responsive rules, and developer handoff assets. Apply it when building or evolving design systems to keep UI consistency and make design-dev collaboration smoother.

Comprehensive web and mobile design intelligence offering prioritized UX rules, 50+ styles, color palettes, typography pairings, and chart guidance to inform component design, accessibility checks, and landing/dashboard reviews.