Art & Design

Design and implement a systematic framework for in-page navigation that orientates users within long-form content and provides direct access to document sections via scroll-synced links.

Design, structure, and optimize sticky and fixed top bar systems—including announcement bars, utility headers, primary navigation headers, shrink-on-scroll behaviors, dynamic hide/reveal scroll patterns, surface elevation transitions, and WCAG AA accessibility compliance.

Design a systematic framework for persistent, overlaying, and scroll-responsive UI elements, including progressive headers, mobile bottom docks, floating action buttons, and sticky sidebar widgets that maximize conversion and utility while preventing layout blocking and WCAG focus obscuration.

Design and implement structured progress indicators and multi-step sequences that guide users through complex tasks, providing clear feedback on their current position and remaining effort.

Design a systematic framework for "Skeleton Screens" that manages perceived performance and layout stability (CLS) by mapping UI "bones" to incoming content.

Design a systematic framework for compact, mutual-exclusion selectors (segmented controls or button groups), defining layout, state transition models, and accessibility patterns.

Design a systematic, highly accessible, and conversion-optimized layout framework for e-commerce shopping carts, defining spatial structures for sliding mini-cart drawers, dedicated cart pages, and item list components.

Design and implement a systematic framework for page body sections, managing spatial rhythm, layout patterns, and transitions to ensure a logical and engaging content flow.

Design and implement a persistent, hierarchical vertical navigation framework for complex web applications, dashboards, and documentation sites.

Design and implement a structured, scalable, and accessible site footer that handles global navigation, secondary information, and legal requirements.

Design a systematic framework for the end-to-end search experience, defining the visual and spatial organization of search triggers, autocomplete patterns, and results page layouts to maximize findability.

Design a systematic framework for user, workspace, and application settings interfaces, establishing clear navigation, robust section grouping, and reliable state persistence models.

Design and implement a centralized, highly accessible, and state-aware in-app notification center to aggregate system updates, user alerts, and actionable notifications without disrupting primary user workspaces.

Design a systematic, high-conversion, and accessible layout framework for e-commerce and product detail pages (PDP), defining spatial composition, media gallery grids, configurator buy-boxes, and responsive bottom-docking adaptations.

Design and structure a systematic framework for multi-step guided onboarding tours and product walkthroughs, managing anchor positioning, backdrop masking, interaction hierarchies, and responsive adaptation.

Design and implement high-density, multi-column 2D navigation dropdown panels (mega menus) for complex e-commerce, enterprise SaaS, and content portals with proper spatial composition, keyboard accessibility, and hover intent management.

Design a systematic framework for non-persistent UI layers (Modals, Drawers, and Popovers) that balances user focus, context, and interruption levels.

Design and implement a flexible, column-based layout system that scales across devices. Trigger this skill when asked to structure page layouts, design UI components, or establish responsive behavior for a website.

Design and implement a systematic framework for structured "Key: Value" metadata, ensuring numerical clarity, semantic alignment, and responsive scannability for entity attributes.

Design and implement a systematic framework for user feedback interfaces, including aggregate ratings, distribution summaries, and individual reviews to build trust and social proof.

Design and implement a systematic framework for page-level headers that provide context, orientation, and primary actions for a specific page or view.

Design and implement a systematic, highly accessible, and responsive master-detail (split-pane / list-detail) layout framework for navigating collections while maintaining deep record context, independent scroll regions, and mobile back-stack transitions.

Design and implement a systematic framework for pricing grids and tables, managing tier hierarchy, feature comparison, and billing logic to reduce cognitive load and guide conversion.

Design and document a systematic framework for numeric inputs, quantity selectors, and stepper controls, defining touch targets, boundary constraints, and WCAG AA accessible patterns across web interfaces.