{"id":"7024f537-72b2-4f78-b72a-cfb2da54059c","shortId":"phSHLY","kind":"skill","title":"global-toolbar-controls","tagline":"Quick global settings — currency, language, region, units — belong in a persistent, low-profile location such as a header toolbar or footer. These controls are frequent but not primary, so they use small typography and stay out of the main content hierarchy. Use when designing gl","description":"# Global Toolbar Controls\n\n## What Belongs Here\n\nGlobal 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.\n\nTypical global toolbar controls:\n- **Currency selector** (e-commerce, financial tools)\n- **Language / locale switcher**\n- **Region or market selector**\n- **Unit system** (metric / imperial)\n- **Theme toggle** (light / dark)\n- **Accessibility preferences** (font size, contrast)\n\nThese are distinct from user account settings (which live in a profile menu) and from contextual settings (which live adjacent to the feature they affect).\n\n## Where to Place Them\n\n### Header utility strip\nA secondary row above or within the main header, right-aligned. Common on e-commerce and international sites.\n\n```\n[Logo]                    [EN | EUR | 🌍]  [Account]  [Cart]\n────────────────────────────────────────────────────────────\n[Main navigation]\n```\n\n### Header right — compact\nInline with the main header, far right, using small typography and minimal visual weight.\n\n```\n[Logo]  [Nav items ...]              [EUR ▾]  [EN ▾]  [Account ▾]\n```\n\n### Footer\nFor 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.\n\n### Dedicated settings area\nFor 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.\n\n## Typography and Visual Treatment\n\nGlobal toolbar controls are secondary UI — they should not draw the eye away from primary content.\n\n- **Font size: 13–14px** — deliberately smaller than body text (14px maximum per the type scale)\n- **Colour: muted** — use a secondary text colour (`--color-text-secondary`), not the primary text colour\n- **No bold** — regular weight only\n- **Compact spacing** — tighter padding than primary navigation items\n- **Separator** — a `|` or thin vertical rule between adjacent controls (language | currency) keeps them grouped without using full button chrome\n\n```css\n.toolbar-control {\n  font-size: var(--text-sm);       /* 13–14px */\n  color: var(--color-text-secondary);\n  font-weight: 400;\n  padding: 4px 8px;\n}\n```\n\n## Interaction Pattern\n\nGlobal controls typically use a **compact dropdown** — clicking the label opens a small popover or select with the available options.\n\n- Show the current value as the trigger label: `EUR ▾`, `EN ▾`\n- Use a flag icon + language code for locale, or currency symbol + code for currency\n- Keep the option list short — if it exceeds ~20 items, add a search input inside the dropdown\n- On selection, apply immediately and confirm with a brief status update (toast or inline update) if the change has a visible effect\n\n## Review Checklist\n\n- [ ] Are global controls placed consistently in one location across all pages?\n- [ ] Is the typography smaller and more muted than primary navigation?\n- [ ] Does the control show the current value as its label?\n- [ ] Is the dropdown or popover compact and keyboard-navigable?\n- [ ] Are global controls separated from user account settings?\n- [ ] On mobile, are global controls accessible without being prominent? (Often moved to a menu or footer on small screens)","tags":["global","toolbar","controls","dembrandt","skills","accessibility","agent-skills","claude-code-skills","claude-skills","cursor-skills","design-system","design-tokens"],"capabilities":["skill","source-dembrandt","skill-global-toolbar-controls","topic-accessibility","topic-agent-skills","topic-claude-code-skills","topic-claude-skills","topic-cursor-skills","topic-design-system","topic-design-tokens","topic-enterprise-ux","topic-gestalt","topic-skills-sh","topic-typography","topic-ui-design"],"categories":["dembrandt-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/dembrandt/dembrandt-skills/global-toolbar-controls","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add dembrandt/dembrandt-skills","source_repo":"https://github.com/dembrandt/dembrandt-skills","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 9 github stars · SKILL.md body (3,387 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:08:27.215Z","embedding":null,"createdAt":"2026-05-18T13:14:02.082Z","updatedAt":"2026-05-18T19:08:27.215Z","lastSeenAt":"2026-05-18T19:08:27.215Z","tsv":"'13':287,359 '14px':288,294,360 '20':428 '400':370 '4px':372 '8px':373 'access':117,515 'account':127,177,203,508 'across':469 'add':430 'adjac':141,336 'affect':59,146 'airbnb':226 'align':165 'appear':219 'appl':227 'appli':439 'appropri':228 'area':237 'avail':394 'away':281 'belong':12,55 'bodi':292 'bold':317 'brief':445 'button':346 'cart':178 'chang':454 'checklist':460 'chrome':347 'cleaner':249 'click':383 'code':411,417 'color':308,361,364 'color-text-secondari':307,363 'colour':300,306,315 'commerc':99,170 'common':166 'compact':183,321,381,497 'compet':84 'complex':240 'confirm':442 'consist':465 'contain':263 'content':45,90,284 'contextu':137 'contrast':121 'control':4,28,53,58,94,206,231,271,337,351,377,463,484,504,514 'cram':251 'css':348 'currenc':8,95,339,415,419 'current':398,487 'dark':116 'dedic':235 'deliber':289 'design':49 'distinct':124 'draw':278 'dropdown':382,436,494 'e':98,169 'e-commerc':97,168 'effect':458 'en':175,202,405 'entir':61 'eur':176,201,404 'everyth':252 'exceed':427 'experi':63 'eye':280 'far':189 'featur':144 'financi':100 'flag':408 'font':119,285,353,368 'font-siz':352 'font-weight':367 'footer':26,204,221,525 'frequent':30,218 'full':345 'gl':50 'global':2,6,51,57,92,269,376,462,503,513 'global-toolbar-control':1 'group':342 'header':23,151,162,181,188 'hierarchi':46 'icon':409 'immedi':440 'imperi':112 'infrequ':234 'inlin':184,450 'input':433 'insid':434 'interact':374 'intern':172,224 'item':200,328,429 'keep':340,420 'keyboard':500 'keyboard-navig':499 'label':385,403,491 'languag':9,102,214,338,410 'larg':223 'less':80 'light':115 'link':259 'list':423 'live':130,140 'local':103,413 'locat':19,468 'logo':174,198 'low':17 'low-profil':16 'main':44,161,179,187 'market':107 'maximum':295 'menu':134,523 'metric':111 'minim':195 'mobil':511 'move':520 'mute':301,478 'nav':199 'navig':88,180,327,481,501 'occasion':75 'often':519 'one':467 'open':386 'option':395,422 'pad':324,371 'page':245,471 'panel':247 'pattern':375 'per':77,296 'persist':15 'place':149,464 'popov':389,496 'prefer':118,241 'primari':33,70,87,283,313,326,480 'product':62 'profil':18,133 'promin':518 'quick':5 'rare':212 'reach':74 'region':10,105,216 'regular':318 'review':459 'revisit':213 'right':164,182,190 'right-align':163 'row':156 'rule':334 'scale':299 'screen':528 'search':432 'secondari':155,273,304,310,366 'select':391,438 'selector':96,108,217 'separ':329,505 'session':78 'set':7,128,138,209,236,242,244,509 'short':424 'show':396,485 'site':173,225 'size':120,286,354 'skill' 'skill-global-toolbar-controls' 'sm':358 'small':37,192,388,527 'smaller':290,475 'source-dembrandt' 'space':322 'status':446 'stay':40 'strip':153 'switcher':104 'symbol':416 'system':110 'task':71 'text':293,305,309,314,357,365 'text-sm':356 'theme':113 'thin':332 'tighter':323 'toast':448 'toggl':114 'tool':101 'toolbar':3,24,52,93,255,257,270,350 'toolbar-control':349 'topic-accessibility' 'topic-agent-skills' 'topic-claude-code-skills' 'topic-claude-skills' 'topic-cursor-skills' 'topic-design-system' 'topic-design-tokens' 'topic-enterprise-ux' 'topic-gestalt' 'topic-skills-sh' 'topic-typography' 'topic-ui-design' 'treatment':268 'trigger':402 'truli':233 'type':298 'typic':91,378 'typographi':38,193,265,474 'ui':274 'unit':11,109 'updat':447,451 'use':36,47,191,302,344,379,406 'user':68,126,208,507 'util':152 'valu':399,488 'var':355,362 'vertic':333 'visibl':457 'visual':85,196,267 'weight':197,319,369 'within':159 'without':343,516","prices":[{"id":"622f6dea-cc43-4332-a2ec-05b69eb74a46","listingId":"7024f537-72b2-4f78-b72a-cfb2da54059c","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"dembrandt","category":"dembrandt-skills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:14:02.082Z"}],"sources":[{"listingId":"7024f537-72b2-4f78-b72a-cfb2da54059c","source":"github","sourceId":"dembrandt/dembrandt-skills/global-toolbar-controls","sourceUrl":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/global-toolbar-controls","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:02.082Z","lastSeenAt":"2026-05-18T19:08:27.215Z"}],"details":{"listingId":"7024f537-72b2-4f78-b72a-cfb2da54059c","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"dembrandt","slug":"global-toolbar-controls","github":{"repo":"dembrandt/dembrandt-skills","stars":9,"topics":["accessibility","agent-skills","claude-code-skills","claude-skills","cursor-skills","design-system","design-tokens","enterprise-ux","gestalt","skills-sh","typography","ui-design","ux","wcag"],"license":"mit","html_url":"https://github.com/dembrandt/dembrandt-skills","pushed_at":"2026-05-14T22:34:06Z","description":"UX and design system skills for AI agents based on 20 years of experience","skill_md_sha":"b31946bc40389390031042fbedd68bec47ab6208","skill_md_path":"skills/global-toolbar-controls/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/global-toolbar-controls"},"layout":"multi","source":"github","category":"dembrandt-skills","frontmatter":{"name":"global-toolbar-controls","description":"Quick global settings — currency, language, region, units — belong in a persistent, low-profile location such as a header toolbar or footer. These controls are frequent but not primary, so they use small typography and stay out of the main content hierarchy. Use when designing global selectors, locale switchers, or user preference controls that apply across the whole product."},"skills_sh_url":"https://skills.sh/dembrandt/dembrandt-skills/global-toolbar-controls"},"updatedAt":"2026-05-18T19:08:27.215Z"}}