Art & Design

Design and implement a systematic framework for navigating large collections of content, ensuring clear orientation, accessibility, and efficient traversal.

Design a systematic framework for displaying high-impact quantitative data, ensuring numerical clarity, trend context, and visual hierarchy for KPIs and social proof.

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.

Design and implement a systematic, multi-column masonry grid layout framework to pack variable-height content cards tightly without vertical gaps while maintaining strict visual hierarchy, logical reading and focus order, and WCAG AA accessibility.

Design and document the visual behavior of UI elements during user interaction (hover, focus, active, disabled, etc.) to ensure usability and accessibility.

Design and implement a systematic iconography framework that ensures visual consistency, semantic clarity, and technical accessibility across a website.

Design and structure interactive, side-by-side visual comparison interfaces (before/after view) with keyboard control, touch-target optimization, and layout preservation rules.

Design and implement a systematic framework for displaying third-party logos (customers, partners, media) that ensures visual balance, optical normalization, and brand integrity across all viewports.

Design and implement a systematic framework for the visual and spatial anatomy of page introductions, managing layout composition, content hierarchy, and visual layering to ensure immediate clarity and engagement.

Design and implement a systematic framework for functional motion, defining durations, easing curves, and choreography to improve usability, feedback, and spatial mental models.

Design a systematic framework for global-ready interfaces, addressing bi-directional (RTL) layouts, localized typography, and cultural iconography to ensure a seamless experience across languages and regions.

Design and document a systematic framework for form interfaces, defining anatomy, spatial organization, and visual affordances to ensure consistency, usability, and accessibility.

Design, specify, and audit high-contrast, robust keyboard focus indicators across all interactive elements in a design system to ensure compliance with WCAG 2.1/2.2, seamless brand integration, and native high-contrast mode support.

Design and implement a typographic scale that scales smoothly across viewports using CSS clamp(). Trigger this skill when asked to create responsive typography, design systems, or fluid layouts.

Design and implement a structured, accessible, and responsive image gallery and immersive fullscreen lightbox system that supports touch-swipe gestures, keyboard navigation, and proper focus management.

Design a systematic framework for site-level error states and system statuses (404, 500, Maintenance, Offline) to maintain user trust and provide clear recovery paths.

Design and implement a fluid spacing scale using CSS clamp() to ensure consistent white space and vertical rhythm across all devices. Trigger this skill when asked to define spacing systems, margins, paddings, or layout gaps.

Design and implement a systematic framework for user privacy, managing consent banners, preference centers, and persistent privacy controls to balance legal compliance with user trust.

Design and implement a systematic framework for content discovery interfaces, defining the visual and spatial organization of filters, facets, and sorting controls to maximize findability and reduce cognitive load.

Design a systematic framework for uploading and managing files, defining the visual and spatial organization of drop zones, upload queues, and file management actions to ensure a high-trust and efficient user experience.

Design and implement a systematic framework for charts and graphs, managing visual hierarchy, accessible color theory, and responsive behavior to transform complex data into actionable insights.

Design and structure popover action menus, contextual menus, overflow menus, and submenus, managing item anatomy, spatial positioning, keyboard navigation, and responsive touch adaptation.

Design a systematic layout framework for viewport-locked, multi-pane web applications and SaaS dashboards, establishing scroll containment, collapsible panels, and robust responsive adaptations.

Design and implement purposeful "empty states" (zero-data screens) that guide users, reduce frustration, and provide clear paths to action when content is missing or yet to be created.