ConcertoNotes

@concertonotes source repo

1.7k skills
0 followers
2 weeks ago last updated

▌
Mapping · concertonotes bundle
Apply the principle of Mapping — designing the relationship between controls and their effects so the connection between input and output is immediately obvious. Use when designing controls (knobs, switches, buttons, sliders, gestures), arranging them in space relative to what they affect, or diagnosing user confusion about which control does what. Strong mappings exploit physical analogies (up = more), spatial correspondence (the left burner control is on the left), and cultural conventions (red = stop). Poor mappings force the user to memorize arbitrary pairings, generating slips and errors that compound over time.

0 repo stars
▌
Immersion · concertonotes bundle
Apply the principle of Immersion — designing for sustained focus and engagement, where the user becomes absorbed in the activity and loses awareness of the surrounding environment. Use when designing for creative work, deep reading, gameplay, learning, or any activity that benefits from extended focused attention. Immersion requires removing distractions, providing clear feedback, calibrating challenge to skill, and respecting the user's flow state. Modern attention-driven products often work against immersion in pursuit of engagement metrics; designs that genuinely serve immersion are increasingly distinctive.

0 repo stars
▌
Wabi Sabi · concertonotes bundle
Apply the principle of Wabi-Sabi — the aesthetic embrace of imperfection, impermanence, and naturalness. Use when designing for warmth and authenticity, creating spaces that feel lived-in rather than sterile, choosing handcrafted-feeling materials over machined perfection, or evaluating whether a design feels too polished and impersonal. Wabi-sabi resists the digital-design tendency toward pixel-perfect uniformity in favor of subtle asymmetry, organic textures, and the visible mark of process. Used appropriately, it produces designs that feel human; used reflexively, it produces fake-looking sloppiness.

0 repo stars
▌
Closure · concertonotes bundle
Apply the Gestalt principle of Closure — the perceptual tendency to see incomplete shapes as whole. Use when designing icons (a few strokes can imply a closed shape), illustrations (negative space defines forms), logos (the IBM stripes, the WWF panda, the FedEx arrow), card layouts (cards don't need full borders to feel like containers), or any visual that benefits from suggested rather than fully drawn shapes. Closure lets you communicate more with less; the user's perception completes the form.

0 repo stars
▌
Iteration · concertonotes bundle
Use this skill whenever the question is *how* to develop a design — through one big push or through repeated cycles of build, test, learn, refine. Trigger when planning a design process, scoping an MVP, deciding between waterfall and iterative delivery, planning research cadence, or reviewing why a project drifted from its original vision. Iteration is one of the foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003) — and one of the most-violated by teams that try to ship "perfect" first versions.

0 repo stars
▌
Archetypes · concertonotes bundle
Use this skill when designing brand voice, marketing positioning, mascot or character design, narrative arcs in product onboarding, or any expressive surface where the design must communicate personality. Trigger when picking how a brand "feels" (rebellious, nurturing, sage-like), when designing storytelling for marketing, or when reviewing why a brand voice feels generic. Archetypes is one of the foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003), grounded in Jung's analytical psychology and widely applied in branding, storytelling, and product personality.

0 repo stars
▌
Fitts Law · concertonotes bundle
Use this skill whenever the question involves how easy it is to *hit* an interactive target — buttons, links, form controls, drag handles, scrollbars, mobile tap targets, anything the user must move a pointer or finger to. Trigger when sizing buttons, designing toolbars, picking a hit-area for icon buttons, designing for touch screens, debugging "users keep mis-clicking," or arguing about button density vs. usability. Trigger when the user mentions touch targets, target size, "fat fingers," pointer accuracy, edge gestures, or accessibility around motor impairments. Routes to sub-aspect skills for touch targets, screen edges, and pointer acceleration.

0 repo stars
▌
Critical Thinking Task Designer · concertonotes
Design a critical thinking task targeting specific skills like evaluating evidence, identifying bias, or analysing arguments. Use when embedding critical analysis into subject lessons.

0 repo stars
▌
Mimicry · concertonotes bundle
Apply the principle of Mimicry — borrowing the form, behavior, or visual language of something familiar to make a new design recognizable. Use when introducing a novel feature whose function would be opaque without an analogy, choosing between metaphor and convention, designing for a category your users already know, or evaluating whether a "skeuomorphic" element helps or hurts. Mimicry comes in surface (visual resemblance), behavioral (acts like the source), and functional (does what the source does) forms. Used well, it accelerates learning; used badly, it carries forward limitations the new medium doesn't share.

0 repo stars
▌
Affordance · concertonotes bundle
Use this skill whenever the question is whether the user can tell what an element does — whether it looks clickable, draggable, expandable, editable, or interactive at all. Trigger when designing buttons, links, custom controls, drag handles, draggable cards, editable inline fields, or any interactive element. Trigger on reviews when users hesitate, miss controls, or click on things that aren't interactive. Affordance is one of the most decisive principles in interaction design — Norman placed it at the center of *The Design of Everyday Things* — and it's one of the most violated by modern flat-design conventions that strip the visual cues users rely on.

0 repo stars
▌
Constraint · concertonotes bundle
Use this skill whenever the design must structurally prevent invalid actions — input validation, disabled states, required fields, type-restricted inputs, mode locks, role-based gates, hardware lockouts. Trigger when designing forms, picking input types, designing destructive flows, gating multi-step procedures, or thinking about how to prevent a class of errors from being possible at all. Constraint is one of the foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003) and one of the strongest design moves available — preventing wrong actions is more powerful than detecting them after the fact.

0 repo stars
▌
Alignment · concertonotes bundle
Use this skill whenever the design has more than one element on the page — every layout, every form, every table, every page header, every card. Trigger when designing a layout, picking a grid, fixing a UI that "looks off," debating left vs. center alignment for body text, or auditing why a design feels disorderly. Alignment is one of the most foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003) — every visible element's edge or center should fall on a shared axis with at least one other element. Misalignment by even a few pixels reads as disorder.

0 repo stars
▌
Hierarchy · concertonotes bundle
Use this skill whenever a design has more than one element competing for the viewer's attention — which is essentially every design. Trigger when laying out a screen, page, slide, poster, dashboard, or any composition where you must decide what gets seen first, what supports it, and what recedes. Trigger when reviewing a design and the user says "everything looks the same," "I don't know where to look," "the page feels flat," or "what's the most important thing here?" Trigger when picking type sizes, when deciding which actions to emphasize among many, or when an MVP screen has gone from one button to ten and the screen has lost its focal point. Hierarchy is the most decisive visual principle; this skill teaches how to construct it deliberately, and routes to sub-aspect skills for typographic, spatial, and color/tone hierarchy.

0 repo stars
▌
Proximity · concertonotes bundle
Use this skill whenever the question is how to make a composition feel organized — what belongs with what, where groups end, how related items can be visually bound without resorting to borders or boxes. Trigger when laying out forms, tables, navigation, lists, cards, dashboards, or any composition with multiple distinguishable groups of content. Trigger when a layout "feels disorganized," when users are confused which label goes with which input, when grouping is being attempted with borders that look heavy, or when a designer is reaching for color to encode grouping. Proximity is the cheapest, most powerful grouping tool in design; this skill teaches how to use spacing as the primary grouping mechanism, with sub-aspect skills for forms, tables, and navigation.

0 repo stars
▌
Prototyping · concertonotes bundle
Use this skill whenever the design has unknowns that need testing — when a sketch could resolve a debate, when assumptions about user behavior could be checked cheaply, when a high-fidelity build would benefit from a low-fidelity draft first. Trigger when planning research, when scoping a new feature, when stakeholders want to see something concrete, or when the team is stuck arguing about an approach. Prototyping is one of the foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003) and one of the highest-leverage process principles — the cheapest prototype that resolves the question is almost always cheaper than the consequences of skipping it.

0 repo stars
▌
Forgiveness · concertonotes bundle
Use this skill whenever a design lets users do something they might regret — delete, send, publish, charge, transfer, archive, overwrite, irrecoverably commit. Trigger when designing destructive actions, undo systems, confirmation dialogs, soft-delete recovery, draft-saving, transaction reversal, "are you sure?" patterns, or any flow where a wrong move costs the user time, data, money, or trust. Trigger when the user mentions "users keep deleting things," "we get support tickets about lost data," "is this dangerous?", or when reviewing destructive UI. Forgiveness is one of the central principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003) and one of Nielsen's 10 heuristics ("user control and freedom").

0 repo stars
▌
Legibility · concertonotes bundle
Apply the principle of Legibility — the visual clarity of individual characters and short phrases, determined by typeface, size, weight, contrast, and spacing. Use when picking type for UI elements (buttons, labels, navigation), evaluating typography against rendering conditions (small sizes, low-contrast displays, distance viewing), choosing display vs. body type, or auditing accessibility. Legibility is the precondition for reading; if a user can't quickly distinguish "I" from "1" or "O" from "0," everything downstream from text fails. Distinct from readability, which is about sustained reading of prose.

0 repo stars
▌
Weakest Link · concertonotes bundle
Apply the principle of the Weakest Link — a system's reliability is determined by its least reliable component, not by the average. Use when designing critical-path workflows, evaluating dependencies for risk, deciding where to invest in robustness, auditing onboarding or checkout flows for the step most likely to fail. The user's experience of the product is dominated by its worst step. Improving the average without improving the weakest step often doesn't improve the experience at all.

0 repo stars
▌
Hicks Law · concertonotes bundle
Use this skill whenever a design has many options the user must choose among — menus, navigation, pickers, plan tiers, settings panels, action toolbars, lists of templates, anything that asks "which one?" Trigger when the user is laying out a navigation menu, designing a settings page, picking the structure of a wizard, building a country/timezone/currency picker, designing a pricing table, or reviewing a UI where users hesitate over which control to use. Trigger when there's debate about "should we add another option?" — Hick's Law is the principle that costs the option a price. Routes to sub-aspect skills for menus, defaults, and pricing.

0 repo stars
▌
Errors Slips · concertonotes bundle
Use this skill when designing to prevent or recover from execution errors — actions that don't match the user's intent. Trigger when designing critical action confirmations, distinct affordances for similar-purpose elements, recovery from wrong-button presses, "I didn't mean to do that" flows. Sub-aspect of `errors`; read that first.

0 repo stars
▌
Readability · concertonotes bundle
Apply the principle of Readability — the ease with which sustained prose can be read, determined by line length, line height, paragraph rhythm, font choice for prose, and visual breathing room. Use when designing long-form content (articles, documentation, books, transcripts), writing email or report layouts, evaluating whether users can comfortably read paragraphs of text. Distinct from legibility (per-character clarity); readability is about the experience of reading sustained prose without fatigue. The two principles compose: readability requires legibility and adds prose-specific constraints.

0 repo stars
▌
Accessibility · concertonotes bundle
Use this skill on every design task that produces a user-facing surface. Trigger on every screen, component, prototype, or design review — accessibility isn't a phase, it's a property each surface either has or doesn't. Trigger when the user mentions accessibility, a11y, WCAG, screen readers, keyboard navigation, contrast, motion sensitivity, ARIA, color blindness, "section 508," "EAA," or compliance. Also trigger when the user is *not* asking about accessibility — because most of the highest-impact accessibility decisions are made silently when no one was asking. Routes to sub-aspect skills for the four WCAG sub-principles: perceivable, operable, understandable, robust.

0 repo stars
▌
Ockhams Razor · concertonotes bundle
Apply Ockham's Razor — given a choice between functionally equivalent designs, prefer the simplest. Use when comparing design approaches, evaluating whether a feature is necessary, deciding between elaborate and minimal solutions, auditing a product for accumulated complexity, or pruning features that no longer earn their place. The principle is not "always make things simpler" — it's "when two designs do the same thing, pick the simpler one." Most design problems involve actual tradeoffs; the razor cuts only when functionality is truly equivalent.

0 repo stars
▌
Immersion Flow · concertonotes bundle
Design for flow specifically — calibrate challenge to skill, provide immediate feedback, set clear goals, foreground the activity. Use when designing tools for skilled work (writing, drawing, programming, music), games, learning experiences, or any context where sustained engagement is the goal. Flow is the most-researched aspect of immersion; the conditions for it are specific and the design moves that support it are well-documented.

0 repo stars
▌
80 20 Rule · concertonotes bundle
Use this skill whenever the design has many features, controls, or content elements and decisions about which to prioritize matter — feature roadmaps, redesign scoping, IA decisions, dashboard design, settings page audits, marketing content prioritization, or any design with many candidates competing for attention. Trigger when the user asks "what should we focus on?", "should we add another feature?", "what can we cut?", or when reviewing a UI cluttered with rarely-used controls. The 80/20 rule (Pareto principle) is one of the foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003) and one of the most quoted across design, business, and engineering.

0 repo stars
▌
Wayfinding · concertonotes bundle
Use this skill whenever a user must navigate within a non-trivial space — a multi-page web app, a documentation site, a hierarchical settings panel, a conference site, a multi-step flow, a campus, a building, an app with deep IA. Trigger when the user asks how navigation should be structured, when users get lost, when "I can't find X" complaints recur, when designing breadcrumbs, sitemaps, search, or recovery flows. Wayfinding is one of the foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003); it's also the only principle from that source not previously covered by these plugins. Routes to sub-aspect skills for spatial metaphors, search-and-recovery, and breadcrumbs.

0 repo stars
▌
Control Locus · concertonotes bundle
Apply locus of control — the design choice between making the system appear to act on the user's behalf (external locus) and making the user appear to direct the system (internal locus). Use when designing AI-assisted features, autocorrect/autocomplete behaviors, recommendation surfaces, automated workflows, and any feature where the system could either do things automatically or wait for user instruction. Internal locus produces higher engagement, learning, and satisfaction; external locus produces higher convenience but lower agency. The skill is choosing deliberately and explaining the choice in the UI.

0 repo stars
▌
Feedback Loop · concertonotes bundle
Use this skill whenever a user takes an action and the system must communicate that the action was received, is in progress, succeeded, or failed. Trigger when designing button states, form submission, file uploads, payment flows, real-time UI updates, loading states, error states, success confirmations, or any moment when the user is waiting for the system to do something. Trigger when the user mentions "feels broken," "doesn't seem to work," "users keep clicking again," or any symptom of feedback gaps. Feedback Loop is one of the foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003) — and one of the principles whose absence most reliably damages a product's perceived quality.

0 repo stars
▌
Process Router · concertonotes bundle
Use this skill whenever the question is *how* to design well over time or *how* to make a design that doesn't break — accessibility, prototyping cadence, MVP scoping, edge cases, performance budget, error handling at scale, design system governance, or any architectural-design question. Trigger on accessibility questions, "is this ready to ship," "what about the edge case where," design reviews, MVP scoping, "we have too many opinions on this." Framework-agnostic. Routes the model to the right process or robustness principle in this plugin.

0 repo stars
▌
Exposure Effect · concertonotes bundle
Apply the Exposure Effect (mere-exposure effect) — the well-documented finding that repeated exposure to something tends to increase liking for it. Use when launching new features, planning redesigns, building brand familiarity, or evaluating user resistance to change. Familiarity reads as comfort and trust; novelty reads as risk. The effect explains why redesigns generate disproportionate user backlash, why incremental change beats radical change, and why brand consistency over time builds value beyond any single design choice.

0 repo stars
▌
Consistency · concertonotes bundle
Apply the principle of Consistency — making similar things look and behave similarly so users can transfer learning across the interface. Use when designing component libraries, defining naming conventions, choosing whether to invent or borrow patterns, auditing across surfaces (web, mobile, email, support docs), or evaluating whether two features should share or diverge in their interaction model. Strong consistency reduces cognitive load and learnability cost; aggressive consistency can flatten meaningful differences. There are four kinds — aesthetic, functional, internal, external — each with different applications.

0 repo stars
▌
Scaling Fallacy · concertonotes bundle
Apply the principle of avoiding the Scaling Fallacy — the assumption that a system that works at one scale will work at a different (smaller or larger) scale. Use when scaling a feature from prototype to production, designing for an unfamiliar user volume, evaluating whether a process that works for 10 users will work for 10,000, or planning a launch in a much larger market. Two distinct kinds: load assumptions (will it handle the volume?) and interaction assumptions (will users behave the same way?). Both need testing at the actual scale.

0 repo stars
▌
Mental Model · concertonotes bundle
Use this skill whenever the design will be used by people who bring prior expectations — which is essentially every design. Trigger when designing onboarding, when picking metaphors (folders, channels, projects), when reviewing why users keep getting confused, when migrating from one product convention to another, or when the user mentions "users don't understand," "they keep doing X wrong," or "we're inventing something new." Mental Model is one of the foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003) and grounds most modern user-experience design.

0 repo stars
▌
Errors Mistakes · concertonotes bundle
Use this skill when designing to prevent errors of intention — wrong actions taken because the user's model of the situation was wrong. Trigger when designing for ambiguous information, novel situations, complex decisions, or contexts where users may proceed with confidence based on a wrong understanding. Sub-aspect of `errors`; read that first.

0 repo stars
▌
Mapping Natural · concertonotes bundle
Apply natural mapping — the strongest form of mapping, in which the spatial position, motion, or shape of a control directly corresponds to what it affects. Use when designing physical control panels, in-screen controls that affect specific regions of a UI, chart legends, multi-target remote controls, vehicle dashboards, or any situation where the user must connect "this control" to "that affected thing." A natural mapping is one a first-time user can predict without instruction. When the form factor allows it, natural mapping is essentially free correctness.

0 repo stars
▌
Factor Of Safety · concertonotes bundle
Use this skill whenever the design will encounter conditions that can't be fully predicted at design time — load spikes, edge-case content, real-world variability, hardware variation, third-party flakiness, or any "what if" scenario. Trigger when scoping performance budgets, designing for content extremes, picking infrastructure capacity, designing error-handling, or planning for the long tail of users with unusual setups. Factor of Safety is one of the foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003) — also called "factor of ignorance" because the size of the safety factor is proportional to how much you *don't* know.

0 repo stars
▌
Aesthetics Router · concertonotes bundle
Use this skill whenever a design task involves the felt quality of an interface — beauty, polish, brand voice, persuasion, emotional response, marketing surfaces, hero sections, onboarding tone, empty/celebration states, illustrations, mascots, avatars. Trigger when the user mentions tone, polish, brand, "feels cold/cheap/premium," personality, voice, mascot, hero, "make it more delightful," or asks how a screen should make the user feel. Framework-agnostic. Routes the model to the right aesthetics principle in this plugin.

0 repo stars
▌
Mapping Cultural · concertonotes bundle
Apply cultural mapping — using shared conventions (icons, colors, gestures, metaphors) to convey what a control does when natural spatial mapping isn't available. Use when designing icon-based UIs, choosing colors for status indicators, picking gestures for touch interfaces, or selecting metaphors to make abstract operations concrete (the trash can, the gear, the magnifying glass). Cultural mappings are weaker than spatial ones — they require prior learning — but they're the workhorse of icon-driven interfaces. The risk is assuming a convention is universal when it's actually domain-specific.

0 repo stars
▌
Exposure Onboarding · concertonotes bundle
Use the exposure effect deliberately in onboarding and habit formation — getting users to repeated, low-friction encounters with the product so familiarity builds and preference forms. Use when designing onboarding flows, planning feature introductions, building user habits, or evaluating why users churn after first use. The exposure effect operates over time; products that get users to come back early benefit from accumulated familiarity that single-session products don't.

0 repo stars
▌
Wabi Sabi Restraint · concertonotes bundle
Apply wabi-sabi restraint — the discipline of leaving things out, of resisting decoration, of letting empty space and silence do design work. Use when designing reading-focused interfaces, paring back accumulated clutter, choosing between decoration and absence, or evaluating whether each element earns its place. Restraint is the often-overlooked half of wabi-sabi: the imperfection side gets attention, but the principle is equally about modesty and the elegance of what's not there.

0 repo stars
▌
Hicks Law Menus · concertonotes bundle
Use this skill when designing menus, dropdowns, navigation, command palettes, or any interface where the user picks from a list. Trigger when the menu has more than ~7 items, when navigation feels overwhelming, when designing a cmd-K palette, when picking what goes in a "More" overflow, or when arguing about whether to add another menu item. Sub-aspect of `hicks-law`; read that first if you haven't already.

0 repo stars
▌
Mimicry Surface · concertonotes bundle
Apply surface mimicry — making an interface element look like a familiar physical object to communicate its purpose at a glance. Use when introducing a control or container that has no native UI vocabulary, designing a niche product that benefits from a recognizable visual reference (a journal that looks like a journal, a wallet that looks like a wallet), or evaluating whether visual skeuomorphism is communicating or just decorating. Surface mimicry is most useful for novice users in unfamiliar mediums; it becomes anachronistic as the source fades or as users learn the abstract conventions.

0 repo stars
▌
Expectation Effect · concertonotes bundle
Apply the Expectation Effect — the principle that prior expectations measurably change a person's perception of a product or experience. Use when shaping the framing of new features, designing onboarding, choosing visual cues that signal premium vs. budget, or diagnosing why two functionally identical features feel different to users. Expectations are set by visual cues (premium materials, polished typography), language (precise, confident copy), social proof, price, and prior brand exposure. Setting expectations too high creates disappointment; too low and the product reads as mediocre. The skill is calibrating what to promise.

0 repo stars
▌
Interaction Router · concertonotes bundle
Use this skill whenever a design task involves what users *can do* and what happens when they do it — affordances, feedback, errors, undo, confirmation, target sizing, keyboard handling, modal vs. non-modal decisions, destructive actions, validation. Trigger when the user mentions buttons, forms, validation, error states, loading states, drag-and-drop, undo, confirmation dialogs, keyboard shortcuts, target sizes, "users keep deleting things," misclicks, or "should this be a popover or a dialog." Framework-agnostic. Routes the model to the right interaction principle in this plugin.

0 repo stars
▌
Hierarchy Spatial · concertonotes bundle
Use this skill when constructing visual hierarchy through layout, position, size, and whitespace — not type, not color. Trigger when laying out a page or section and deciding what gets the dominant region, where to place the focal element, how much breathing room to give it, and how secondary elements should arrange around it. Trigger when reviewing a layout that "feels cramped" or "feels lost," when a hero's CTA is competing with surrounding content, or when a dashboard's primary KPI is the same size as everything else. Sub-aspect of the broader `hierarchy` principle; read that first if you haven't already.

0 repo stars
▌
Perception Router · concertonotes bundle
Use this skill whenever a design task involves visual perception, layout, hierarchy, grouping, scanning order, attention, color organization, or composition — regardless of framework, design system, or platform. Trigger when the user is laying out a screen, page, slide, poster, dashboard, mobile view, or print piece; choosing what to emphasize; deciding how things should group; picking type sizes, spacing, or color roles; reviewing why something "looks busy" or "feels empty"; or asking "where should the eye land first." Routes the model to the right perception principle in this plugin and surfaces the most-decisive ones for the surface in question. Framework-agnostic: applies to web, mobile, print, physical product, slide design, and information graphics alike.

0 repo stars
▌
Snr Densification · concertonotes bundle
Use this skill when a design has *too much* whitespace — when the SNR pendulum has swung from cluttered all the way to sparse, sterile, or "empty-feeling," and you need to add signal density without adding noise. Trigger when reviewing a UI that "feels thin," "feels under-built," or where users complain "I'm scrolling forever to get to anything." Also trigger when designing power-user surfaces (admin panels, IDEs, data tools) that need higher density than consumer defaults. Sub-aspect of `signal-to-noise-ratio`; read that first if you haven't already.

0 repo stars
▌
Cognition Router · concertonotes bundle
Use this skill whenever a design task involves cognition, mental models, learnability, complexity reduction, defaults, memory, scanning, or comprehension — regardless of framework or platform. Trigger when the user is designing forms, settings, onboarding, dashboards with many widgets, complex tables, navigation IA, search experiences, or any flow that has many options or asks the user to learn something new. Trigger when the user mentions "too complex," "too many options," "users keep getting confused," defaults, labels, copy, mental models, progressive disclosure, autocomplete, or ergonomics. Routes the model to the right cognition principle in this plugin.

0 repo stars
▌
Constraint Physical · concertonotes bundle
Use this skill when designing structural constraints that prevent invalid actions through the shape, layout, or behavior of the design itself — paths (channels of motion), axes (rotary controls), barriers (blocks). Trigger when designing input controls, drag-and-drop affordances, modal dialogs, or hardware-style structural prevention. Sub-aspect of `constraint`; read that first.

0 repo stars
▌
Figure Ground Cues · concertonotes bundle
Apply specific visual cues to control figure-ground perception — shadow, elevation, scale, contrast, saturation, opacity, and texture. Use when designing layered interfaces, focus states, hover treatments, or any context where one element should clearly stand forward against others. Each cue contributes a portion of the figure-ground signal; combining cues strengthens the effect. The skill is selecting and calibrating cues for the desired level of separation.

0 repo stars
▌
Gestalt Similarity · concertonotes bundle
Apply the Gestalt principle of Similarity — elements that share visual attributes (color, shape, size, orientation) are perceived as belonging together, regardless of their physical proximity. Use when grouping related items in a list, status indicators, dashboard cards, navigation, or any context where you want the user to perceive certain items as a set. Similarity is one of the strongest grouping cues; it works even when proximity says otherwise. Color is the strongest similarity cue, then size, then shape; orientation is weakest.

0 repo stars
▌
Accessibility Robust · concertonotes bundle
Use this skill when the question is whether assistive technologies — screen readers, voice control, switch devices, refreshable braille displays — can reliably interpret your UI. Trigger when picking between semantic HTML and a custom-built component, when reaching for ARIA, when designing live regions for dynamic content (toasts, validation, search results), or when reviewing a UI built largely from `<div>` elements. Covers WCAG Principle 4 (Robust). Sub-aspect of `accessibility`; read that first if you haven't already.

0 repo stars
▌
Form Follows Function · concertonotes bundle
Use this skill when designing the visual or aesthetic layer of a product, deciding between expressive style and functional restraint, evaluating decorative elements, or arguing about whether a feature should ship plain vs. polished. Trigger when stakeholders ask "should we add visual flair to this?", when reviewing a design that "feels too decorated," or when picking between competing visual directions. Form Follows Function is one of the foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003) and one of the most-quoted dictums in design — but its meaning depends on which interpretation (descriptive vs. prescriptive) you take.

0 repo stars
▌
Hicks Law Pricing · concertonotes bundle
Use this skill when designing pricing tables, plan pickers, tier selectors, or any conversion surface where the choice itself is the conversion event. Trigger when laying out 3-tier or 4-tier pricing, when arguing about whether to add a fourth plan, when designing the "Choose your plan" step of onboarding, or when fixing low conversion on a pricing page. Pricing pages are a special Hick's Law case: the decision is the entire purpose of the page, and decision fatigue equals lost revenue. Sub-aspect of `hicks-law`; read that first if you haven't already.

0 repo stars
▌
Similarity Grouping · concertonotes bundle
Use visual similarity to create perceptual groups — making related items look alike so users perceive them as a set. Use when designing lists with categorized items, navigation systems, status displays, dashboards with multiple data series, or any layout where you want users to see "these things go together" at a glance. The strongest grouping cues, in order, are color, size, shape, and orientation; combine multiple cues for the strongest grouping.

0 repo stars
▌
Archetypes Brand Voice · concertonotes bundle
Use this skill when picking a brand archetype, propagating it across product and marketing surfaces, or auditing brand-voice consistency. Trigger when designing the voice of microcopy, marketing pages, support tone, or any brand-facing communication. Sub-aspect of `archetypes`; read that first.

0 repo stars
▌
Exposure Redesign Risk · concertonotes bundle
Manage the risks of redesigns when users have built up exposure-based preference for the existing design. Use when planning a major redesign, evaluating user backlash to changes, deciding between incremental and radical change, or recovering from a redesign that generated complaints. Users like what they're used to; redesigns must be planned to manage the transition cost. Even objectively-better redesigns trigger resistance disproportionate to the actual change.

0 repo stars
▌
Wabi Sabi Imperfection · concertonotes bundle
Design intentional imperfection that reads as warmth — subtle asymmetry, hand-drawn elements, organic textures, intentional irregularities. Use when adding human warmth to a digital design, distinguishing from competitors with uniform design systems, designing for personal or creative contexts. The skill is making imperfection look intentional and refined rather than sloppy or broken; the line between "designed warmth" and "looks unfinished" is narrow.

0 repo stars
▌
Hicks Law Defaults · concertonotes bundle
Use this skill when the question is what to *pre-select* in a list of options — radio groups, dropdowns, configuration UIs, plan pickers, sign-up flows, settings. A strong default is the highest-leverage Hick's Law mitigation: most users accept the default, paying almost no decision cost. Trigger when picking what's selected on first load, when stakeholders argue "shouldn't we let the user choose?", when designing wizards or onboarding, or when a UI has many options but most users want the same one. Sub-aspect of `hicks-law`; read that first if you haven't already.

0 repo stars
▌
Iconic Resemblance · concertonotes bundle
Apply iconic resemblance — designing or choosing icons that visually look like what they represent. Use when picking icons for actions or objects with strong visual referents (camera, clock, lock, calendar), evaluating whether a custom icon is communicating, or testing whether your icon set actually conveys meaning to your audience. Resemblance is the strongest form of icon recognition because it requires no prior learning; it fails when the function has no visual referent or when the audience doesn't recognize the object being depicted.

0 repo stars
▌
Mimicry Behavioral · concertonotes bundle
Apply behavioral mimicry — making an interface element behave like a familiar physical object so the user's physical-world intuitions transfer to the digital interaction. Use when designing gestures, animations, transitions, drag-and-drop, scroll behaviors, or any interaction where physical-world analogies could clarify the experience. Behavioral mimicry is more durable than visual skeuomorphism — physics-mimicking behaviors age well — but it requires deliberate calibration: too much physical fidelity slows the interaction down without communicating anything new.

0 repo stars
▌
Affordance Signifiers · concertonotes bundle
Use this skill when the design has interactive capability but users aren't *seeing* it — when the affordance is technically present but the signifier (the visible cue that tells users "you can do this") is missing or weak. Trigger when reviewing flat-design UIs where everything looks the same, when designing custom controls, when stakeholders ask "should this be more obvious?", or when picking signifier strength for primary vs. secondary actions. Sub-aspect of `affordance`; read that first.

0 repo stars
▌
Proximity Navigation · concertonotes bundle
Use this skill when designing or fixing navigation — sidebars, top nav, footer nav, mobile menus, breadcrumbs, tab bars, command palette groupings. Trigger when grouping related links, deciding when to add section dividers, fixing a sidebar where every link feels like a separate item, or designing a mobile bottom-nav with multiple action groups. Sub-aspect of `proximity`; read that first if you haven't already.

0 repo stars
▌
Snr Emphasis Economy · concertonotes bundle
Use this skill when deciding *how* to spend emphasis — color, weight, size, motion — across a design so that each instance lands. Trigger when picking the primary action among many CTAs, when status-color usage has multiplied across the app and lost meaning, when the brand color appears in too many places, or when a designer asks "should this also be highlighted?" and the answer is almost always no. Sub-aspect of `signal-to-noise-ratio`; read that first if you haven't already.

0 repo stars
▌
Accessibility Operable · concertonotes bundle
Use this skill when the question is whether users can *operate* a UI — keyboard, switch device, voice, screen-reader gestures — not just by mouse or touch. Trigger when designing keyboard navigation, focus management for modals/menus/popovers, drag-and-drop with alternatives, motion-heavy interactions, or any flow that asks the user to do something. Covers WCAG Principle 2 (Operable). Sub-aspect of `accessibility`; read that first if you haven't already.

0 repo stars
▌
Weakest Link Treatment · concertonotes bundle
Apply treatment strategies for identified weak links — fix, eliminate, buffer, replicate, or communicate. Use when you've identified a weakest link and are deciding what to do about it. Each treatment has different costs, benefits, and contexts where it's right. The choice depends on whether the weak link is necessary, whether it's fixable, what alternatives exist, and what timeline the fix can realistically follow.

0 repo stars
▌
Fitts Law Screen Edges · concertonotes bundle
Use this skill when designing for the edges and corners of the screen — where the cursor cannot overshoot, making them effectively infinite-sized targets along one axis. Trigger when designing global navigation, system menus, sticky headers, fixed sidebars, full-bleed CTAs, or anywhere you can put the most-frequent or hardest-to-find actions. Trigger when reviewing an app that has wasteful margins on every side and asks the user to aim for tiny targets in the middle. Sub-aspect of `fitts-law`; read that first if you haven't already.

0 repo stars
▌
Hierarchy Typographic · concertonotes bundle
Use this skill when the question is specifically about how to construct visual hierarchy through typography — picking a type scale, ladders of weight, line-height steps, and the relationships between display, heading, body, and caption type. Trigger when designing type systems, choosing fonts, picking heading sizes, defining a design system's typographic tokens, fixing a "no clear focal point in the headline area" issue, or reviewing why a long-form page feels like a wall of text. Sub-aspect of the broader `hierarchy` principle; read that first if you haven't already.

0 repo stars
▌
Proximity Data Tables · concertonotes bundle
Use this skill when designing or fixing data tables and tabular layouts — row spacing, column spacing, header treatment, group separators, total rows, sticky headers, dense vs. comfortable variants. Trigger when the user is laying out a table, deciding density, debugging "rows that are hard to follow," picking when to add zebra striping, or arguing for/against borders. Sub-aspect of `proximity`; read that first if you haven't already.

0 repo stars
▌
Proximity Form Fields · concertonotes bundle
Use this skill when laying out a form, fixing a confusing form, or building a form layout convention for a design system. Forms are where proximity failures are most visible: ambiguous label-input pairing, sections that bleed into each other, help text that orphans from its field. Trigger when designing sign-up, sign-in, settings, profile, billing, checkout, multi-step, or any structured-input surface. Sub-aspect of `proximity`; read that first if you haven't already.

0 repo stars
▌
Signal To Noise Ratio · concertonotes bundle
Use this skill whenever a design has too much or too little visual content competing for attention — when a screen "feels noisy," "looks busy," "feels cluttered," "feels empty," or when the user can't find the meaningful information amid decoration. Trigger when reviewing dashboards, data tables, settings pages, marketing surfaces, or any layout under critique. Trigger when designing chart axes/legends/grids, when picking icon density, when deciding whether to add a divider/border/illustration, or when a design "passes" the requirements but doesn't feel right. Signal-to-Noise Ratio is the discipline of subtraction; this skill teaches what counts as signal vs. noise, how to audit and reduce noise, and the trade-offs of overcorrecting.

0 repo stars
▌
Ockhams Feature Pruning · concertonotes bundle
Prune accumulated complexity from a product — features, options, settings, code paths that no longer earn their place. Use when auditing a mature product, reducing surface area, simplifying complex workflows, or evaluating whether to remove low-usage features. Pruning is harder than adding because users (often a small but vocal minority) resist removal even when usage data justifies it. The skill is identifying what to prune, deciding how, and managing the transition.

0 repo stars
▌
Consistency External · concertonotes bundle
Apply external consistency — honoring conventions from outside your product (platform conventions, category conventions, established interaction patterns) so users can transfer their learning into your product. Use when designing for a specific platform (iOS, Android, web), entering an established product category (calendar, email, file manager), choosing icons or gestures, or deciding when to follow vs. lead a convention. External consistency reduces the learning cost for new users; deviating from it requires both a strong reason and explicit framing.

0 repo stars
▌
Consistency Internal · concertonotes bundle
Apply internal consistency — making your product coherent with itself across all surfaces, components, and flows. Use when designing or auditing component libraries, defining design tokens, settling cross-team naming conventions, planning a design-system rollout, integrating acquired or legacy code, or evaluating whether two features should share or diverge in their interaction model. Internal consistency is enforced through design systems, shared vocabularies, and process discipline; it erodes through hand-off losses, sprint-driven shortcuts, and team boundaries that don't coordinate.

0 repo stars
▌
Fitts Law Touch Targets · concertonotes bundle
Use this skill when designing for touch — phones, tablets, kiosks, in-car displays, smart-TV remotes, anything where the input is a finger or thumb rather than a precise pointer. Trigger when sizing buttons for mobile, debugging "users keep mistapping," designing a mobile bottom-nav, picking icon sizes for a phone toolbar, or reviewing whether a desktop UI is touch-friendly. Sub-aspect of `fitts-law`; read that first if you haven't already.

0 repo stars
▌
Alignment Grid Systems · concertonotes bundle
Use this skill when designing or evaluating a grid system — picking column counts, gutter widths, breakpoints, baseline grids, or modular grids. Trigger when designing a new layout system, when an existing layout feels disorderly, when picking responsive breakpoints, or when reviewing a design that "doesn't sit on a grid." Sub-aspect of `alignment`; read that first.

0 repo stars
▌
Closure Implied Shapes · concertonotes bundle
Design forms that exploit closure — suggesting shapes through partial outlines, negative space, or strategic gaps so the user's perception completes them. Use when designing icons that need to read at small sizes, logos that need memorability, illustrations with restraint, card layouts with implied containment, or charts with implied structure. The art is suggesting just enough that the user perceives the whole, without leaving so little that they perceive nothing.

0 repo stars
▌
Color Semantic Systems · concertonotes bundle
Use this skill when building or auditing a color system that encodes meaning — status colors (success / warning / error), category colors (department, product line, user segment), brand-role colors (primary, secondary, tertiary). Trigger when designing status badges, picking chart palettes, building a design-system color spec, or fixing inconsistent color use across surfaces. Sub-aspect of `color`; read that first.

0 repo stars
▌
Snr Decoration Removal · concertonotes bundle
Use this skill when the question is *what to delete* — running a structured audit of a UI to remove decorative elements that don't earn their pixels. Trigger when reviewing an existing UI for noise reduction, when a stakeholder pushback says "this feels too busy" but you don't know what specifically to cut, or when polishing a design pre-ship. This is the operational counterpart to `signal-to-noise-ratio`; it gives you a checklist and a procedure rather than a principle.

0 repo stars
▌
Scaling Load Assumptions · concertonotes bundle
Verify and design for load scaling — data volume, transaction volume, request rate, and user count. Use when sizing infrastructure, choosing data structures, designing pagination and lazy-loading patterns, evaluating dependencies' rate limits, or load-testing before launch. Most scaling failures are load failures: a system that handled X requests/second can't handle 10X. The skill is anticipating the load the system will see and designing or testing for it deliberately.

0 repo stars
▌
Iconic Representation · concertonotes bundle
Apply iconic representation — using simplified visual symbols to communicate function, status, or category at a glance. Use when designing icon sets, choosing between icon and text labels, evaluating whether to lean on existing iconography (resemblance to a known object) or invent symbolic icons (arbitrary forms with assigned meanings), or auditing whether your icons are actually communicating. Three kinds: similar (icons that look like what they represent), example (icons that depict an object associated with the function), and arbitrary/symbolic (forms with no inherent meaning, like the hamburger menu).

0 repo stars
▌
Constraint Psychological · concertonotes bundle
Use this skill when designing constraints that work through perception, expectation, and learned convention — symbols, conventions, mappings. Trigger when designing iconography, picking control conventions, or designing for behavioral predictability. Sub-aspect of `constraint`; read that first.

0 repo stars
▌
Closure Completion Cost · concertonotes bundle
Recognize when closure is the wrong choice — when the perceptual completion work it asks of the user is too costly, ambiguous, or risky. Use when designing for accessibility audiences, novice users, high-stakes interfaces (medical, financial, safety), small rendering sizes that strain perception, or any context where the user shouldn't have to do completion work to understand the form. The skill is judging when explicit forms serve the user better than suggested ones, even at the cost of visual elegance.

0 repo stars
▌
Readability Line Length · concertonotes bundle
Set line length (measure) for prose — capping the maximum width of body text so lines stay in the 45–75 character range that supports comfortable sustained reading. Use when designing article layouts, documentation, email templates, dashboard copy, or any container that holds paragraphs of prose. Line length is the most fundamental readability decision because it directly affects the reader's eye movement; lines that are too long or too short both cost reading comfort.

0 repo stars
▌
Similarity And Contrast · concertonotes bundle
Apply deliberate dissimilarity (contrast) to distinguish elements that need to be perceived as different — primary vs. secondary actions, normal vs. error states, foreground vs. background, the one important thing vs. the rest. Use when you want to emphasize a single element, distinguish roles, or break up a too-uniform layout. Contrast is similarity's complement: similarity groups, contrast separates. The skill is calibrating contrast so it communicates what matters without creating visual chaos.

0 repo stars
▌
Accessibility Perceivable · concertonotes bundle
Use this skill when the question is whether users can *perceive* the content — see it, hear it, or feel it — regardless of impairment. Trigger when designing color systems, picking text sizes, building image-heavy surfaces, working with video/audio, designing for low-vision users, or running an accessibility audit. Covers WCAG Principle 1 (Perceivable). Sub-aspect of `accessibility`; read that first if you haven't already.

0 repo stars
▌
Prototyping When And What · concertonotes bundle
Use this skill when deciding what to prototype, what fidelity to use, and when to stop prototyping and ship. Trigger when planning research, scoping a design phase, or facing pressure to "stop prototyping and just build it." Sub-aspect of `prototyping`; read that first.

0 repo stars
▌
Aesthetic Usability Effect · concertonotes bundle
Use this skill when the design's perceived quality affects whether users will tolerate friction, give the product a chance, or judge it as well-made — which is most consumer-facing surfaces, marketing, onboarding, first-run, and any moment where an unfamiliar user is forming a quick judgment. Trigger when designing landing pages, sign-up flows, first-time UX, app store screenshots, demo videos, sales decks, or any surface where the user's first impression matters and friction is unavoidable. Also trigger when defending why "polish" matters on a working product, or when the user asks "should we ship the spartan version or invest in design?"

0 repo stars
▌
Immersion Distraction Cost · concertonotes bundle
Recognize and design against the cost of attention fragmentation — the disproportionate damage that even small interruptions do to focused work. Use when designing notification systems, evaluating whether a feature should interrupt the user, planning feature introductions, or auditing a product for unintended attention costs. The cost of breaking immersion is much higher than designers usually estimate; restraint in interruption is one of the most user-respectful design moves.

0 repo stars
▌
Chunking Form Grouping · concertonotes bundle
Use this skill when designing or fixing long forms that ask the user for many fields — sign-up flows, profile setup, settings panels, checkout, intake forms, applications. Trigger when forms exceed ~6 fields, when users complain forms are "too long," when seeing high mid-form drop-off, or when picking how to break a form into sections. Sub-aspect of `chunking`; read that first.

0 repo stars
▌
Progressive Disclosure · concertonotes bundle
Use this skill whenever a design has *more* available than the user needs to see at this moment — settings panels with advanced options, forms with optional fields, dashboards with drill-down detail, navigation with deep IA, dialogs with "More options" affordances, marketing pages with FAQ accordions. Trigger when designing or fixing surfaces that feel "overwhelming," when stakeholders argue about whether to expose every option up front, when novice and expert users have different tolerance for the same surface, or when reviewing a UI cluttered with rarely-used controls. Progressive disclosure is one of the foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003), originally formalized through the Xerox Star user-interface work in the 1970s.

0 repo stars
▌
Affordance False And Anti · concertonotes bundle
Use this skill when designing or fixing controls that mislead users — elements that look interactive but aren't (false affordance), or controls that need to clearly communicate "you can't do that here" (anti-affordance, like disabled states). Trigger when reviewing UIs where users tap inert elements expecting response, when designing disabled states, when picking treatments for read-only fields, or when a "decorative" element is being mistaken for a button. Sub-aspect of `affordance`; read that first.

0 repo stars
▌
Hierarchy Color And Tone · concertonotes bundle
Use this skill when constructing visual hierarchy through color and tone (value, contrast, saturation) — picking which elements get full-color emphasis and which recede into greys, building a tone ladder, and deciding when color should *be* the hierarchy versus when it should *support* a size/weight hierarchy. Trigger when picking the primary color, building a neutral palette, designing a status badge system, or fixing a UI where color is "too loud" or "too flat." Sub-aspect of the broader `hierarchy` principle; read that first if you haven't already.

0 repo stars
▌
Ockhams Equivalent Designs · concertonotes bundle
Identify when two design options are functionally equivalent so the razor can be applied. Use when comparing design alternatives, evaluating whether two implementations of a feature actually produce the same outcome, or recognizing that a complex solution doesn't earn its place against a simpler one. Most design debates involve actual tradeoffs; the razor only cuts when the alternatives genuinely produce equivalent results. The skill is identifying equivalence honestly rather than rationalizing complexity.

0 repo stars
▌
Recognition Over Recall · concertonotes bundle
Use this skill whenever the user must locate or choose something from many possibilities — pickers, command palettes, navigation menus, autocompletes, recents lists, search results, settings panels. Trigger when designing inputs that ask the user to "type the right thing," when picking between dropdowns and search-first interfaces, when reviewing why users keep typing wrong values into autocomplete fields. Recognition Over Recall is one of the foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003) and one of Nielsen's 10 heuristics — recognizing options is far easier than recalling them from memory.

0 repo stars
▌
Expectation Effect Priming · concertonotes bundle
Apply expectation priming — deliberately shaping the prior context (brand, marketing, price, social proof, recommendations) that users bring to a product before they ever touch it. Use when planning a launch, choosing positioning copy, deciding pricing tier, designing the marketing surface, or framing a feature for first encounter. Pre-encounter priming is often more powerful than in-product polish, because it sets the lens through which the in-product experience will be interpreted. The skill is calibrating priming honestly enough to outlast the first session.

0 repo stars
▌
Weakest Link Identification · concertonotes bundle
Apply methods for finding the weakest link in a workflow, system, or feature set. Use when planning a redesign, prioritizing engineering or design investment, auditing a product for quality issues, or beginning any improvement effort. Several methods exist (funnel analysis, journey mapping, failure-mode enumeration, support-pattern review, direct user observation); each surfaces different kinds of weakness, and combining them gives the clearest picture.

0 repo stars
▌
Archetypes Storytelling Arcs · concertonotes bundle
Use this skill when designing narrative content — landing pages, case studies, onboarding flows, marketing campaigns, sales decks, ad arcs. Trigger when picking how to frame a customer story, when writing a launch campaign, or when the user mentions "this campaign feels flat" or "we need a better narrative." Sub-aspect of `archetypes`; read that first.

0 repo stars
▌
80 20 Redesign Targeting · concertonotes bundle
Use this skill when scoping a redesign or refactor — choosing which existing surfaces deserve full attention and which can be left mostly alone. Trigger when the user asks "where should we focus our redesign?", "do we need to redo all of this?", or when planning incremental design improvements with limited capacity. Sub-aspect of `80-20-rule`; read that first.

0 repo stars
▌
Chunking Numeric And Otp · concertonotes bundle
Use this skill when designing inputs or displays for numeric strings — phone numbers, OTP / verification codes, credit card numbers, account IDs, license keys, currency, dates, social security numbers. Trigger when picking a format for displaying numbers, designing OTP entry UIs, or formatting identifiers in tables and receipts. Sub-aspect of `chunking`; read that first.

0 repo stars

1,721 published skills · page 4 of 18