# Juan Manuel Cornejo, Notes

> Designer with 23 years of experience creating human-centered software for AI interfaces, enterprise tools, and human rights technology.

This file concatenates every note vocabulary into a single artifact. Drop it into an LLM context window to give the assistant all the shared vocabulary at once. Per-note Markdown files live at /notes/<slug>.md.

---

# Research vocabulary

> In the age of AI, knowing the words is half the rigour.

Names for the moves and measures of a real study: design, sampling, validity, statistics, sources, reasoning, applied methods.

Source: https://juanmnl.com/notes/research-vocabulary.html

## Study Design

How a study is structured, which shapes how much you can trust its conclusions.

### Hypothesis

A specific, testable prediction the study sets out to confirm or refute.

Say: "State the hypothesis you're testing."

### Null hypothesis

The default "there is no effect/difference" that you try to disprove.

Say: "What's the null hypothesis here?"

### Control vs experimental group

The group that gets no intervention vs the one that does, compared to isolate the effect.

Say: "Was there a proper control group?"

### Randomized controlled trial / RCT

Participants randomly assigned to groups, the strongest design for causal claims.

Say: "Is this from an RCT or just observational?"

### Observational study

Researchers observe without intervening. Can show correlation, rarely causation.

Say: "Flag that this is observational, not causal."

### Longitudinal vs cross-sectional

Longitudinal tracks the same subjects over time; cross-sectional is one point in time.

Say: "Was it longitudinal or a single snapshot?"

### Qualitative vs quantitative

Qual explores meaning (interviews, themes); quant measures (numbers, stats).

Say: "Is the evidence qualitative or quantitative?"

### Blinding

Hiding who's in which group from subjects (single) or also researchers (double) to cut bias.

Say: "Was the study double-blind?"


## Sampling

Who was studied, and whether they represent who you care about.

### Population

The whole group you want conclusions about (e.g. all adults in the US).

Say: "What population does this generalize to?"

### Sample & sample size (n)

The subset actually studied. Bigger, well-chosen samples give more reliable estimates.

Say: "What was the sample size?"

### Random sampling

Selecting subjects by chance so the sample mirrors the population.

Say: "Was the sample randomly drawn?"

### Representative sample

A sample whose makeup matches the population on key traits.

Say: "Is the sample representative or skewed?"

### Selection / sampling bias

When the sample systematically over/under-represents some group, distorting results.

Say: "Could selection bias explain this?"

### Generalizability / external validity

How well findings extend from the sample to the wider world.

Say: "How generalizable is this finding?"


## Variables & Validity

What's measured, what's manipulated, and what might be quietly distorting things.

### Independent variable

The factor the researcher manipulates to see its effect.

Say: "What's the independent variable?"

### Dependent variable

The outcome measured to detect the effect of the independent variable.

Say: "What's the dependent (outcome) variable?"

### Confound / lurking variable

An unaccounted variable that affects both cause and effect, faking a relationship.

Say: "What confounds could explain this?"

### Correlation

Two variables move together. Says nothing about cause on its own.

Say: "Is this just a correlation?"

### Causation

One variable actually produces the change in another. Needs strong design to claim.

Say: "Does the evidence support causation, not just correlation?"

### Validity

Whether the study measures what it claims to measure (the right target).

Say: "Is the measure valid for this question?"

### Reliability

Whether the measurement is consistent and repeatable.

Say: "Is the measure reliable across trials?"


## Statistics

The numbers behind the claim. These let you judge whether a result is real or noise.

### Mean / median / mode

Three "centers." Median resists outliers; mean doesn't.

Say: "Report the median, not just the mean."

### Distribution

The shape of how values spread, the bell curve is the normal distribution.

Say: "What's the distribution shape, is it skewed?"

### Standard deviation

How spread out values are. Small = clustered; large = dispersed.

Say: "What's the standard deviation?"

### p-value

Roughly: the chance of seeing this result if the null were true. Low = unlikely to be flukey. Not "importance."

Say: "Is the result statistically significant (p-value)?"

### Statistical significance

A result unlikely to be random, not the same as large or meaningful.

Say: "Significant, but is the effect big enough to matter?"

### Effect size

How big the difference actually is, the practical magnitude, beyond significance.

Say: "What's the effect size, not just the p-value?"

### Confidence interval

A range the true value likely falls within. Wide = uncertain; narrow = precise.

Say: "Give the confidence interval, not just the point estimate."

### Margin of error

The plus/minus around a poll or estimate from sampling.

Say: "What's the margin of error on that figure?"

### Regression

A model fitting a line/curve to data to estimate relationships and predict.

Say: "Did they control for other variables in the regression?"


## Sources & Literature

Where knowledge comes from and how vetted it is.

### Primary vs secondary source

Primary = the original work; secondary = summaries/coverage. Cite primary for claims.

Say: "Find the primary source for that stat."

### Peer review

Expert vetting before publication, the quality bar for scientific work.

Say: "Is it peer-reviewed?"

### Preprint

Early, unvetted release. Useful but flag it as not yet reviewed.

Say: "Note if it's only a preprint."

### Meta-analysis

A study that statistically combines many studies for a pooled, stronger estimate.

Say: "Is there a meta-analysis on this?"

### Systematic review

A rigorous, transparent survey of all studies on a question.

Say: "Summarize the systematic reviews."

### Citation & impact

References to a work; high citation counts hint at influence (not always quality).

Say: "How well-cited is this paper?"


## Reasoning & Bias

The thinking traps and the tools to avoid them.

### Deductive vs inductive

Deductive applies a rule to a case; inductive infers a pattern from cases.

Say: "Is this reasoning deductive or inductive?"

### Falsifiability

A claim is scientific only if there's evidence that could refute it.

Say: "Is this claim falsifiable?"

### Base rate

The underlying rate a result should be judged against. Ignoring it = base-rate fallacy.

Say: "What's the base rate for context?"

### Confirmation bias

The tendency to notice evidence that fits what you already believe.

Say: "Check this for confirmation bias."

### Publication bias

The literature skews toward exciting/positive findings; null results vanish.

Say: "Could publication bias inflate this effect?"

### Replication

Independent repetition getting the same result, the real test of a finding.

Say: "Has this been replicated?"

### Steelman

Engaging the best form of an opposing argument, not a strawman.

Say: "Steelman the counter-argument first."

### Cherry-picking

Highlighting supportive data while ignoring the rest.

Say: "Is this cherry-picked, or the full picture?"


## Applied / UX Methods

Research techniques you'll meet in product, design, and market work.

### A/B test

Showing two versions to split traffic to see which performs better. An online RCT.

Say: "Was the difference A/B tested for significance?"

### Usability test

Watching real users attempt tasks to find friction in a design.

Say: "Run a usability test on this flow."

### Survey

Standardized questions to many people. Watch wording and sampling bias.

Say: "Design a survey that avoids leading questions."

### Interview

In-depth one-on-one conversation. Rich qualitative insight, small n.

Say: "Draft an interview guide for user research."

### Cohort analysis

Tracking a group who share a start point (e.g. signup month) over time.

Say: "Break retention out by cohort."

### Triangulation

Combining multiple methods/sources so they corroborate each other.

Say: "Triangulate survey data with interviews."

---

# Brand vocabulary

> Brand is a system. Talk about it like one.

Positioning, identity, voice, naming, and brand worlds. The terms that move discovery into a system that survives iteration.

Source: https://juanmnl.com/notes/brand-vocabulary.html

## Logos & Marks

"Logo" is an umbrella. These are the specific forms, and they're not interchangeable.

### Wordmark / logotype

The brand name set in distinctive type, with no separate symbol. Think Google, Coca-Cola.

Say: "Design a clean wordmark, lowercase."

### Lettermark / monogram

Initials only, usually for long names. IBM, HBO, NASA.

Say: "Make a lettermark from the initials in a rounded square."

### Brandmark / symbol · icon

A pictorial or abstract symbol that stands alone, Apple, Nike, Twitter bird.

Say: "Create an abstract symbol that works without the name."

### Combination mark

Symbol + wordmark designed to sit together. Most flexible, parts can be used alone.

Say: "A combination mark: symbol left, wordmark right."

### Emblem

Name locked inside a shape/badge, Starbucks, Harley-Davidson, sports crests.

Say: "Make it an emblem inside a circular badge."

### Mascot

A character that personifies the brand, Duo the owl, the Michelin Man.

Say: "Design a friendly mascot for the brand."

### Lockup

The fixed, approved arrangement of logo elements (spacing, alignment) that shouldn't be rearranged.

Say: "Give me the horizontal and stacked lockups."

### Favicon / app icon

The tiny version for browser tabs and home screens, usually the symbol or monogram.

Say: "Provide a favicon version that reads at 16px."


## Logo Mechanics

The usage rules that keep a logo legible and consistent everywhere.

### Clear space / exclusion zone

The protected margin around the logo that nothing else may enter.

Say: "Define clear space as the height of the 'n'."

### Minimum size

The smallest the logo can appear and still be legible.

Say: "Set a minimum size of 24px tall for digital."

### Responsive logo

Simplified variants for small spaces, full lockup → symbol → monogram.

Say: "Make a responsive logo system that scales down to just the symbol."

### Color variants

Approved full-color, mono (black/white), and reversed (knockout) versions.

Say: "Provide full-color, one-color, and reversed versions."

### Misuse / don'ts

Explicit examples of what not to do, stretch, recolor, add effects, rotate.

Say: "Add a 'logo misuse' page with don't examples."

### Safe area / aspect

The icon's bounding proportions so it sits correctly in app stores and avatars.

Say: "Keep the app icon within the safe area, 1:1."


## Color

A brand palette is a system with roles, not just a set of nice colors.

### Primary color

The dominant, signature brand color used most and most recognizably.

Say: "Pick one primary brand color."

### Secondary palette

Supporting colors that extend the system for variety and hierarchy.

Say: "Add two secondary colors that pair with the primary."

### Accent

A pop color used sparingly for emphasis, buttons, highlights, links.

Say: "Use a bright accent only for CTAs."

### Neutrals

The grays/off-whites for text, backgrounds, and surfaces.

Say: "Build a neutral ramp for text and backgrounds."

### Tints & shades

Lighter and darker steps of a hue for states and depth.

Say: "Generate tints and shades of the primary."

### Gradient

A signature color blend that becomes part of the brand's look.

Say: "Create a brand gradient from primary to accent."

### Color meaning

The emotional associations a palette signals, warmth, trust, luxury, energy.

Say: "Pick colors that feel warm and trustworthy."

### Color codes

Exact values per medium: HEX/RGB for screen, CMYK/Pantone for print.

Say: "Spec each color in HEX, RGB, and Pantone."


## Typography

Type carries as much brand personality as color. Name the roles.

### Brand typeface

The primary font that expresses the brand's character across everything.

Say: "Recommend a brand typeface that feels modern but warm."

### Display / headline face

A characterful font for large sizes, headlines, posters, hero text.

Say: "Use a bold display face for headlines."

### Body / text face

A highly legible font for running text and UI.

Say: "Pair it with a clean, readable body font."

### Type pairing

A deliberate combination of display + body that contrast yet harmonize.

Say: "Suggest a display + body pairing and explain why they work."

### Type scale / hierarchy

The defined set of sizes/weights for H1, H2, body, caption.

Say: "Define a type scale for the brand."

### Web / licensed fonts

Whether fonts are free (Google) or licensed, plus a fallback stack.

Say: "Prefer a free Google Font with a system fallback."


## Visual Elements

The supporting kit that makes a brand recognizable beyond the logo.

### Pattern

A repeatable graphic used as a background or fill, derived from the logo or motif.

Say: "Create a brand pattern from the symbol."

### Texture

A tactile surface quality, grain, paper, noise, gradient mesh.

Say: "Add a subtle grain texture to backgrounds."

### Iconography

A consistent icon style (stroke weight, corners) that matches the brand.

Say: "Define an icon style: 2px stroke, rounded ends."

### Imagery / art direction

Rules for photography/illustration, subject, lighting, mood, treatment.

Say: "Set an art direction for photography: candid, warm light."

### Graphic device / motif

A recurring shape or visual signature (a swoosh, a corner cut, a dot).

Say: "Use a recurring arc as a graphic device."

### Grid / layout system

The underlying grid that gives all layouts a consistent rhythm.

Say: "Define a 12-column grid for brand layouts."


## Strategy Terms

The thinking words. (For the full set, see the Claude-for-Branding tips sheet.)

### Positioning

How the brand is differentiated and slotted in the customer's mind vs alternatives.

Say: "Write our positioning statement."

### Value proposition

The clear benefit you offer, in the customer's terms.

Say: "Draft a value prop focused on the outcome."

### Brand archetype

A personality pattern (Sage, Hero, Rebel…) giving the brand consistent character.

Say: "Which archetype fits us?"

### Tagline

A short, memorable line capturing the brand promise.

Say: "Give me 10 tagline options under 5 words."

### Brand voice

The consistent personality of the brand's writing, defined by adjectives.

Say: "Define our voice in 3 adjectives with examples."

### Brand pillars

The 3,5 core attributes everything ladders up to.

Say: "Propose four brand pillars."


## Applications

Where the brand actually lives. Naming the surface gets you the right deliverable.

### Stationery

Business cards, letterhead, envelopes, the classic identity suite.

Say: "Design business card and letterhead."

### Collateral

Marketing materials: decks, brochures, one-pagers, flyers.

Say: "Create a branded pitch deck template."

### Packaging

Physical product packaging, boxes, labels, bags.

Say: "Show the brand applied to product packaging."

### Social templates

Reusable post/story layouts that keep social on-brand.

Say: "Make Instagram post and story templates."

### Mockup

The brand shown on a realistic surface (phone, signage, tote) to test it in context.

Say: "Mock the logo up on a storefront sign."

### Brand guidelines

The master document with all rules: logo, color, type, voice, do/don'ts.

Say: "Compile everything into brand guidelines."

---

# Web design vocabulary

> How the web actually fits together. Names for the moves.

Layout, type, motion, components, accessibility, performance, and the seams that hold them. Each term with what it does and how to say it.

Source: https://juanmnl.com/notes/web-vocabulary.html

## Page Anatomy

The named regions of a web page, top to bottom.

### Header

The top strip, usually holding the logo and primary navigation. Often sticky.

Say: "Put the logo and nav in a sticky header."

### Navbar

The navigation bar, links to top-level destinations, plus a key action.

Say: "Navbar: logo left, links center, CTA right."

### Hamburger menu

The three-line icon that opens nav on small screens.

Say: "Collapse the nav into a hamburger on mobile."

### Hero

The big top section: headline, subtext, and a main call-to-action.

Say: "Add a hero with one headline and one CTA."

### Above the fold

What's visible before scrolling. Prime real estate for your key message.

Say: "Keep the signup form above the fold."

### Section / content block

A full-width horizontal band of related content down the page.

Say: "Break the landing page into alternating sections."

### Sidebar

A vertical column beside the main content for nav, filters, or meta.

Say: "Add a left sidebar for docs navigation."

### Footer

The bottom region with secondary links, legal, and contact.

Say: "Add a footer with link columns and a newsletter field."


## Layout & CSS Concepts

The terms that make a page respond, align, and stack correctly. Speaking these gets you robust layouts.

### Viewport

The visible area of the browser/screen. Layouts adapt to its width and height.

Say: "Make it full-viewport height (100vh) hero."

### Responsive

Layout that adapts fluidly across phone, tablet, and desktop sizes.

Say: "Make the whole page responsive, mobile-first."

### Breakpoint

A screen width where the layout changes (e.g. 1→2→3 columns).

Say: "Switch to 3 columns at the 1024px breakpoint."

### CSS Grid

Two-dimensional layout in rows and columns, best for page-level structure.

Say: "Use CSS grid, 3 columns with 24px gaps."

### Flexbox

One-dimensional layout along a row or column, great for toolbars and alignment.

Say: "Lay the nav out with flexbox, space-between."

### Container & max-width

A centered wrapper that caps content width on large screens.

Say: "Constrain content to a 1200px centered container."

### Gutter

The space between columns in a grid.

Say: "Increase the gutter between cards."

### Whitespace / negative space

Empty space that gives content room to breathe, a feature, not waste.

Say: "Add generous whitespace around sections."

### Sticky / fixed

Sticky stays as you scroll within its parent; fixed pins to the viewport.

Say: "Make the nav sticky to the top on scroll."

### z-index / stacking

Which overlapping element sits on top. Higher z-index = front.

Say: "Put the modal above everything with a high z-index."


## Web Typography

Type on the web has its own units and rules.

### Web font vs system font

A loaded custom font vs the device's default stack (faster, no download).

Say: "Use a web font with a system-font fallback."

### rem / em / px

Sizing units: px is fixed; rem scales to the root; em to the parent. rem is the responsive default.

Say: "Size type in rem so it scales with user settings."

### Line length / measure

Characters per line. ~50,75 reads best; too wide tires the eye.

Say: "Cap body text at ~65 characters per line."

### Line height / leading

Vertical space between lines. ~1.5 for body keeps text legible.

Say: "Set body line-height to 1.6."

### Vertical rhythm

Consistent vertical spacing so text sits on a regular baseline grid.

Say: "Keep a consistent vertical rhythm down the page."

### Fluid / responsive type

Type that scales smoothly with viewport width (often via CSS clamp()).

Say: "Make the headline fluid with clamp()."


## Media & Assets

Images, icons, and the tags that make them fast and crisp.

### Favicon

The tiny icon in the browser tab and bookmarks.

Say: "Add a favicon and apple-touch-icon."

### OG image / social preview

The image (and meta) shown when a link is shared on social/chat.

Say: "Set an Open Graph image for link previews."

### Retina / 2x

Higher-resolution assets so images stay sharp on dense displays.

Say: "Export assets at 2x for retina screens."

### Responsive images / srcset

Serving differently sized images per screen so phones don't load desktop files.

Say: "Use srcset to serve right-sized images."

### Lazy loading

Deferring off-screen images until needed, speeding up first load.

Say: "Lazy-load images below the fold."

### SVG vs raster

SVG scales infinitely (logos, icons); JPG/PNG/WebP are pixel-based (photos).

Say: "Use SVG for icons, WebP for photos."

### Aspect ratio

Width:height proportion locked so media doesn't distort or shift layout.

Say: "Lock thumbnails to a 16:9 aspect ratio."

### Background image / overlay

A full-bleed image behind content, often with a dark overlay for text legibility.

Say: "Hero with a background image and a 40% dark overlay."


## Interaction & Motion

How a web page responds to scroll, hover, and clicks.

### Hover state

The visual change when a cursor is over an element. Desktop only, design taps for mobile.

Say: "On hover, lift the card with a shadow."

### Scroll animation / reveal

Elements animate into view as they enter the viewport.

Say: "Fade sections in as they scroll into view."

### Parallax

Background scrolls slower than foreground for a depth effect.

Say: "Add a subtle parallax to the hero."

### Smooth scroll / anchor

Clicking a nav link glides to a section instead of jumping.

Say: "Make nav links smooth-scroll to anchors."

### Infinite scroll

New content loads automatically as you near the page end.

Say: "Use infinite scroll for the feed."

### Skeleton / loading

Placeholder shapes shown while content loads.

Say: "Show skeletons while data loads."

### Lightbox / modal

Clicking an image opens it enlarged over a dimmed backdrop.

Say: "Open gallery images in a lightbox."

### Sticky CTA bar

A persistent action bar pinned to the bottom/top as you scroll.

Say: "Add a sticky bottom CTA bar on mobile."


## Performance & SEO

The terms for making a page fast and findable, increasingly part of "design."

### Semantic HTML

Using meaningful tags (not just divs) so browsers, SEO, and screen readers understand structure.

Say: "Use semantic HTML5 elements."

### Alt text

Text describing an image for screen readers and when images fail to load.

Say: "Add descriptive alt text to every image."

### Meta title & description

The title/snippet shown in search results and tabs. Key for SEO and click-through.

Say: "Write meta title and description for SEO."

### Core Web Vitals / LCP, CLS

Google's load-speed, layout-stability, and responsiveness metrics that affect ranking.

Say: "Optimize for Core Web Vitals (LCP under 2.5s)."

### Mobile-first

Designing for the small screen first, then enhancing up. Matches how most people browse.

Say: "Design mobile-first, then scale up."

### Accessibility / a11y

Making the site usable for everyone, contrast, keyboard nav, focus, ARIA labels.

Say: "Make it accessible: contrast, focus states, ARIA."


## Page Patterns

Whole-page web archetypes and reading patterns. Naming one saves a paragraph.

### Landing page

A single focused page built to convert one audience toward one action.

Say: "Build a landing page with one clear CTA."

### One-pager

A whole site/story on one scrolling page, navigated by anchors.

Say: "Make it a one-pager with anchor nav."

### Hero + feature grid

The classic marketing layout: hero, then a grid of feature cards.

Say: "Hero, then a 3-up feature grid, then pricing."

### Article / blog layout

A single readable column with a title, meta, and flowing body text.

Say: "Use a centered single-column article layout."

### F-pattern

How people scan text-heavy pages, across the top, then down the left. Put key info there.

Say: "Lay out content for the F-pattern scan."

### Z-pattern

The eye's path on simple pages, top-left → top-right → diagonal → bottom. Place logo, CTA, action along it.

Say: "Arrange the hero on a Z-pattern."

---

# UI Design vocabulary

> Names for every visible piece of an interface.

Names for every visible piece of an interface, with mini demos, so you can describe what you want without guessing. Buttons, fields, surfaces, navigation, feedback, motion, and more.

Source: https://juanmnl.com/notes/ui-vocabulary.html

## Frames, Groups & Auto Layout

The building blocks of the canvas itself, how design tools (Figma, Sketch, XD) organize what you draw. Use these and an AI knows structure, not just appearance.

### Frame

A container with its own bounds, layout rules, and clipping. The foundation of everything, screens, cards, and components are all frames. Like a <div> in code.

Say: "Put this inside a frame sized to 390×844 (mobile)."

### Group

Loosely binds layers so they move/scale together. Unlike a frame, it has no layout, padding, or clipping, it's just a selection wrapper (⌘G).

Say: "Group these icons so they move as one."

### Auto Layout / stack

A frame that arranges children in a row or column with set gap, padding, and alignment, resizing as content changes. Figma's version of flexbox; called a "stack" in other tools.

Say: "Make this an auto-layout frame, vertical, 12px gap, 16px padding."

### HStack / VStack

Horizontal stack (row) and vertical stack (column). SwiftUI/Figma naming for the direction an auto-layout flows.

Say: "Wrap the buttons in an HStack, the form in a VStack."

### Constraints / resizing

Rules pinning a layer to its parent's edges/center as the parent resizes (left, right, top, scale, fixed).

Say: "Pin the close button to the top-right with constraints."

### Component / main · primary

A reusable master element. Edit the main component and every instance updates. The source of truth for buttons, cards, etc.

Say: "Turn this card into a reusable component."

### Instance

A live copy of a component placed in your design. Inherits from the main but can override text, color, etc.

Say: "Drop three instances of the button component."

### Variant

Variations of one component packaged together (size, state, type) and switched via properties.

Say: "Add variants for default / hover / disabled."

### Component set / properties

The container holding all variants, exposing props (toggles, dropdowns, text) to configure an instance.

Say: "Expose a boolean prop to show/hide the icon."

### Layer

Any single object on the canvas (shape, text, image). The layers panel shows their stacking order & nesting.

Say: "Rename the layers and order them logically."

### Section / page

Organizational wrappers for the canvas: sections group related frames; pages separate big chunks of a file.

Say: "Put these flows in a section called 'Onboarding'."

### Mask & boolean

Mask clips a layer to a shape; boolean ops (union, subtract, intersect) combine shapes into one.

Say: "Mask the photo into a circle."

### Detach / flatten

Detach breaks an instance's link to its component (becomes plain layers). Flatten merges layers into one shape.

Say: "Detach this instance so I can edit it freely."


## Layout & Structure

How the screen is divided. These are the bones everything else sits on.

### Container / wrapper

A max-width box that centers content and keeps it from stretching edge-to-edge on wide screens.

Say: "Wrap the content in a centered container, max-width 1100px."

### Grid

Content arranged in rows & columns. Define by column count or by minimum card width that auto-wraps.

Say: "Lay these out in a 3-column responsive grid."

### Stack / vertical flex

Items stacked vertically with consistent spacing between them.

Say: "Stack these vertically with 16px gap."

### Row / horizontal flex

Items in a horizontal line, often with space-between or centered alignment.

Say: "Put these in a row, spaced evenly, vertically centered."

### Sidebar layout

A fixed-width navigation/tools panel beside the main content area.

Say: "Use a left sidebar nav with the main content on the right."

### Holy grail layout

Header, footer, and a 3-column body (left nav, content, right rail), the classic app shell.

Say: "Header + footer with a 3-column body."

### Hero section

The large, attention-grabbing top section of a landing page, headline, subtext, CTA.

Say: "Add a hero with a big headline, subtitle, and CTA."

### Section / band

A full-width horizontal slice of a page, often alternating background colors.

Say: "Break the page into sections with alternating backgrounds."

### Column / split

Two side-by-side halves, e.g. text on the left, image on the right.

Say: "Make it a two-column split: copy left, image right."

### Masonry

A Pinterest-style grid where cards have varying heights and pack tightly.

Say: "Use a masonry layout for these image cards."


## Navigation

How people move around the product.

### Navbar / top nav · header

The persistent bar across the top with logo, links, and key actions.

Say: "Sticky navbar: logo left, links center, CTA right."

### Tab bar

Switches between views within the same screen. Bottom tabs on mobile, top tabs on desktop.

Say: "Add tabs for Overview / Activity / Settings."

### Breadcrumb

A trail showing where you are in the hierarchy, with each level clickable.

Say: "Add a breadcrumb above the page title."

### Sidebar nav

A vertical list of destinations down the side, often with icons + labels.

Say: "Left sidebar nav with icon + label items, active state highlighted."

### Drawer / off-canvas

A panel that slides in from an edge, common for mobile menus or filters.

Say: "Hamburger opens a drawer that slides in from the left."

### Pagination

Numbered page controls for splitting long lists across pages.

Say: "Paginate the results, 20 per page."

### Dropdown menu

A list of actions/links that appears when you click a trigger.

Say: "Profile avatar opens a dropdown menu with Settings and Log out."

### Mega menu

A large multi-column dropdown for sites with lots of categories.

Say: "Products opens a mega menu grouped into 3 columns."


## Containers & Surfaces

Boxes that hold and reveal content.

### Card

A self-contained block of related content with its own padding, border/shadow, and corners.

Say: "Show each item as a card with image, title, and description."

### Modal / dialog

A focused window over a dimmed backdrop that blocks the rest of the UI until dismissed.

Say: "Open a modal to confirm before deleting."

### Bottom sheet

A panel that slides up from the bottom (mobile-friendly modal alternative).

Say: "On mobile, show the options in a bottom sheet."

### Popover

A small floating panel anchored to an element, richer than a tooltip, can hold buttons.

Say: "Clicking the icon opens a popover with quick settings."

### Tooltip

Tiny text label on hover/focus that explains an element. No interaction inside.

Say: "Add a tooltip on the icon explaining what it does."

### Accordion

Stacked rows that expand/collapse to reveal content. Great for FAQs.

Say: "Turn the FAQ into an accordion, one open at a time."

### Panel

A general bordered region grouping related controls or info.

Say: "Group the filters into a panel on the side."

### Tabs (panel)

Tab strip plus the content area that swaps below it.

Say: "Split the detail view into tabbed sections."


## Inputs & Forms

How users give the product information.

### Text field / input

Single-line entry. Has a label, placeholder, and often helper or error text.

Say: "Email text field with label and placeholder."

### Textarea

Multi-line text entry that can grow with content.

Say: "Add a textarea for the description, 4 rows."

### Select / dropdown

Pick one value from a list that opens on click.

Say: "Country picker as a searchable select."

### Checkbox

Toggle for independent on/off choices; multiple can be selected.

Say: "Checkbox list, users can pick several."

### Radio buttons

Pick exactly one from a small set of mutually exclusive options.

Say: "Radio group for plan: Monthly or Yearly."

### Toggle / switch

Instant on/off control for a setting, applies immediately, no Save needed.

Say: "Add a toggle to enable dark mode."

### Slider

Drag along a track to set a value within a range.

Say: "Price range slider from $0 to $500."

### Stepper

Numeric input with increment/decrement buttons. Good for quantities.

Say: "Quantity stepper with + and − buttons."

### Segmented control

A small set of options shown side-by-side; one selected at a time.

Say: "Segmented control for Day / Week / Month."

### Search field

Text input styled with a magnifier icon, often with live results.

Say: "Search bar with icon and live filtering."

### Date picker

Calendar UI for choosing a date or range.

Say: "Date range picker for the report filters."

### File upload / dropzone

Area to drag-and-drop or browse for files.

Say: "Add a drag-and-drop file upload zone."


## Buttons & Actions

Naming buttons by hierarchy is the single biggest upgrade to your AI prompts.

### Primary button / CTA

The one main action on a screen. Filled, high-contrast, there should usually be only one.

Say: "Make 'Save' the primary button."

### Secondary button

A supporting action. Outlined or subtle so it doesn't compete with the primary.

Say: "Cancel as a secondary (outlined) button."

### Ghost / text button

Lowest-emphasis action, text only, no fill or border.

Say: "Make it a ghost button so it's subtle."

### Destructive button

Signals a dangerous/irreversible action, usually red.

Say: "Delete should be a destructive (red) button."

### Icon button

A button that's just an icon, for compact toolbars. Needs a tooltip/label for clarity.

Say: "Use icon buttons for edit and delete in each row."

### FAB / floating action button

A circular button floating over content for the primary action (e.g. compose, add).

Say: "Add a FAB in the bottom-right to create a new item."

### Button group

Related buttons joined into one connected unit.

Say: "Group the prev/next buttons together."

### Split button

A primary action plus a dropdown caret for related variants (Save / Save as…).

Say: "Make Save a split button with a dropdown for other options."


## Data Display

Showing information, status, and identity.

### Table / data grid

Rows & columns of structured data, often sortable/filterable.

Say: "Show users in a sortable table with name, role, status."

### List / list item

Vertically stacked rows, each with text and maybe an avatar/icon/action.

Say: "Render results as a list with avatar, title, and subtitle."

### Badge / count

A small number/dot overlay signaling unread or new items.

Say: "Add a notification badge with the unread count."

### Tag / chip

Compact labels for categories, filters, or selections (chips can be removable).

Say: "Show categories as removable chips."

### Avatar

A user's picture or initials. Multiple overlapped = an avatar stack/group.

Say: "Show team members as an overlapping avatar stack."

### Progress bar

Horizontal fill showing completion of a task or value.

Say: "Add a progress bar for the upload."

### Stat / metric / KPI

A big number with a label and trend, for dashboards.

Say: "Top row of stat cards: revenue, users, churn."

### Skeleton loader

Gray placeholder shapes that mimic content while it loads.

Say: "Show skeleton loaders while data is fetching."

### Status indicator

### Timeline / activity feed

Chronological list of events connected by a vertical line.

Say: "Show recent activity as a timeline."


## Feedback & Status

How the product talks back, confirmations, warnings, waiting, emptiness.

### Toast / snackbar

A brief message that pops up and auto-dismisses, usually a corner.

Say: "Show a success toast after saving."

### Alert (inline)

A colored box giving info/success/warning/error, placed inline with content.

Say: "Show an inline error alert above the form."

### Banner

A full-width message strip at the top of the page or section.

Say: "Add a dismissible announcement banner up top."

### Spinner / loader

Animated indicator for indeterminate waiting.

Say: "Show a spinner while the request is loading."

### Empty state

What shows when there's no data, icon, message, and a way forward.

Say: "Design an empty state with an illustration and a CTA."

### Progress / loading bar

A determinate bar showing how far along a process is.

Say: "Add a top loading bar for page transitions."

### Confirmation dialog

A modal asking the user to confirm before a consequential action.

Say: "Add a confirm dialog before deleting."

### Tooltip / hint

Lightweight guidance pointing at how something works.

Say: "Add helper text under the field."


## Typography

Naming text roles & the type scale gets you consistent hierarchy.

### Type scale

The fixed set of font sizes used across the UI (e.g. 12 / 14 / 16 / 20 / 32).

Say: "Stick to a consistent type scale."

### Heading (H1,H6)

Hierarchical titles. H1 is the page title; H2/H3 are sections.

Say: "Make this an H2, not body text."

### Body text

Default reading text. Usually 14,16px with comfortable line-height.

Say: "Body text at 16px with 1.6 line-height."

### Caption / label / overline

Small supporting text, labels above fields, captions under images, tiny overlines above headings.

Say: "Add a small uppercase overline above the heading."

### Weight

How thick the strokes are. Used to create emphasis without changing size.

Say: "Make the label semibold, not bold."

### Leading & tracking

Leading = line spacing. Tracking = letter spacing. Both affect readability & density.

Say: "Increase line-height and tighten letter-spacing on the headline."

### Truncation / ellipsis

Cutting overflowing text with "…" to keep layouts tidy.

Say: "Truncate the title to one line with ellipsis."

### Monospace

Fixed-width font for code, numbers, or technical content.

Say: "Show the code snippet in a monospace block."


## Color & Design Tokens

Tokens are named values (not raw hex). Say "use the danger token," not "make it #f00."

### Primary / brand

Your main brand color, used for primary actions and accents.

Say: "Use the brand primary for the main CTA."

### Semantic colors

Colors with meaning: success, warning, danger/error, info.

Say: "Errors use the danger color, tips use info."

### Neutral / gray scale

The grays for text, borders, backgrounds and surfaces.

Say: "Build a neutral scale from 50 to 900."

### Tints & shades

Lighter (tint) and darker (shade) steps of one hue for states & hierarchy.

Say: "Use a lighter tint of the primary for the hover state."

### Surface / background / foreground

Layering tokens: background (page), surface (cards), foreground (text/icons).

Say: "Cards sit on surface; page uses background."

### Opacity / alpha

See-through versions of a color for overlays, hovers, and disabled states.

Say: "Use the primary at 10% opacity for the chip background."

### Gradient

A smooth blend between colors, linear or radial.

Say: "Give the hero a subtle linear gradient background."

### Dark / light mode

Two themes driven by the same tokens so colors swap automatically.

Say: "Support dark and light mode via tokens."


## Spacing & Sizing

The invisible structure. Most "off" designs are really spacing problems.

### Padding

Space inside an element, between its border and content.

Say: "Add 16px padding inside the card."

### Margin

Space outside an element, pushing neighbors away.

Say: "Add more margin between sections."

### Gap

Even spacing between items in a flex/grid layout.

Say: "Set a 24px gap between grid items."

### Spacing scale

A consistent set of spacing steps (4, 8, 12, 16, 24, 32…) used everywhere.

Say: "Use an 8px spacing scale."

### Border radius

How rounded corners are, from sharp to fully circular (pill).

Say: "Use a 12px radius on cards, pill-shaped buttons."

### Elevation / shadow

Drop shadows that imply how "high" an element floats above the page.

Say: "Raise the modal with a larger elevation shadow."

### Breakpoints / responsive

Screen-width thresholds where the layout changes (mobile / tablet / desktop).

Say: "Single column on mobile, 3 columns on desktop."

### Aspect ratio

The width:height proportion of an element (1:1, 16:9, 4:3).

Say: "Keep thumbnails at a 16:9 aspect ratio."


## States & Interaction

Every interactive element has multiple looks. Naming them prevents "why doesn't it react?"

### Default / rest

The normal, untouched appearance.

Say: "This is the default/rest state."

### Hover

When the cursor is over it, usually a subtle color/lift change.

Say: "On hover, darken slightly and lift 1px."

### Focus

When selected via keyboard/click, shows a focus ring (key for accessibility).

Say: "Add a visible focus ring for keyboard users."

### Active / pressed

The moment of being clicked/tapped or the currently selected item.

Say: "Active state fills with the primary color."

### Disabled

Not interactive, faded and non-clickable.

Say: "Disable Submit until the form is valid."

### Loading

An in-progress state, often a spinner replacing the label.

Say: "Show a loading spinner in the button while submitting."

### Error / invalid

A field that failed validation, red border plus a message.

Say: "Show an error state with a message below the field."

### Selected / checked

Indicates the current choice in a set (cards, options, rows).

Say: "Highlight the selected plan card with a border."


## Motion & Effects

How things move. Name the motion and the easing for results that feel right.

### Transition

A smooth change between two states (color, size, position) over a duration.

Say: "Transition the color over 150ms on hover."

### Fade in / out

Animating opacity to make elements appear/disappear softly.

Say: "Fade the modal in over 200ms."

### Slide

Moving an element in from an edge (drawers, sheets, toasts).

Say: "Slide the panel in from the right."

### Scale / zoom

Growing or shrinking, often for pop-in or hover emphasis.

Say: "Scale the card up slightly on hover."

### Easing

The acceleration curve, ease-in-out, spring, bounce, that makes motion feel natural.

Say: "Use an ease-out curve, not linear."

### Hover lift / glow

A raise + shadow (or glow) on hover to signal interactivity.

Say: "On hover, lift the card with a soft shadow."

### Parallax

Background and foreground scroll at different speeds for depth.

Say: "Add a subtle parallax to the hero background."

### Micro-interaction

A tiny purposeful animation responding to an action (a checkmark popping, heart filling).

Say: "Add a little check animation when the task completes."


## Page Patterns

Whole-screen archetypes. Naming the pattern saves a paragraph of description.

### Dashboard

Overview screen of stats, charts, and recent activity at a glance.

Say: "Build a dashboard with KPI cards on top and a chart below."

### Master,detail

A list on one side; selecting an item shows its details on the other (like email).

Say: "Use a master-detail layout: list left, detail right."

### Feed

An endlessly scrolling stream of posts/cards.

Say: "Make it an infinite-scroll feed of cards."

### Settings page

Grouped rows of options, each with a label and a control.

Say: "Settings page grouped into sections with toggles."

### Wizard / multi-step

A flow split into sequential steps with a progress indicator.

Say: "Make onboarding a 3-step wizard with a progress bar."

### Pricing page

Side-by-side plan cards, often with one "most popular" highlighted.

Say: "3-tier pricing with the middle plan highlighted."

### Auth / login

A focused, centered form for sign in / sign up.

Say: "Centered login card with email, password, and SSO buttons."

### Detail / profile page

A header with identity + key info, then tabs/sections of details.

Say: "Profile page: avatar header, then tabbed sections."


## Style & Aesthetic Words

When you want a vibe, these adjectives steer the look far better than "modern" or "clean."

### Minimal

Lots of whitespace, few colors, restrained type. "Less, but better."

### Glassmorphism

Frosted, semi-transparent blurred panels over colorful backgrounds.

### Neumorphism

Soft, extruded shapes with dual inner/outer shadows, looks "pressed into" the surface.

### Brutalist

Raw, high-contrast, bold borders, monospace, intentionally "undesigned."

### Flat

No shadows or gradients, solid colors and simple shapes.

### Material

Google's system: elevation shadows, bold color, ink ripples.

### Skeuomorphic

Mimics real-world textures and objects (leather, paper, knobs).

### Editorial

Magazine-like: strong typography, big imagery, generous columns.

### Playful

Rounded shapes, bright colors, bouncy motion, friendly tone.

### Corporate / enterprise

Dense, information-rich, conservative palette, tables everywhere.

### Dark / moody

Dark surfaces, glowing accents, high contrast, like this page.

### Retro / Y2K

Nostalgic, gradients, pixel fonts, chrome, early-web energy.

---

# Frontend vocabulary

> The words under the UI. Components, state, data, tooling.

UI vocabulary names what you see; frontend vocabulary names how it is wired. Components, state, data, routing, styling, tooling, quality. The terms that turn a feature request into buildable instructions.

Source: https://juanmnl.com/notes/frontend-vocabulary.html

## Building Blocks

The atoms of a modern frontend. Everything you see is made of these.

### Component

A self-contained, reusable piece of UI with its own logic and markup. The core unit of React, Vue, Svelte.

Say: "Build this as a reusable Button component."

### Props

Inputs passed into a component to configure it, like function arguments for UI.

Say: "Add a 'variant' prop for primary/secondary."

### State

Data a component owns that can change over time and triggers a re-render when it does.

Say: "Track the open/closed state locally."

### Children / slot

Content passed between a component's tags, rendered wherever it defines a slot.

Say: "Let the card accept arbitrary children."

### Render

The process of turning component code + data into actual on-screen elements.

Say: "Render the list from the items array."

### JSX / markup

The HTML-like syntax (JSX in React) used to describe what a component outputs.

Say: "Write the markup in JSX."

### Component tree

The nested hierarchy of components that makes up a screen.

Say: "Show me the component tree for this page."

### Conditional / list rendering

Showing elements based on a condition, or one per item in a collection.

Say: "Render a row for each item, hide when empty."


## State & Data Flow

Where data lives and how it moves. Naming this is how you spec interactive behavior.

### Local vs global state

Local = owned by one component; global = shared app-wide (cart, user, theme).

Say: "Keep this local, but put the user in global state."

### Lifting state up

Moving shared state to the closest common parent so siblings can both use it.

Say: "Lift the selected state up to the parent."

### Prop drilling

Passing data through many layers of components, a smell that often calls for context/store.

Say: "This is prop-drilling, use context instead."

### Context / provider

A way to share values with a subtree without passing props at every level.

Say: "Provide the theme via context."

### Store / state management

A central place for app-wide state (Redux, Zustand, Pinia) with predictable updates.

Say: "Manage cart state in a global store."

### Derived / computed state

Values calculated from existing state rather than stored separately (avoids drift).

Say: "Compute the total, don't store it in state."

### Side effect

Work outside rendering, fetching, subscriptions, timers, that runs after render.

Say: "Fetch data in an effect when the id changes."

### Hook

Reusable functions that add state/lifecycle/logic to components (React), start with use.

Say: "Extract this into a custom useFetch hook."

### Controlled vs uncontrolled

Controlled inputs are driven by state; uncontrolled keep their own internal value.

Say: "Make the form inputs controlled."


## Data & Networking

Getting data in and out, and handling the inevitable waiting and failing.

### API call / fetch

Requesting data from a server over the network.

Say: "Fetch the users from /api/users on load."

### REST vs GraphQL

REST = endpoints per resource; GraphQL = one endpoint, you ask for exactly the fields you need.

Say: "Is the API REST or GraphQL?"

### async / await

Syntax for handling operations that take time (network, files) without blocking.

Say: "Make the loader async/await."

### Loading / error / success

The three states every async UI needs. Always design all three, not just the happy path.

Say: "Handle loading, error, and empty states."

### Caching / revalidation

Reusing fetched data instead of re-requesting; revalidating when it goes stale (React Query, SWR).

Say: "Cache the results with React Query."

### Optimistic update

Showing the change instantly and rolling back if the server rejects it, feels fast.

Say: "Make the like button optimistic."

### CSR / SSR / SSG

Where pages render: in the browser (CSR), on the server per request (SSR), or prebuilt (SSG).

Say: "Server-render this page for SEO."

### Hydration

Attaching JavaScript to server-rendered HTML so it becomes interactive.

Say: "Watch for hydration mismatches."


## Routing & Navigation

How URLs map to screens in a frontend app.

### Route

A URL pattern mapped to a specific page/component.

Say: "Add a route for /settings."

### SPA / client-side routing

A single-page app swaps views in the browser instead of loading new HTML pages.

Say: "Make it an SPA with client-side routing."

### Dynamic route / param

A route with a variable segment, so one page serves many items.

Say: "Use a dynamic route for each product id."

### Query params

Key-value pairs after ? in the URL, filters, sorts, page numbers.

Say: "Keep the filters in query params."

### Redirect / guard

Sending users elsewhere (e.g. to login if not authenticated) before a route loads.

Say: "Redirect to /login if not authenticated."

### Code splitting / lazy route

Loading a route's code only when visited, shrinking the initial bundle.

Say: "Code-split the admin routes."


## Styling Approaches

The many ways to apply CSS in a frontend. Name the one your project uses.

### Utility classes / Tailwind

Composing styles from tiny single-purpose classes right in the markup.

Say: "Style it with Tailwind utility classes."

### CSS-in-JS

Writing scoped CSS inside JS, co-located with the component (styled-components, Emotion).

Say: "Use CSS-in-JS for the component styles."

### CSS Modules

Locally-scoped CSS files so class names never collide across components.

Say: "Scope styles with CSS Modules."

### Design tokens / CSS variables

Named, reusable values for color/spacing/type that drive consistent, themeable styling.

Say: "Drive colors from CSS variable tokens."

### Theme / dark mode

Swapping a token set to restyle the whole app (light/dark, brands).

Say: "Add a dark theme driven by tokens."

### Specificity / cascade

The rules deciding which CSS wins when several target the same element.

Say: "This is a specificity conflict, refactor it."


## Frameworks & Tooling

The ecosystem that turns your code into a running app.

### Framework

The library that structures your UI (React, Vue, Svelte, Angular). Name yours so output fits.

Say: "Build it in React 19 with TypeScript."

### Meta-framework

A framework on top of React/Vue adding routing, SSR, and build conventions.

Say: "Use Next.js with the app router."

### Bundler / build

Tools (Vite, webpack, esbuild) that compile and package your code for the browser.

Say: "Set it up with Vite."

### Transpile

Converting newer or non-browser syntax (TS, JSX) into JS browsers understand.

Say: "Transpile the TypeScript to ES2020."

### Package / npm

Reusable third-party code installed from a registry and tracked in package.json.

Say: "Don't add new packages for this."

### Dev server / hot reload

A local server that refreshes the browser instantly as you edit (HMR).

Say: "Run the dev server with hot reload."

### TypeScript / types

A typed layer over JS that catches errors before runtime and documents shapes.

Say: "Type the props, no any."

### Linter / formatter

Tools that catch bad patterns (lint) and auto-format code consistently.

Say: "Make it pass ESLint and Prettier."


## Quality & Performance

What separates a frontend that works from one that's fast and accessible.

### Re-render

When a component runs again because its state/props changed. Too many = jank.

Say: "This re-renders too often, investigate why."

### Memoization

Caching a computed value or component so it only recomputes when inputs change.

Say: "Memoize the expensive list calculation."

### Virtual DOM

An in-memory representation the framework diffs to update only what changed.

Say: "It's the virtual DOM reconciling the change."

### Bundle size / tree-shaking

Total JS shipped; tree-shaking removes unused code to shrink it.

Say: "Check the bundle size, tree-shake unused imports."

### Debounce / throttle

Limiting how often a function fires, debounce waits for a pause; throttle caps the rate.

Say: "Debounce the search input by 300ms."

### Accessibility / ARIA

Roles, labels, and keyboard support so assistive tech can use the app.

Say: "Add ARIA labels and keyboard navigation."

### Semantic markup

Using meaningful HTML elements over generic divs, better a11y and SEO.

Say: "Use semantic elements, not div soup."

### Error boundary

A wrapper that catches render crashes and shows a fallback instead of a blank page.

Say: "Wrap routes in an error boundary."

---

# Claude for Research

> Research is a system of questions, not a search bar.

Plans, sources, methods, and synthesis in language Claude can act on. For literature scans, interviews, competitive landscapes, and defensible conclusions.

Source: https://juanmnl.com/notes/claude-for-research.html

## Frame the Question

A fuzzy question gets a fuzzy answer. Sharpen these and Claude researches the right thing, at the right depth.

### The actual question

State what you really want to know as a specific, answerable question, not a topic.

Prompt: Not "tell me about EVs." But "How has EV battery cost per kWh changed 2015,2025, and why?"

### Scope & boundaries

Geography, timeframe, population, sub-questions. Bounds keep the research focused and finite.

Prompt: Scope: US market, last 5 years, consumer segment only.

### Depth

A quick orientation vs an exhaustive, cited report. Say which, they're very different jobs.

Prompt: I need a deep, multi-source report, not a quick summary.

### Recency

How current it must be. Flag when only the latest data will do so Claude searches the live web.

Prompt: Use only sources from the last 12 months.

### Purpose & audience

A decision memo, a literature review, a blog post, the use shapes depth, tone, and format.

Prompt: This feeds an investment decision, be skeptical and quantify.

### Vague → precise


## Working Modes

The verb sets the job. Scoping, deep-diving, and fact-checking are different asks.

### Scope / map the landscape

Get the lay of the land before diving, key players, debates, sub-topics, terms.

Prompt: Map the landscape: main positions, key sources, and open questions.

### Deep dive

Exhaustive investigation of one question across many sources, with citations.

Prompt: Deep dive with citations, fan out across sources and verify claims.

### Fact-check / verify

Confirm a specific claim against primary sources and flag what can't be confirmed.

Prompt: Fact-check this claim, cite the primary source or say it's unverified.

### Compare / synthesize

Pull multiple sources into one structured comparison or coherent view.

Prompt: Compare these 4 approaches in a table: method, cost, evidence.

### Summarize

Condense a long source or body of work. Specify length and what to keep.

Prompt: Summarize this paper in 200 words, method, findings, limitations.

### Critique / red-team

Have Claude attack the argument or find weaknesses in a body of evidence.

Prompt: Red-team this conclusion, what's the strongest case against it?

### Monitor / track

Keep tabs on a topic over time. Pairs well with a scheduled recurring brief.

Prompt: Track developments and brief me weekly on what changed.


## Source Vocabulary

Naming source quality gets you evidence, not vibes. Tell Claude what counts.

### Primary vs secondary

Primary = original (study, dataset, filing); secondary = reporting on it. Prefer primary for claims.

Prompt: Cite the primary source, not an article summarizing it.

### Peer-reviewed

Vetted by experts before publication. The bar for scientific claims.

Prompt: Use peer-reviewed studies where they exist.

### Preprint

Posted before peer review, fast but unvetted. Useful, but flag the caveat.

Prompt: If it's a preprint, label it as not yet peer-reviewed.

### Authoritative / primary org

The body that owns the data (a statistics agency, regulator, the company itself).

Prompt: Pull the number from the issuing agency, not a blog.

### Corroboration

An independent second source confirming a claim. One source is a lead, not a fact.

Prompt: Flag any claim with only one source, find corroboration.

### Recency & provenance

When it was published and where it came from. Old or anonymous = lower trust.

Prompt: Note each source's date and publisher beside the claim.

### Conflict of interest

Who funded or benefits from a finding. Affects how much weight it carries.

Prompt: Flag any funding or conflict of interest behind a study.

### Citation

A traceable link or reference so you can verify it yourself.

Prompt: Give inline citations with links for every factual claim.


## Search & Gather

How Claude finds material. Steering the search shapes everything downstream.

### Search the live web

For anything current, tell Claude to search rather than rely on training data.

Prompt: Search the web, I need current figures, not your prior knowledge.

### Fan-out / breadth

Cast wide across many sources before narrowing. Ask for multiple independent queries.

Prompt: Fan out across several sources before drawing conclusions.

### Query terms & synonyms

Have Claude vary the search language, jargon, plain terms, opposing framings.

Prompt: Try multiple search phrasings, including critics' terms.

### Site / domain scoping

Restrict to trusted domains (gov, edu, specific journals) when quality matters.

Prompt: Prioritize .gov, .edu, and major journals.

### Date filtering

Constrain to a time window so stale results don't crowd out current ones.

Prompt: Limit results to 2023 onward.

### Follow the citation trail

Trace a claim back to its origin; chase who cites a key paper.

Prompt: Trace this stat to its origin and tell me where it actually came from.


## Critical Thinking

The lenses that separate findings from noise. Name them and Claude reasons, not just collects.

### Triangulate

Confirm a finding from multiple independent angles or methods.

Prompt: Triangulate, does independent evidence agree?

### Correlation vs causation

Two things moving together isn't one causing the other. A classic trap.

Prompt: Is this causation or just correlation? What confounds it?

### Sample size & method

How many, selected how. A vivid anecdote isn't data; a tiny study isn't proof.

Prompt: Note the sample size and methodology for each study.

### Base rate

The background frequency a claim should be judged against. Guards against scary-sounding stats.

Prompt: What's the base rate here, for context?

### Bias & framing

Selection, publication, and framing bias in how evidence is gathered and presented.

Prompt: What biases might shape these sources?

### Steelman the other side

Build the strongest version of the opposing view before judging. Beats a strawman.

Prompt: Steelman the counter-argument, then weigh both.

### Uncertainty & confidence

Ask Claude to state how sure it is and where the evidence is thin.

Prompt: Mark each conclusion high / medium / low confidence.

### Distinguish fact / inference / opinion

Keep what's established separate from what's interpreted or argued.

Prompt: Separate established facts from your inferences.


## Synthesis & Output

Naming the deliverable gets you a usable artifact instead of a wall of text.

### Executive summary

The answer first, in a few sentences, with detail below. Lead with the conclusion.

Prompt: Start with a 3-sentence exec summary, then the evidence.

### Literature review

A structured survey of what's known, where sources agree, and where they conflict.

Prompt: Write a literature review grouped by theme, noting disagreements.

### Annotated bibliography

Each source listed with a short note on what it says and how reliable it is.

Prompt: Give an annotated bibliography, one note per source.

### Comparison matrix

Options as rows, criteria as columns. Makes tradeoffs scannable.

Prompt: Put the options in a comparison matrix with sources cited.

### Key findings & gaps

Bullet the takeaways and, crucially, what remains unknown.

Prompt: List key findings and open gaps in the evidence.

### Cited report

A full write-up where every claim links to its source. The gold standard.

Prompt: Deliver a fully cited report, every claim links to a source.

---

# Claude for Branding

> Brand is a system. Talk to Claude like one.

Positioning, identity, voice, naming, and brand worlds in language Claude can act on. From discovery prompts to system definitions that hold up under iteration.

Source: https://juanmnl.com/notes/claude-for-branding.html

## Frame the Ask

Branding work is only as good as the inputs. State these before asking Claude for names, copy, or directions.

### Audience

Who you're for, and who you're not for. A brand that's for everyone resonates with no one.

Prompt: Audience: indie founders, design-literate, allergic to corporate fluff.

### Category & competitors

The space you play in and who else is there. Sets the conventions to follow or break.

Prompt: Category: project management. Competitors feel cold and enterprise.

### Stage

New brand, rebrand, or extension. Each needs different inputs and freedom.

Prompt: This is a full rebrand, the name stays, everything else is open.

### What you stand for

The belief or point of view behind the business. The root of everything downstream.

Prompt: We believe software should feel calm, not addictive.

### Deliverable

Be explicit: names, tagline options, a positioning statement, a voice guide, a brand brief.

Prompt: Give me a one-page positioning statement, then 10 tagline options.

### Vague → precise


## Brand Strategy

The thinking layer, before a single color or font. Name these and Claude builds on a foundation, not a mood.

### Positioning

The space you own in the customer's mind, relative to alternatives. The strategic core.

Prompt: Write a positioning statement: for [who], we're the [what] that [why].

### Value proposition

The concrete benefit you promise, in the customer's terms, not your features.

Prompt: Draft a value prop focused on the outcome, not the feature list.

### Mission & vision

Mission = why you exist now; vision = the future you're working toward.

Prompt: Write a mission and a vision, one present, one aspirational.

### Brand pillars

3,5 core attributes everything ladders up to. The brand's load-bearing walls.

Prompt: Propose 4 brand pillars with a sentence each.

### Brand archetype

A personality pattern (Sage, Rebel, Creator, Caregiver…) that gives the brand a consistent character.

Prompt: Which archetype fits us, and how would it shape our voice?

### Differentiation

The reason to choose you over the obvious alternative. Sharp, defensible, true.

Prompt: What's our real differentiation vs the category leader?

### Brand promise

The one thing customers can always count on you for.

Prompt: Distill our brand promise into a single sentence.

### Target audience / persona

A vivid portrait of who you serve, needs, frustrations, language.

Prompt: Build a primary persona with goals, frustrations, and their own words.


## Verbal Identity

How the brand sounds and what it says. Words do as much branding as visuals, often more.

### Naming

The brand or product name. Specify the style: descriptive, abstract, coined, evocative, plus must-avoids.

Prompt: Generate 15 names: short, evocative, .com-able, not animal-themed.

### Tagline / slogan

A short, memorable line capturing the promise. Tagline = enduring; slogan = campaign.

Prompt: 10 tagline options, under 5 words, no jargon.

### Messaging hierarchy

Primary message, supporting points, proof. So everyone says the same things in priority order.

Prompt: Build a messaging hierarchy: headline → 3 supports → proof points.

### Boilerplate

The standard "about us" paragraph reused in press, footers, and bios.

Prompt: Write a 50-word boilerplate and a 25-word short version.

### Elevator pitch

What you do, for whom, why it matters, in one breath.

Prompt: Write a one-sentence and a 30-second pitch.

### Naming architecture

How product/feature names relate to the master brand (branded house vs house of brands).

Prompt: Recommend a naming architecture for our growing product line.


## Visual Identity

The look. Name the parts precisely and Claude can brief, critique, or generate each one.

### Logo / wordmark / lockup

Logo = the mark; wordmark = name set as type; lockup = the fixed arrangement of mark + name.

Prompt: Brief a wordmark + a standalone symbol that work apart and together.

### Color palette

Primary, secondary, and accent colors with intended roles and a meaning.

Prompt: Propose a palette: one primary, two neutrals, one accent, warm, calm.

### Type system

A display/heading face plus a body face, with a scale and pairing rationale.

Prompt: Recommend a type pairing (display + body) and explain the contrast.

### Imagery / art direction

The visual world: photography style, illustration, texture, mood.

Prompt: Define an art direction: photography style, lighting, subject, mood.

### Iconography & motifs

A consistent icon style and recurring graphic devices that signal the brand.

Prompt: Describe an icon style and one recurring brand motif.

### Moodboard direction

A described visual territory before any pixels, adjectives, references, anti-references.

Prompt: Sketch 3 moodboard directions in words: name each and its feeling.

### Brand guidelines

The rulebook: logo usage, spacing, color values, type, do's and don'ts.

Prompt: Draft brand guidelines covering logo, color, type, and voice.

### Applications / collateral

Where the brand lives: site, deck, social, packaging, email. Test the system on real surfaces.

Prompt: Show the brand applied to a homepage hero and a social post.


## Voice & Tone

Voice is constant; tone flexes by context. Give Claude adjectives and anti-adjectives, the contrast is what steers.

### Voice attributes

3,4 adjectives defining how the brand always sounds.

Prompt: Our voice is warm, plain-spoken, confident, define each with an example.

### Anti-adjectives

What you're explicitly NOT. Often clearer than what you are.

Prompt: We're never hype-y, corporate, or cutesy. Steer away from those.

### Tone shifts

How the voice adapts: error messages vs marketing vs onboarding.

Prompt: Show the voice in an error message vs a launch announcement.

### Do / don't pairs

Concrete before/after examples, the most useful part of any voice guide.

Prompt: Give do/don't rewrites for 5 common phrases.

### Lexicon

Words you use and words you ban. Keeps copy consistent across writers.

Prompt: Build a word list: say "members" not "users"; avoid "leverage."

### Reading level & rhythm

Sentence length, formality, and complexity that match the audience.

Prompt: Keep it 8th-grade reading level, short sentences, active voice.


## Working Modes

The verbs that direct Claude on brand work.

### Explore / generate

Cast wide for names, taglines, or directions. Ask for distinct territories, not near-duplicates.

Prompt: Generate 3 distinct brand territories: one bold, one calm, one quirky.

### Audit

Evaluate existing brand assets for consistency, clarity, and differentiation.

Prompt: Audit our current messaging, where does it sound like everyone else?

### Stress-test

Pressure a name or claim: meanings, trademarks, other languages, how it ages.

Prompt: Stress-test these 3 names, any bad connotations or conflicts?

### Translate strategy → expression

Turn positioning into concrete copy, names, or visual direction.

Prompt: Turn this positioning into a homepage headline and subhead.

### Document / systematize

Capture decisions into reusable guidelines so the brand stays consistent.

Prompt: Document this into a one-page brand brief the team can follow.

### Roleplay the audience

Have Claude react as your target persona to gut-check a name or message.

Prompt: React as our skeptical founder persona, does this land or grate?

---

# Claude for Design

> Talk to Claude like a design partner, not a vending machine.

Frame the ask, name the mode, give visual context. Practical phrases and patterns so Claude reads the brief the way another designer would.

Source: https://juanmnl.com/notes/claude-for-design.html

## Frame the Ask

Five things to state up front. The more of these Claude has, the less it guesses.

### Role

Tell Claude what hat to wear. It shifts the vocabulary, defaults, and rigor it brings.

Prompt: Act as a senior product designer. Critique this onboarding flow for clarity and friction.

### Audience & platform

Who uses it and where. "Enterprise dashboard" and "consumer iOS app" produce very different designs.

Prompt: It's a mobile-first app for non-technical small-business owners. Keep it simple and reassuring.

### Goal / job-to-be-done

State the outcome, not just the artifact. Claude designs toward the goal instead of decorating.

Prompt: The goal is to get a first project created in under 60 seconds.

### Constraints

Brand, tech, accessibility, space, must-haves. Constraints sharpen output, they don't limit it.

Prompt: Constraints: WCAG AA contrast, our brand purple, fits on one screen, no carousels.

### Output format

Be explicit about the deliverable: a wireframe, an HTML mockup, a token spec, a critique, copy.

Prompt: Give me a single-file HTML mockup I can open in a browser, dark theme.

### Vague → precise


## Working Modes

The verb you lead with tells Claude what kind of help you want. Pick deliberately.

### Generate / draft

Make something from scratch. Best with a clear brief and constraints attached.

Prompt: Generate three layout options for a settings page with grouped sections.

### Explore / diverge

When you want range, not one answer. Ask for distinct directions, not minor variants.

Prompt: Explore 3 visually distinct directions: one editorial, one playful, one ultra-minimal.

### Critique / audit

Have Claude evaluate against principles (hierarchy, contrast, consistency, accessibility).

Prompt: Audit this screen against usability heuristics and list issues by severity.

### Iterate / refine

Improve what exists. Reference the specific thing and the direction of change.

Prompt: Tighten the spacing and increase contrast on the secondary text.

### Explain / teach

Understand the "why" so you can decide yourself. Great for learning design rationale.

Prompt: Explain why this layout feels cluttered and what principle it violates.

### Convert / translate

Move between fidelities or formats: sketch→hi-fi, mockup→code, copy→UI.

Prompt: Convert this wireframe into a polished HTML prototype with real styling.


## Give Visual Context

Design is visual, feed Claude visuals. This single habit improves results more than any clever wording.

### Paste a screenshot

Drop in a screen of what exists. Claude can read layout, hierarchy, and problems directly.

Prompt: Here's the current screen [image]. What's hurting the hierarchy?

### "Match this" reference

Share an example you like and name what about it to borrow, don't assume Claude guesses the right part.

Prompt: Match the spacing and restraint of this [image], but use our colors.

### Describe the brand

Give adjectives + anti-adjectives. "Warm and trustworthy, not corporate or cold" steers fast.

Prompt: Brand feel: calm, precise, a little technical. Not flashy, not cute.

### Share tokens / specs

Paste your actual colors, type scale, spacing. Claude will design within your system, not invent one.

Prompt: Use these tokens: primary #6D28D9, radius 12px, 8px spacing scale, Inter.

### Point at a Figma file

With the Figma connector, share a frame link so Claude reads the real design, not a description.

Prompt: Here's the frame: [figma link]. Implement it as a React component.

### Name the device frame

Specify viewport so layout decisions are correct from the start.

Prompt: Design for 390×844 (iPhone), then show the desktop breakpoint.


## Options & Iteration

The vocabulary of the feedback loop. These short phrases steer adjustments precisely.

### "Give me 3 options"

Forces divergence so you can react to alternatives instead of judging a single guess.

Prompt: Show 3 directions side by side, then I'll pick one to refine.

### "Make it breathe"

Shorthand for more whitespace and looser spacing. Common, well-understood design slang.

Prompt: Too dense, let it breathe, more padding between sections.

### "Tighten / loosen"

Tighten = reduce spacing/scope; loosen = open it up. Pair with what (spacing, copy, scope).

Prompt: Tighten the card padding; loosen the line-height in body text.

### "Push it further"

Ask for more boldness when a draft is too safe. Or "dial it back" for the opposite.

Prompt: Too timid, push the contrast and scale further.

### "Keep everything except…"

Lock what works so iteration doesn't regress the parts you like.

Prompt: Keep the layout, only change the color treatment of the header.

### "Show the states"

Ask to see hover, focus, empty, loading, and error, not just the happy path.

Prompt: Now show the empty, loading, and error states for this list.


## Design Systems & Tokens

Speak in systems and Claude produces consistent, scalable work instead of one-off pixels.

### "Define tokens first"

Ask Claude to establish color, type, spacing, and radius tokens before any screens.

Prompt: Define a token set (color, type scale, spacing, radius) before designing screens.

### "Componentize this"

Turn a repeated pattern into a reusable component with named props and variants.

Prompt: Componentize the card: props for image, title, badge, and a hover state.

### "Use semantic naming"

Ask for role-based names (primary, surface, danger) over literal ones (blue, gray-2).

Prompt: Name colors semantically: primary, surface, danger, not by hue.

### "Document usage"

Have Claude write do/don't guidance so the system is usable by others.

Prompt: For each component, add when to use / when not to use.

### "Audit for consistency"

Point Claude at existing screens to find drift, off-scale spacing, stray colors, mixed radii.

Prompt: Audit these screens for tokens that break the system.

### "Theme it"

Ask for the same components driven by tokens so light/dark or brand themes swap cleanly.

Prompt: Make it themeable, one token set drives light and dark.


## Figma Workflow

With the Figma connector, Claude bridges design and code both ways. Name the direction you want.

### Design → code

Hand Claude a frame; get faithful, component-structured code back.

Prompt: From this frame [link], generate a React + Tailwind component matching spacing and tokens.

### Code → design

Push an existing page or component into Figma to design on top of it.

Prompt: Bring this component into Figma as an editable frame.

### Build a library

Generate a design system in Figma from your codebase or token set.

Prompt: Create a Figma library from these tokens and components.

### Read for review

Have Claude inspect a frame and critique it before you build.

Prompt: Look at [frame] and flag spacing or contrast issues before I hand off.

### Diagram in FigJam

Generate flows, maps, and architecture diagrams directly in FigJam.

Prompt: Diagram the signup flow in FigJam with decision branches.

### Code Connect

Map Figma components to your real code components so handoff stays in sync.

Prompt: Map this Figma button to our Button code component.


## Critique Language

Naming the principle gets you actionable feedback instead of "looks good." Ask Claude to use these lenses.

### Visual hierarchy

Does the eye land on the most important thing first? Size, weight, color, position.

Prompt: Is the hierarchy clear, does the primary action win attention?

### Contrast & legibility

Text/background contrast ratios and readability at real sizes.

Prompt: Check contrast ratios against WCAG AA.

### Alignment & grid

Are edges aligned to a consistent grid, or drifting?

Prompt: Flag anything off-grid or misaligned.

### Rhythm & spacing

Consistent spacing scale; related items grouped (proximity).

Prompt: Is the spacing rhythm consistent? Any one-off values?

### Affordance

Do interactive things look interactive? Buttons look like buttons.

Prompt: Does every control have a clear affordance and state?

### Cognitive load

Is the screen asking too much at once? What can be deferred or removed.

Prompt: Where's the cognitive load too high, what can we cut?

---

# Claude for Development

> Give Claude the context a senior engineer would want.

Repo facts, intent, constraints, and a verification path. Phrases for pairing, planning, debugging, refactoring, and reviewing without thrash.

Source: https://juanmnl.com/notes/claude-for-development.html

## Frame the Ask

Underspecified requests get plausible-but-wrong code. State these and you'll get code that fits your repo.

### Goal & acceptance criteria

What "done" looks like. Concrete criteria let Claude self-check instead of guessing scope.

Prompt: Goal: add pagination to the users API. Done when it returns page, limit, total and has tests.

### Stack & versions

Language, framework, and versions. Prevents APIs from the wrong era or ecosystem.

Prompt: Stack: TypeScript, React 19, Next.js app router, Tailwind v4.

### Conventions

Point at how the codebase already does things so new code matches, not fights, the patterns.

Prompt: Follow the existing pattern in /services, match its error handling and naming.

### Constraints

No new deps, must stay backward-compatible, performance budget, security rules.

Prompt: Constraints: no new dependencies, keep the public API stable.

### Scope boundary

Say what NOT to touch. Stops well-meaning refactors that balloon the diff.

Prompt: Only change the auth module. Don't refactor anything else.

### Vague → precise


## Working Modes

Lead with the verb that matches the help you want.

### Implement / build

Write new code to a spec. Strongest with acceptance criteria and conventions attached.

Prompt: Implement a debounced search hook with a 300ms delay and cancellation.

### Plan first

Ask for an approach before code on anything non-trivial. Cheaper to correct a plan than a diff.

Prompt: Plan the approach first, list the steps and files before writing code.

### Refactor

Improve structure without changing behavior. Name the goal: readability, performance, testability.

Prompt: Refactor this for readability, behavior must stay identical.

### Debug

Find and fix a defect. Give the symptom, the trace, and how to reproduce.

Prompt: Debug this, here's the error, the input, and expected output.

### Review

Evaluate a diff or file for bugs, security, and style. Ask for severity-ranked findings.

Prompt: Review this PR for bugs and security issues, ranked by severity.

### Explain

Understand existing code. Great for onboarding to an unfamiliar repo.

Prompt: Explain what this function does and why it's written this way.

### Optimize

Improve a measurable metric, name it (latency, memory, bundle size) and the target.

Prompt: Optimize this query, it's the N+1 hot path; cut DB round-trips.

### Test

Generate tests for behavior, edge cases, and regressions. Name the framework.

Prompt: Write tests (Vitest) covering empty, single, and overflow cases.


## Give Context

The single biggest lever for code quality. Claude reasons over what you show it, show the right things.

### Paste the error verbatim

Full stack trace, not a paraphrase. The exact line and message carry most of the signal.

Prompt: Here's the full stack trace and the failing line: [paste].

### Share the relevant files

Give the actual code that matters, plus its callers. Don't make Claude guess interfaces.

Prompt: Here's the handler and the service it calls, both files.

### Repo structure

A directory tree orients Claude on where things live and where new code belongs.

Prompt: Project layout: src/api, src/db, src/components, put new endpoints in api.

### Reproduction steps

Exact input → expected vs actual output. Turns "it's broken" into a solvable problem.

Prompt: Repro: POST this body → expect 201, get 500.

### Point Claude at the repo

When it has file access, let it read the code itself instead of you pasting everything.

Prompt: Read the auth module and tell me how sessions are stored.

### A CLAUDE.md / conventions doc

A persistent file of project rules (commands, style, gotchas) Claude loads every session.

Prompt: Follow CLAUDE.md, run pnpm test before claiming done.


## Code Vocabulary

Precise engineering terms collapse a paragraph into a word Claude already understands.

### Extract / inline

Pull code into its own function/module (extract) or fold it back (inline).

Prompt: Extract the validation into a pure function.

### Pure function

No side effects, same input → same output. Ask for these where you want testability.

Prompt: Make this a pure function, no I/O inside.

### Idempotent

Running it twice has the same effect as once. Key for retries and APIs.

Prompt: Make the endpoint idempotent with a request key.

### DRY / single source of truth

Remove duplication; one canonical definition. Use when copy-paste has crept in.

Prompt: This logic is duplicated 3 times, DRY it up.

### Edge cases

The boundary inputs: empty, null, huge, concurrent, malformed. Always ask for them.

Prompt: Handle the edge cases: empty array, null, and duplicates.

### Race condition

A bug from unpredictable ordering of concurrent ops. Name it when timing is suspect.

Prompt: Could this be a race condition? Two requests hit it at once.

### Type-safe / strict

No any, exhaustive checks, narrowed types. Ask for it explicitly.

Prompt: Make it type-safe, no any, handle every case.

### Backward compatible

Existing callers keep working. Critical when touching shared APIs.

Prompt: Keep it backward compatible, don't break current consumers.

### Abstraction / interface

A clean boundary hiding implementation. Ask Claude to define one before coupling things.

Prompt: Define an interface so we can swap the provider later.


## Agentic Workflow

When Claude can run commands and edit files, these moves keep it on the rails.

### "Plan, then execute"

Have Claude propose a plan you approve before it starts changing files.

Prompt: Show me the plan first, wait for my OK, then implement.

### "Work in small steps"

Incremental changes you can review beat one giant diff you can't.

Prompt: Do it in small, reviewable steps, pause between each.

### "Run the tests"

Tell Claude to verify its own work by running the suite before declaring done.

Prompt: Run the tests and don't stop until they pass.

### "Write a failing test first"

TDD, capture the bug or spec as a red test, then make it green.

Prompt: Write a failing test that reproduces the bug, then fix it.

### "Don't touch X"

Fence off files or areas so the agent stays scoped.

Prompt: Don't modify the migrations or the config.

### "Use a subagent"

Delegate parallel or exploratory work (searching, verifying) to a separate agent.

Prompt: Use a subagent to find every call site before changing the signature.


## Review & Quality

Name the lens and Claude reviews like a specialist instead of skimming.

### Correctness

Does it actually do the thing for all inputs, including the nasty ones?

Prompt: Check correctness on edge and error paths.

### Security

Injection, authz, secrets, unsafe input. Ask for an explicit security pass.

Prompt: Do a security review: injection, authz, exposed secrets.

### Performance

Hot paths, N+1 queries, unnecessary allocations, big-O.

Prompt: Flag any performance issues, N+1s, needless loops.

### Readability

Naming, structure, comments where the "why" isn't obvious.

Prompt: Would a new teammate understand this? Improve readability.

### Test coverage

What's untested, especially branches and failure modes.

Prompt: What's not covered by tests here?

### Maintainability

Coupling, hidden state, things that'll bite in six months.

Prompt: What will be hard to maintain about this later?


## Debugging

A structured ask gets a root cause, not a shot in the dark.

### "Find the root cause"

Ask for the underlying cause, not just a patch that hides the symptom.

Prompt: Find the root cause, don't just silence the error.

### "Add logging / instrument"

When the cause is unclear, have Claude add targeted logs to narrow it down.

Prompt: Add logging around the suspect path so we can see the state.

### "Form hypotheses"

Ask for ranked possible causes before fixing, keeps debugging systematic.

Prompt: List the top 3 likely causes, most probable first.

### "Bisect it"

Narrow down when it broke (commits) or where (binary search the code path).

Prompt: Bisect, what changed between the working and broken versions?

### "Minimal repro"

Reduce to the smallest case that still fails, often reveals the cause itself.

Prompt: Build a minimal reproduction of the failure.

### "Regression test"

After a fix, lock it in with a test so the bug can't return.

Prompt: Add a regression test so this never comes back.

---