TextHero
Section registry
One set of sections,any house style.
Switch skin above. Not one line of any section below changes.
MediaHero — slot filled, art-directed
%22%2F%3E%3C%2Fsvg%3E)
Media slot
The asset is a prop, not a filename.
Art direction comes through sources, so a narrow viewport gets its own crop.
ValuePropGrid
- [01]
One contract
Every section reads the same namespaced tokens, so nothing collides with a template's own variables.
- [02]
Absolute spacing
The scale is fixed in rem rather than inherited from a framework base, so proportions survive the move.
- [03]
No runtime
Motion is expressed in CSS against duration and stagger tokens, so a section drags in no animation library.
Diptych — slot filled
%22%2F%3E%3C%2Fsvg%3E)
Paired
Media half, text half.
Alternates side down a page. Named after the block that ships in two of the templates; the same shape appears unnamed in several more.
- Slot is optional
- Ratio is declared
- No runtime
FaqAccordion
Markup and a stylesheet written only against the token contract. No colours, no type scale, no spacing base of its own.
Because a spacing utility does not mean the same thing in two templates. In one of them the Tailwind spacing base is 1px, so the same class is a quarter of the size it would be elsewhere.
Switch the skin above. Nothing on this page re-renders differently because a section changed — only the token layer did.
They stay in their template. Abstracting them costs more than rebuilding them when the need comes up.
ComparisonTable
| Copy out of template | Registry section | |
|---|---|---|
| Survives a different spacing base | No | Yes |
| Restyled without editing | No | Yes |
| Free of a motion runtime | No | Yes |
| Carries its own colours | yes, hardcoded | no, tokens |
| Works in a CSS-Modules template | No | Yes |
ArticleList
MediaGrid — slots filled
%22%2F%3E%3C%2Fsvg%3E)
Cards carry their own slot
Each card declares its media independently.
%22%2F%3E%3C%2Fsvg%3E)
A ratio is declared once
So the grid never shifts as images load.
Unfilled cards still lay out
This one has no media at all.
StatBand
- 382
- sections indexed
- 14
- in the registry
- 12
- skins
- 0
- motion runtimesin any section
Timeline
- 01
Index
Catalogue what exists before extracting anything.
- 02
Contract
Fix the tokens, so restyling is a file swap.
- 03
Port
Rewrite sections against the contract.
- 04
Publish
Ship as installable source.
TestimonialSet
The same class meant 6px in one template and 24px in another. That is the whole problem in one line.
Both templates defined a colour called white. They disagreed about what it was.
LogoWall — slots empty, showing placeholders
Unfilled slots state what they need
CtaBand — accent tone
Install
npx shadcn add …/r/faq-accordion.json
Sections arrive as editable source, with the contract and all twelve skins resolved as dependencies.
SiteFooter