ives

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.

Framework for defining, measuring, and tracking the specific attributes of quality that matter for a product. Turns vague "needs work" into precise, measurable evaluation. Use when evaluating quality, setting targets, planning improvements, deciding where to focus effort, or aligning a team on what "good" means. Trigger on: quality, evaluate, measure, prioritize, what matters, tradeoffs, where to invest, rating, scoring, what's most important, product direction, quality bar.

Step-by-step process for iteratively improving an existing interface. Works through a specific sequence: remove redundancy, simplify visual treatments, tighten spacing, establish consistency, improve hierarchy, improve data visualization, refine interactions, and craft details. Use when improving, polishing, refining, or iterating on any existing UI. Trigger on: improve this, make this better, polish, refine, iterate, tighten up, clean up, push further, next level, before/after, ship quality, production ready.

Practical style and visual direction for interfaces. Covers design direction, subtlety, corner radius as personality, borders, depth and shadows, opacity, buttons, and the relationship between form and function. Use when establishing visual direction, choosing component styles, deciding on depth/shadow strategy, designing buttons, or defining the overall look and feel. Trigger on: style, direction, look and feel, shadow, border, radius, corner radius, depth, button design, visual treatment, aesthetic, mood, personality.

Practical workflow tactics for interface design projects. Covers the no-stress design process, low-fidelity design (when and how to wireframe), responsive design, platform guidelines (iOS HIG and Material), organizing design files, design reviews, developer handoff, and prototyping strategy. Use when planning a design project, deciding on process, discussing wireframes, preparing for handoff, or thinking about responsive design. Trigger on: wireframe, low fidelity, process, workflow, handoff, responsive, prototype, organize, present, review, stakeholder, developer, iOS guidelines, material design, platform guidelines.

Practical typography system for interface design. Covers the rule of four (limit type sizes), font weight as meaning, typographic hierarchy, titles and body text, truncation, callouts, interactive text, combining text styles, system fonts, and alternate fonts. Use whenever making typography decisions: choosing fonts, setting sizes, establishing hierarchy, designing text-heavy interfaces, or reviewing typographic quality. Trigger on: font, type, typography, text size, font size, heading, body text, type scale, font weight, typeface, hierarchy, readability, text style.