Claude Skills · Data & Analytics
Layout Paradigms And Consistency
dembrandt/dembrandt-skillsA layout is not a neutral container — choosing the right layout paradigm (feed, board, table, canvas, master-detail, dashboard, gallery, timeline, map, single-focus, narrative long-scroll) is a design decision that shapes how content is understood. Landing and marketing pages get a product narrative framework — hook, problem, USP, value props, proof points, how it works, stakes, CTA — used to review whether the page carries a visitor to a decision. Once chosen, the same paradigm and page skeleton must be reused consistently across the application so users build one mental model. This is consis...
At a glance
This skill is for Data & Analytics and helps you choose a layout paradigm for data visualization, review page consistency across an application, and structure a landing page narrative.
git clone --depth 1 https://github.com/dembrandt/dembrandt-skills
cp -r dembrandt-skills/skills/layout-paradigms-and-consistency ~/.claude/skills/layout-paradigms-and-consistency
Setup, runtime and requirements describe dembrandt/dembrandt-skills, the repo this skill ships in.
LayoutInformation ArchitecturedashboardUser ExperienceContent Structurenarrative-design
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...