UI Component Vocabulary
Agent-generated UI quality is bottlenecked by the user's component vocabulary, not by the model's ability. Knowing what UI patterns are called - bento grid, marquee, accordion, command palette - is the lever that turns generic slop into premium interfaces.
The Insight
@itsandrewgao articulated the core problem with "vibecoded" frontends: users prompt agents with vague descriptions ("make it look nice") and get generic output. The fix isn't a better model — it's a richer vocabulary. When the user knows the specific name of a UI pattern, the model can produce it accurately. The bottleneck is naming, not capability. Source: X/@itsandrewgao, 2026-02-28
The post gained 16,928 likes and 27,544 bookmarks (#8 by bookmarkCount in the corpus) — one of the highest-engagement design takes — because it reframes the "AI can't do good design" complaint as a user-side problem with a concrete solution. Follow-up thread promised more vibecoding frontend tips. Demo video attached. Source: X/@itsandrewgao thread, 2026-02-28
Why This Validates the Taste-* Approach
Kevin's taste-* skill taxonomy (13 skills routing through Frontend and Design Skills) is exactly this insight operationalized. Instead of relying on users to know component names, the skills encode the vocabulary into agent instructions:
- Frontend and Design Skills defines metric-based rules, component architecture, and variance dials
- Frontend and Design Skills specifies GSAP ScrollTriggers, editorial typography, bento grids, AIDA structure
- Frontend and Design Skills names double-bezel cards, spring physics, haptic depth
- Frontend and Design Skills specifies Swiss typographic grids, CRT degradation, terminal aesthetics
- Frontend and Design Skills names warm monochrome palettes, flat bento grids, muted pastels
Parallel to UI Component Vocabulary (layout/component names) but for motion semantics. See dedicated page Animation Vocabulary (Animations.dev) (animations.dev glossary, @emilkowalski). Source: X/@emilkowalski, 2026-06-01
The same rule applies to aesthetic vocabulary. A request for "terminal vibes" is too vague; Terminal Aesthetics gives the agent specific primitives: CRT-black telemetry, bitmap type, radar glyphs, hex/cache columns, status logs, warning color, and slow scan motion. Source: X/@GaloAndStuff artifact review, 2026-07-03
The Component Vocabulary (Partial)
Patterns that dramatically improve output when named explicitly:
| Category | Components |
|---|---|
| Layout | Bento grid, masonry, split hero, asymmetric columns, sticky sidebar |
| Navigation | Command palette, breadcrumbs, mega menu, tab bar, bottom sheet |
| Content | Marquee, accordion, disclosure, timeline, comparison table |
| Feedback | Toast, dialog, popover, tooltip, skeleton loader, progress ring |
| Data | Stat card, sparkline, data table, kanban, heatmap |
| Motion | Scroll-triggered reveal, parallax, stagger, morphing, spring |
| Surface | Card, bevel, glassmorphism, gradient mesh, noise texture |
Component Gallery as the implementation corpus
The reviewed demo video is not just a pretty site walkthrough. It shows Component Gallery as a searchable catalog of real design-system components with synonyms, definitions, examples, accessibility tags, and implementation references. The contact sheet moves through component list/detail pages for fieldsets, file upload, input groups, and form groups, with metadata like HTML, CSS, ARIA, and WCAG. That is exactly the missing layer between "make me a form" and "build a fieldset with a file upload dropzone, input group, form labels, helper text, and validation feedback." Source: X/@itsandrewgao, 2026-02-28; Source: Component Gallery, 2026-06-30
Current version snapshot: the public repo is inbn/component-gallery, built with Astro and Airtable, homepage https://component.gallery, main branch HEAD 9afa99919128f7e85393ade6cf86bc8dea21c855, pushed 2026-06-12, 335 stars, 24 forks, no GitHub release, and no declared GitHub license metadata as of 2026-06-30. Treat the site as a live reference corpus, not a package dependency. Source: GitHub inbn/component-gallery, 2026-06-30
For agents, the practical rule is: when frontend output feels generic, do not ask for "better UI" first. Name the missing primitive. Search Component Gallery or Design Engineering Resources, then feed the exact component vocabulary into Frontend and Design Skills and Frontend and Design Skills. This converts taste into a lookup-and-routing problem rather than hoping the model guesses the right pattern.
NameThatUI as the fuzzy-to-canonical bridge
NameThatUI fills the step before Component Gallery:
the user can describe a visible thing in imprecise language and receive a
ranked real name, platform API symbol, anatomy, nearby confusable patterns,
paste-ready build prompt, and failure-oriented debug prompt. The current live
index exposes 76 element entries—44 web and 32 macOS—plus a separate governed
style atlas. Its full 51-second launch video proves the intended route from
visual browse to entry anatomy, agent prompt, fuzzy search, and light/dark
presentation rather than just a launch screenshot. Source: X/@argofowl
2076284369883615555, 2026-07-12; complete local video review, 2026-08-11;
NameThatUI index, checked 2026-08-11
The research method is stronger than a crowdsourced label. It starts with a visible, genuinely hard-to-name artifact; checks the user-facing term, exact framework/platform symbol, and accessible behavior against primary sources; and then makes its distinction from look-alikes visible. Apple HIG and Developer Documentation own Apple claims; WAI-ARIA, ARIA APG, WCAG, WHATWG, and MDN own web semantics and implementation context. Aggregate search misses, confirmed answers, and corrections improve findability, but the site explicitly says colloquial searches do not overrule a standard or invent a component name. Source: NameThatUI methodology, checked 2026-08-11
The site is deliberately agent-readable: llms.txt points to a 200+ KB
llms-full.txt corpus, a public POST /api/search accepts a description in any
language, feed.xml publishes new entries, and each detail page exposes exact
names and prompts. A live generic query for “little outline around keyboard
selection” ranked web :focus-visible, macOS focus ring, and outline view; the
web entry then distinguished :focus-visible from :focus, named
outline-offset, warned against global outline: none, and linked the
implementation vocabulary. Source: NameThatUI agent index;
content-addressed API response and rendered focus-ring page, 2026-08-11
That agent surface has a data boundary. Search sends the literal query to
/api/search and additional /api/log events; the methodology says aggregate
misses are studied and raw query logs are not published, but no public privacy
or terms page was found at the conventional routes. Use only short abstract
descriptions with no customer, private-project, repository, incident, URL,
credential, or pasted-product data. For sensitive work, search local knowledge
and primary documentation without sending the clue externally.
The deterministic route is now:
- Unknown visible pattern or style →
ui-vocabularyskill and local clue card. - Public generic clue → optional NameThatUI discovery query.
- Candidate term → primary platform/accessibility verification.
- Cross-system examples → Component Gallery.
- Component/library selection → Component Library Sources and
animated-component-libraries. - Implementation and proof → Frontend and Design Skills, Design System, and browser/accessibility verification.
A public third-party jpcaparas/skills implementation was inspected but not
installed or copied: the repository has no detected license, only 37 stars at
review time, and its skill intentionally refuses the primary NameThatUI origin.
The local ui-vocabulary skill is independently derived from the official
methodology, public API contract, primary platform sources, and Kevin's existing
vocabulary owner; it starts probationary with privacy and response-shape tests.
Source: GitHub jpcaparas/skills at e0f5514, reviewed 2026-08-11
Implication for Agent Design
The insight generalizes beyond UI. Any domain where agent output quality depends on the specificity of the prompt benefits from vocabulary skills. Code review quality improves when the reviewer knows specific anti-pattern names. Writing quality improves when style directives use specific rhetorical terms. The pattern is: encode domain vocabulary into agent instructions, and generic output becomes specific output.
Timeline
- 2026-02-28 | @itsandrewgao posted about UI component vocabulary — 16,928 likes, 27,544 bookmarks. "you can instantly 10x your vibecoded frontends by just learning what different ui components are called." Source: X/@itsandrewgao, 2026-02-28
- 2026-06-12 | Top-25 bookmark absorption refreshed canonical status URL and engagement rank (#8). Source: x-bookmark-absorb, 2026-06-12
- 2026-06-30 | Deep-reviewed the local video/screenshot and promoted Component Gallery as the concrete vocabulary corpus. Added repo/version snapshot and agent routing rule. Source: X bookmark artifact audit, 2026-06-30; https://component.gallery/; https://github.com/inbn/component-gallery
- 2026-07-03 | Added Terminal Aesthetics as an aesthetic-vocabulary example: naming specific terminal/CRT primitives is the difference between generic dark UI and a coherent machine-room interface. Source: X/@GaloAndStuff, 2026-04-12
- 2026-08-11 | Replayed NameThatUI's current site, methodology, programmatic search, agent corpus, focus-ring entry, style atlas, and complete launch video. Added the fuzzy-description → candidate → primary verification → prompt receipt, separated NameThatUI discovery from Component Gallery implementation comparison, and created the probationary
ui-vocabularyskill with a fail-closed public-query guard. Source: X/@argofowl2076284369883615555; NameThatUI live surfaces; content-addressed local artifacts