Sizing Units
dembrandt/dembrandt-skillsWhich CSS unit a value should be written in. rem for anything a text-size preference must move — type, control heights, padding around text. px only for what must not move — hairlines, borders, shadow offsets. Relative units for layout widths. Use when defining spacing and sizing tokens, choosing between px and rem, setting control heights, writing media queries, or fixing a layout that breaks when the user enlarges text.
At a glance
git clone --depth 1 https://github.com/dembrandt/dembrandt-skills
cp -r dembrandt-skills/skills/sizing-units ~/.claude/skills/sizing-units
Setup, runtime and requirements describe dembrandt/dembrandt-skills, the repo this skill ships in.
Also in dembrandt/dembrandt-skills
View the repoDerive a full UI colour palette algorithmically from one or two brand colours. Darker and lighter variants for interactive states, desaturat...
The persistent shell around an application — the top bar, the app launcher, the tenant and environment cue, and in heavy tools a status bar....
Product visuals — hero shots, demos, screenshots, landing-page panels — must reproduce the real product, not a stylised poster of it. Design...
A brand's visual tone — playful or serious, rounded or angular — should be consistent across all UI elements. Shape language in typography,...
Every interactive element needs a complete set of visual states — rest, hover, active/pressed, focus, disabled, and loading. States should b...
Rebuild an existing web page 1:1 from measurement instead of by eye — into Figma, Penpot, or code. Captures the rendered page, the raw sourc...
Choose light, dark, or combined color mode deliberately based on brand tone and user context. Offer a theme selector only when user control...
Buttons, inputs, pills, badges, calendars, and other interactive components form a visual family — they share the same border-radius, colour...
When data has both a tabular/list representation and a visual representation, show both simultaneously and keep them synchronized. Clicking...
Complex data deserves multiple view modes — grid, list, table — chosen by the user based on their task. Row and item selection should use la...
Orchestrator for the full dembrandt UX pipeline. Routes a UI/UX task through six ordered stages — brand foundation → design tokens → layout...
Configuration UIs for domain experts — users who understand their field deeply but are not software developers — require domain language, se...