# Naming

> Use when someone describes an effect or pattern without knowing its name and wants the exact term. For naming a thing, not designing or building one.

- Skill: `agentsorg/naming` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add agentsorg/naming`
- Raw SKILL.md: https://api.skillmd.com/api/skills/agentsorg/naming/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: agentsorg (https://skillmd.com/u/agentsorg)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/agentsorg/naming

---



# Naming What You're Looking At

Someone describes a thing they can see but cannot name — "the bouncy bit when a popover opens", "the gap between two specific letters", "it fires on every keystroke". Return the exact term, its gloss, and the one term it is most often confused with. Then stop. This is a reverse dictionary, not a design opinion: it never rules on whether the thing should exist, how long it should take, or which curve it should use. The moment an answer needs a number, you have left this skill.

The sibling to stay clear of is `design-critique`. Both turn a vague feeling into words, but `design-critique` looks at one rendered screen and produces a falsifiable rule about *that* screen; `naming` looks at nothing, matches a description against a closed glossary, and returns a word that is true everywhere. "This dashboard feels cheap" is `design-critique`. "What's it called when it resists and snaps back at the edge" is `naming` — the answer is **Rubber-banding**, and the turn is over.

**Read what the project already calls things before you answer.** If the codebase ships a component named `Popup`, a token named `--ease-drawer`, or a hook named `useSheet`, give the canonical term and then say which local identifier it maps to — never open a rename. A glossary answer is for the conversation; the project's vocabulary is load-bearing in imports, tests, and design files, and correcting it is a refactor nobody asked for. The exception runs the other way: when the project has two names for one thing, say so, because that is a real defect the user can act on.

## Quick Reference

| The thing being described is… | Open |
|---|---|
| a design noun — type, color, layout, IA, copy, a component | `references/design-vocabulary.md` |
| unclear in category, and you need candidates fast | `references/design-terms-index.md` |
| a motion or visual effect | `references/animation-vocabulary.md` |
| a frontend behaviour or a browser quirk | `references/engineering-vocabulary.md` |

Open `design-terms-index.md` first whenever the description does not obviously land in one category — it is a flat list of all 188 term names grouped by the 12 categories, cheap to scan, and it exists to stop you loading the full 12-category vocabulary blind. Open `design-vocabulary.md` as soon as you have a candidate term, because the index carries names only and the gloss is the answer. Open `animation-vocabulary.md` when the description contains a verb of movement or a feel word — "springy", "slides off", "draws itself in", "resists". Open `engineering-vocabulary.md` when the description is a symptom rather than a sight — "it fires too often", "the page jumps", "my z-index doesn't work".

## The Lookup

1. Decide which of the four files owns the description, using the table above.
2. Narrow by category (letters → Typography; a label stuck to something → Components; edge resistance → Feedback & Interaction).
3. Read the matching gloss. Read the gloss of the nearest confusable term too.
4. Answer: term, verbatim gloss, contrast. Stop.

## Core Principles

1. **Lead with the term and cap the answer at three.** One primary match plus at most `2` alternates, each with a one-line note on how it differs. A naming question wants a name; six candidates is the same as no answer. *Exception:* an explicit either/or ("badge or tag?") names two terms, and both get a full gloss plus the rule that separates them.

2. **Quote the gloss verbatim; never paraphrase.** The wording is doing the disambiguation work — "the space between two *specific* characters" is the entire distinction between kerning and tracking, and a paraphrase drops it. *Exception:* spelling. `design-vocabulary.md` is written in British English (`centre`, `organise`); match the user's locale on spelling only, never on wording.

3. **Always surface the contrasting term.** The value of a vocabulary is in the boundaries, not the words: `Kerning`/`Tracking`, `Badge`/`Tag`, `Tooltip`/`Popover`, `Opacity`/`Visibility`, `Modal`/`Sheet`/`Drawer`, `Voice`/`Tone`, `Chroma`/`Saturation`, `Variables`/`Tokens`, `WCAG`/`APCA`, `Morph`/`Crossfade`, `Debounce`/`Throttle`. *Exception:* a term with no near neighbour in the glossary — `Rubber-banding` has none, and manufacturing a contrast for it is noise.

4. **Never coin a term.** An invented phrase is worse than "there isn't one", because the user will repeat it to a designer who has never heard it. Say no listed term fits, then describe the effect *in* glossary words — "that's a `stagger` of `scale-in` entrances". *Exception:* a name standardized outside the glossary — a CSS feature like `@starting-style`, a WCAG success criterion — is cited to its spec, not coined.

5. **Route by the user's frame, not by keyword.** `Easing`, `Stagger`, and `Spring` appear in both `design-vocabulary.md` (Motion) and `animation-vocabulary.md`. If they are describing something they intend to build, `animation-vocabulary.md` wins; if they are trying to talk about a design, `design-vocabulary.md` wins. *Exception:* when `design-terms-index.md` and `design-vocabulary.md` disagree, `design-vocabulary.md` is correct, always — the index is a map, not a source.

6. **A gloss is a definition, never guidance.** `animation-vocabulary.md` defines Spring in terms of tension, mass, and damping because that is what the word means; the house parameterization is `{ duration, bounce }`. Quote the definition to name the thing, and do not let it leak into a recommendation. *Exception:* the user explicitly asks which parameterization to use — that is a `gestures` question, so hand it over rather than answering from the glossary.

7. **The term ends the turn.** "What's it called" is not "build it", and continuing into implementation is how a one-word answer becomes an unrequested diff. *Exception:* one message asks both ("what's it called, and add it") — give the term in a single line, then load the owning skill: `motion` for a curve or duration, `transitions` for choreography, `surfaces` for a shadow, `perf` for jank.

8. **Say the glosses are house-written when asked where they come from.** The seed is index.how — 188 terms across 12 categories, by Emil Kowalski and Glenn Carstens-Peters, arriving fall 2026. The product is unreleased, so nothing here can be checked against it and every gloss in these references is house-written. *Exception:* terms owned by a standards body — `WCAG`, `APCA`, `sRGB`, `P3`, `OKLCH` — are cited to the standard, not to the house.

## Smell / Fix

| Smell | Fix |
|---|---|
| "It's sort of like a modal, I guess" | Name it: `Modal` interrupts, `Sheet` slides from a side edge, `Drawer` pulls up from the bottom. |
| A term returned with no contrast | Append the nearest confusable term and the one-line rule that separates them. |
| Six candidates listed flat | One primary, then at most 2 ranked alternates with a difference each. |
| A coined phrase — "grow-from-click animation" | The term is `Origin-aware animation`. Never ship a coined phrase. |
| The gloss reworded "for clarity" | Quote it. The original wording carries the boundary. |
| The answer rolls on into how to build it | Stop at the term; hand off to the owning skill. |
| Renaming the project's `Popup` to `Popover` in code | Give the canonical term, keep the project's identifier. |
| A spring definition quoted as a spec | Definitions describe; they do not prescribe. Route to `gestures`. |

## Output Format

```
**Morph** — One shape smoothly turns into another shape, e.g. Dynamic Island.

Close alternates:
- **Crossfade** — if they simply fade over each other in the same spot.
- **Shared element transition** — if an element travels and transforms from one position into another.
```

Term bolded, gloss verbatim, alternates only when they genuinely compete. No preamble, no closing offer to implement.

## Checklist

- [ ] The right one of the four references was opened, and it was opened before answering
- [ ] The gloss is verbatim, not paraphrased
- [ ] The contrasting term is named, or the term genuinely has no near neighbour
- [ ] At most one primary plus two alternates
- [ ] No coined term; if nothing fits, that was said plainly
- [ ] No duration, curve, or size appears anywhere in the answer
- [ ] The project's existing identifier was mapped, not corrected
- [ ] The turn ends at the term