A category on every element

[ecropolis]

Every element in src/data/catalog.ts now has a required category, one of seven buyer-facing groups. The superherotech.ai /elements/ hub sections and the mega-menu columns will be driven by it (the site change follows this one), and the superhero-ui-library skill mirrors it after the drill. The assignment is the one agreed in the hub redesign note.

The seven categories

CATEGORIES is exported in display order, typed by CategoryId.

id	label	blurb
motion	Hero & motion	Movement that makes your first screen feel alive, from drifting particles and background video to words that type themselves.
navigation	Navigation & layout	Ways to help visitors find their way and fit a lot onto one page without it ever feeling crowded.
content	Content blocks	Tidy ways to present your services, opening hours, locations and facts so visitors take them in at a glance.
media	Media & showcase	Frames for your photos, videos, reviews and social posts that invite people to look closer.
conversion	Offers & conversion	Put your offer, deadline or big news in front of visitors at the moment they are ready to act.
feedback	Feedback & states	Clear messages that tell visitors what just happened, what is still loading and how far along they are.
controls	Controls & details	Small finishing touches, from choices and menus to link hovers and cookie consent, that make a site feel carefully made.

The assignment (all 43)

category	elements
motion (6)	particle-field, video-background, parallax-band, scroll-reveal, animated-background, animated-text
navigation (6)	mega-menu, off-canvas, tabs, tabcordion, accordion, scrollbox
content (8)	info-list, flip-box, slide-box, hotspot, info-circle, business-hours, map, responsive-table
media (7)	before-after, video-player, video-gallery, social-grid, card-slider, testimonial-carousel, icon
conversion (6)	countdown, announcement-bar, modal, content-toggle, news-ticker, sticker
feedback (5)	notice, toast, loading, tooltip, stepper
controls (5)	radio-group, menu-button, tags, link-effects, cookie-consent

The catalogue diff is one inserted category: line per entry, right after its id. Every entry is otherwise byte-identical.

What the check pins

scripts/check-categories.mjs runs first in npm run check, before the build, so it fails fast.

• Every element has a category that exists in CATEGORIES. A missing or unknown one names the entry.
• Every category has at least three elements.
• The full id-to-category assignment matches a golden object in the script. A new element fails until someone adds it to the golden in a chosen category, and moving an element means changing both places.
• CATEGORIES order and labels are fixed. Each blurb must be one sentence and must not say "component".
• The CategoryId type lists the same ids in the same order. It is read from the source text, since Node strips types.
• Nine mutants must be caught, including one element with an unknown category and one with none. The others cover a moved element, an unplaced new element, a two-element category, swapped order, a relabel, "component" in a blurb, and a drifted type.

Also

• The library's own gallery groups its cards under the category headings and blurbs, with a jump list of category links at the top. Card titles moved from h2 to h3 under the new section headings, at the same visual size.
• The README's "adding an element" steps and the website import table mention category and CATEGORIES.

Verified

• npm run check and npm run build are green.
• The website's type check passes against this branch: a fresh clone of ecropolis/SuperheroTech main, run with ELEMENTS_SOURCE set to this checkout, reported 0 errors and 0 warnings. Its vendored catalogue carried all 43 categories.
• Breaking two real entries on disk makes the check exit 1 with both entries named.

🤖 Generated with Claude Code