token-naminglisted

Chooses and applies one naming convention for design tokens across every category - declares a grammar (dotted category.property.variant, role-first CSS custom properties, or functional order), fixes the primitive, semantic and component tiers, picks a scale type per category without mixing types among siblings, names composite tokens (text style, border, shadow, gradient), and writes token documentation with an owner per group and a deprecation and rename path. Use when starting or auditing a token set, when two grammars coexist, when semantic names are subjective or appearance-based, or when nobody can list which tokens a component uses. Defers to better-colors for colour role names. Triggers on token naming, name design tokens, token naming convention, token grammar, semantic token names, token scale, t-shirt vs numeric scale, composite tokens, text style token, token documentation, token ownership, deprecate a token, rename tokens, too many tokens.
stritar/skills · ★ 0 · Web & Frontend · score 63

Install: claude install-skill stritar/skills

# Token naming Names design tokens so that anyone who did not create them can find, read and extend them. The source page puts it as "design tokens are nicknames for design elements" and "design tokens are design decisions. Fewer decisions, less chaos": a name records a decision, and a set of names is a set of decisions someone else has to navigate. What belongs elsewhere: the colour role inventory and the rule that the brand colour is `accent` belong to `better-colors`; token values and the DTCG file layout to `design-tokens`; platform outputs to `token-build`; deprecation timelines and breaking-change policy to `design-system-governance`; the duration word set to `motion-system`. ## When it applies - A new token set, or two sets being merged. - An audit found mixed grammars (`color.text.primary` beside `--text-primary-color`), duplicates, or names like `size-elephant` and `too-sunny`. - A designer and a developer disagree about a name and there is no written convention to settle it. - Nobody can say which tokens a component uses, or what "token is deprecated" means for the people using it. Not for choosing values (ramps, type scales: `better-colors`, `design-tokens`), generating platform files (`token-build`), or styling one screen with no system behind it. ## Inputs - The existing tokens: DTCG JSON, CSS custom properties, a Figma variables export, or nothing yet. - The categories in play. The page's list: colour, font, space, size, border, border radius,