Practical color system for interface design. Covers color selection methods, contrast and accessibility, structural vs interactive color, primary and secondary colors, color amount and modification, gradients, mastering grays, near-whites, and dark UI. Use whenever making color decisions, choosing palettes, checking contrast, designing dark mode, or working with grays. Trigger on: color, palette, contrast, accessibility, WCAG, dark mode, dark UI, gray, grey, gradient, accent color, brand color, background color, theme.
Framework for exploring design breadth (structurally different approaches) and depth (pushing a chosen direction as far as possible). Use early in any design process when exploring options, brainstorming alternatives, or pushing a direction deeper. Trigger on: brainstorm, explore, alternatives, options, ideas, concepts, variations, what else, different approaches, push further, iterate, next level, how far can we take this, range, breadth, depth.
The foundational design mindset for creating exceptional interfaces. Covers the practice of noticing (seeing what others miss), uncommon care (going beyond expectations), less but better (removing the unessential), and live tuning. Use this skill ALWAYS as the baseline mindset for any design, frontend, UI, or visual work. Activate whenever building, designing, reviewing, or improving any interface, component, page, or visual artifact — even if not explicitly asked for design quality. This skill should silently influence every piece of visual or interactive work you produce.
Structured framework for reviewing and critiquing interfaces. Provides specific, tangible observations across four lenses: visual design, interface design, interaction consistency, and user context. Use when reviewing, critiquing, auditing, giving feedback on, or self-evaluating any UI — components, pages, apps, dashboards, or visual artifacts. Also activate for self-critique before presenting any design output. Trigger on words like: review, critique, feedback, audit, evaluate, improve, what's wrong, how to make better, polish, refine, assess quality.
Practical guide for designing common UI elements and patterns. Covers navigation, input fields, forms, profiles, settings, lists and cards, detail views, sort and filter, tables, modals, and design systems. Use when designing any standard UI element or pattern. Trigger on: navigation, nav, input field, form, login, signup, profile, settings, list, card, table, modal, dialog, dropdown, checkbox, radio, toggle, tabs, search, filter, sort, detail view, pagination, design system, component.
Guide for using imagery in interfaces — photos (static and dynamic), icons, illustrations, and app icons. Covers photo selection, dynamic image handling, icon design and usage, creating simple illustrations, and app icon design. Use when working with images, icons, illustrations, or any visual assets in an interface. Trigger on: image, photo, icon, icons, illustration, avatar, thumbnail, app icon, stock photo, imagery, visual assets, favicon.
Guide structural interface decisions — the bones of a design before visual polish. Covers platform defaults, separation of concerns, information architecture, visual language definition (typeface, color, radius, icons, depth), and interaction model optimization. Use when building a new interface, choosing layouts, establishing visual languages, making structural decisions, or defining design direction. Trigger on: new project, architecture, layout, visual language, design system, design direction, structural, wireframe, information architecture, navigation structure, component structure.
Practical layout and spacing system for interface design. Covers the box model, grids and containers, implicit grids, negative space, alignment, optical vs mathematical spacing, high vs low density, scale and visual weight, affordance, and interactive layouts. Use whenever making layout decisions, spacing adjustments, alignment choices, or structuring interface components. Trigger on: layout, spacing, padding, margin, grid, alignment, gap, negative space, whitespace, density, proportion, container, box model, responsive, position.