OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add dembrandt/dembrandt-skills --skill global-toolbar-controls
Currency, language, region and unit selectors live in a low-profile header or footer spot. Use when designing locale switchers or product-wide preference controls.
npx skills add dembrandt/dembrandt-skills --skill global-toolbar-controls
Global controls affect the entire product experience but are not the user's primary task. They are reached occasionally — once per session or less — and should not compete visually with primary navigation or content.
Typical global toolbar controls:
These are distinct from user account settings (which live in a profile menu) and from contextual settings (which live adjacent to the feature they affect).
Two classes hide in this list. Controls that change what is shown (region, market, tenant) and controls that change how it is presented (language, theme, units). Group them apart. Lay the preferences out as a row, not a stack. A stack grows with every preference and gives a personal setting the same weight as the control that picks the data. A row absorbs the next preference at no cost to height.
A secondary row above or within the main header, right-aligned. Common on e-commerce and international sites.
Inline with the main header, far right, using small typography and minimal visual weight.
For controls the user sets once and rarely revisits. Language and region selectors frequently appear in footers on large international sites (Airbnb, Apple). Appropriate when the control is truly infrequent.
For more complex preference sets, a Settings page or panel is cleaner than cramming everything into the toolbar. The toolbar should link to it, not contain it.
Global toolbar controls are secondary UI — they should not draw the eye away from primary content.
--color-text-secondary), not the primary text colour| or thin vertical rule between adjacent controls (language | currency) keeps them grouped without using full button chromeGlobal controls typically use a compact dropdown — clicking the label opens a small popover or select with the available options.
EUR ▾, EN ▾To fit a flag into a round or square icon, crop it or use artwork drawn for that shape. Give the icon box explicit equal width and height so no border, line-height or flex container can resize one axis; check rendered width and height separately.