skills.rest
dembrandt
dembrandtOFFICIAL
Explore all skills by this author →
Website𝕏@dembrandtcomGitHub

global-toolbar-controls

Place global preference selectors in low-profile header, footer, or settings locations.

33|6|Updated Apr 19, 2026
Search Tags:#accessibility#global settings#responsive ui#locale switcher#currency selector#toolbar controls#header design
One-click install
npx skills add https://github.com/dembrandt/dembrandt-skills --skill global-toolbar-controls-dembrandt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: global-toolbar-controls
Source: https://github.com/dembrandt/dembrandt-skills/tree/main/skills/global-toolbar-controls
Command: npx skills add https://github.com/dembrandt/dembrandt-skills --skill global-toolbar-controls-dembrandt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents global preferences such as language, currency, region, units, and theme from competing with primary navigation or content by placing them in consistent, low-profile locations.

Core Features & Use Cases

  • Placement Guidance: Choose between header utility strips, compact header controls, footers, or dedicated settings areas based on usage frequency and complexity.
  • Visual Treatment: Apply muted 13–14px typography, regular weight, compact spacing, and restrained separators for secondary controls.
  • Interaction Patterns: Design compact, keyboard-navigable dropdowns that show the current value, support searchable lists when needed, and confirm changes appropriately.
  • Use Case: Add a language and currency selector to an international e-commerce header without distracting users from navigation, products, or checkout actions.

Quick Start

Use the global toolbar controls skill to design accessible language and currency selectors for the header of an international e-commerce site.

Frequently Asked Questions about global-toolbar-controls

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a language and currency selector for a website header without distracting from primary navigation?▼

Global toolbar controls place language and currency selectors in persistent, low-profile header utility strips using muted typography and compact spacing, keeping them accessible without disrupting primary content hierarchy.

What is the best way to make global settings like region and theme selectors responsive on mobile?▼

Responsive mobile access for global settings is achieved by placing region and theme selectors in compact, keyboard-navigable dropdowns within consistent footer or header utility areas that adapt cleanly to smaller screens.

How do I ensure accessibility preferences and locale switchers are keyboard-navigable?▼

Accessibility preferences and locale switchers require compact keyboard-navigable dropdowns that display current-value labels, supporting searchable lists when needed to confirm changes appropriately for keyboard users.

When should I move global settings controls from the header to the footer?▼

Global settings controls should move to the footer or dedicated settings areas when usage frequency is low, reserving header utility strips for frequently accessed language, currency, or theme selectors.

What visual treatment should unit selectors and toolbar controls use to maintain content hierarchy?▼

Unit selectors and toolbar controls should use muted 13–14px regular weight typography with compact spacing and restrained separators to maintain visual hierarchy and prevent competing with primary content.

Can I use compact dropdowns for accessibility preference selectors across different site areas?▼

Compact dropdowns for accessibility preference selectors can be applied consistently across headers, footers, and dedicated settings areas, showing current values and confirming changes without disrupting layout.

Related Skills

Explore More Design & Creative Skills→
gerald-icagerald-ica

site-architecture

Generate ASCII hierarchies and Mermaid sitemaps with navigation zones for site architecture.

Community
Advanced
rakibulismrakibulism
2

seo-hreflang

Validate and generate hreflang implementations for multilingual websites.

Community
Advanced
lexicalninjalexicalninja
2

accessibility-design-checker

Identify accessibility issues in UI designs, wireframes, and prototypes.

Community
Intermediate
jiaiyanjiaiyan
21

el-dialog

Display modal dialogs with customizable headers, bodies, and footers.

Community
Advanced