Claude Skills · Data & Analytics
Visual Emphasis And Hierarchy
dembrandt/dembrandt-skillsThe most important actions and content in a UI should be visually prominent — through size, colour, weight, and position. Visual hierarchy guides the user's eye to what matters most and signals which action is primary. Use when designing button groups, CTAs, dashboards, cards, or any layout where actions or content have different importance levels.
At a glance
This skill is for Data & Analytics and helps you design visual hierarchy for dashboards, emphasize primary actions in ui layouts, and create button groups with clear hierarchy.
git clone --depth 1 https://github.com/dembrandt/dembrandt-skills
cp -r dembrandt-skills/skills/visual-emphasis-and-hierarchy ~/.claude/skills/visual-emphasis-and-hierarchy
Setup, runtime and requirements describe dembrandt/dembrandt-skills, the repo this skill ships in.
Ui DesignVisual HierarchyButton DesignContrastTypographyUser Guidance
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...
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...
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...
Elevation — subtle shadows and layering — communicates visual hierarchy by lifting elements above the surface. Combined with border-radius,...
Extract a complete design system — colors, typography, spacing, components, shadows, and W3C design tokens — from any live website using Dem...
Other Data & Analytics skills
Teaches the agent to produce D3 charts and interactive data visualizations. A comprehensive D3.js skill with examples across chart types and...
An engineering runbook — service overview, alerts table, dashboards links, common procedures with copy-pasteable commands, on-call rotation,...
A consumer-feeling dating / matchmaking dashboard — left rail navigation, ticker bar of community signals, headline KPIs, a 30-day mutual-ma...
Notion-style team dashboard rendered as a Live Artifact. A single-page, self-contained HTML dashboard with KPIs, a 7-day sparkline, a real-t...
Professional trading analysis dashboard template (single-file HTML) with light/dark theme switch, dense market panels, chart interactions, d...
Admin / analytics dashboard in a single HTML file. Fixed left sidebar, top bar with user/search, main grid of KPI cards and one or two chart...