dembrandt/dembrandt-skills

1

performance-and-web-vitals Audit UI performance with Lighthouse and fix Core Web Vitals — LCP, CLS, INP. Fast UI is good UX. Use when optimising…

dembrandt/dembrandt-skills

717

2

nielsen-usability-heuristics UI design and review should apply Nielsen's 10 Usability Heuristics — the foundational principles for evaluating and …

dembrandt/dembrandt-skills

696

3

color-mode-and-theme Choose light, dark, or combined color mode deliberately based on brand tone and user context.

dembrandt/dembrandt-skills

675

4

form-design Forms have three layers of guidance: helper text below the input explains what to enter, placeholder shows the expect…

dembrandt/dembrandt-skills

663

5

brand-visual-language A brand's visual tone — playful or serious, rounded or angular — should be consistent across all UI elements.

dembrandt/dembrandt-skills

661

6

semantic-html-and-seo Semantic HTML5, SEO fundamentals, alt texts, progressive enhancement, SPA considerations, device capability detection…

dembrandt/dembrandt-skills

655

7

ui-density UI density — how much information and how many features appear at once — should match the primary platform and user t…

dembrandt/dembrandt-skills

653

8

motion-and-storytelling Disney's 12 animation principles, cinematic storytelling techniques, and comic book conventions apply to web UI — use…

dembrandt/dembrandt-skills

650

9

algorithmic-color-palette Derive a full UI colour palette algorithmically from one or two brand colours.

dembrandt/dembrandt-skills

642

10

information-architecture In large applications, information architecture determines whether users can find, understand, and act on data.

dembrandt/dembrandt-skills

640

11

modular-scale-typography Typography feels cohesive and intentional when font sizes follow a modular scale — a ratio-based sequence where every…

dembrandt/dembrandt-skills

637

12

visual-emphasis-and-hierarchy The most important actions and content in a UI should be visually prominent — through size, colour, weight, and posit…

dembrandt/dembrandt-skills

634

13

responsive-paradigms Mobile, tablet, and desktop are different interaction paradigms — not the same layout scaled up or down.

dembrandt/dembrandt-skills

633

14

user-flows-and-guided-paths Related features and tasks — such as purchase flows, onboarding, or multi-step configuration — should be designed as …

dembrandt/dembrandt-skills

633

15

gestalt-ui-organisation UI layout and grouping should follow Gestalt principles so users immediately understand which controls, commands, and…

dembrandt/dembrandt-skills

628

16

button-states Every interactive element needs a complete set of visual states — rest, hover, active/pressed, focus, disabled, and l…

dembrandt/dembrandt-skills

627

17

wcag-accessibility UI must comply with WCAG 2.2 Level AA, as required by the European Accessibility Act (EN 301 549).

dembrandt/dembrandt-skills

627

18

micro-interactions Micro-interactions are small, purposeful animations and responses that reward the user and make the interface feel al…

dembrandt/dembrandt-skills

626

19

generate-ui-from-brand Pipeline skill — turns a URL or DESIGN.md into a concrete UI structure with decisions already made.

dembrandt/dembrandt-skills

623

20

component-family-consistency Buttons, inputs, pills, badges, calendars, and other interactive components form a visual family — they share the sam…

dembrandt/dembrandt-skills

622

21

loading-states-and-perceived-performance Manage user expectations during wait times with appropriate loading states — from simple spinners to complex skeleton…

dembrandt/dembrandt-skills

622

22

elevation-and-depth Elevation — subtle shadows and layering — communicates visual hierarchy by lifting elements above the surface.

dembrandt/dembrandt-skills

620

23

sticky-and-fixed-elements Sticky and fixed positioning keeps critical UI persistent as the user scrolls — headers at the top, toolbars at the b…

dembrandt/dembrandt-skills

618

24

scroll-areas Scroll areas inside a layout should be avoided wherever possible. When unavoidable, allow only one scroll axis at a t…

dembrandt/dembrandt-skills

613

25

data-display-and-selection Complex data deserves multiple view modes — grid, list, table — chosen by the user based on their task.

dembrandt/dembrandt-skills

612

26

status-colors-and-errors Keep status and error colours minimal and consistent — too many semantic colours confuse users.

dembrandt/dembrandt-skills

612

27

ui-context-and-scope UI should make it immediately clear where the user is, what context they are operating in, and what their actions wil…

dembrandt/dembrandt-skills

612

28

real-world-metaphors UI patterns borrowed from the physical world feel immediately intuitive — cards feel graspable, carousels feel scroll…

dembrandt/dembrandt-skills

609

29

notifications-and-recovery When something goes wrong, the user must be able to recover or try again.

dembrandt/dembrandt-skills

608

30

extract-design Extract a complete design system — colors, typography, spacing, components, shadows, and W3C design tokens — from any…

dembrandt/dembrandt-skills

600

31

global-toolbar-controls Quick global settings — currency, language, region, units — belong in a persistent, low-profile location such as a he…

dembrandt/dembrandt-skills

599

32

dembrandt Orchestrator for the full dembrandt UX pipeline. Routes a UI/UX task through six ordered stages — brand foundation → …

dembrandt/dembrandt-skills

573

33

layout-paradigms-and-consistency A layout is not a neutral container — choosing the right layout paradigm (feed, board, table, canvas, master-detail, …

dembrandt/dembrandt-skills

497

34

modal-and-overlay-patterns Overlays — modals, drawers, bottom sheets, popovers — interrupt or augment the main flow.

dembrandt/dembrandt-skills

442

35

operational-expert-tool-ui Operational expert tools — used by domain specialists for hours every day — require a different design approach than …

dembrandt/dembrandt-skills

442

36

repeated-component-alignment Any component rendered many times — cards, list rows, table cells, nav items, tiles, KPI widgets, feed entries — is a…

dembrandt/dembrandt-skills

435

37

tab-navigation Tabs organise related content under a shared context — switching tabs swaps the view without leaving the page.

dembrandt/dembrandt-skills

431

38

coordinated-data-views When data has both a tabular/list representation and a visual representation, show both simultaneously and keep them …

dembrandt/dembrandt-skills

429

39

authentic-product-representation Product visuals — hero shots, demos, screenshots, landing-page panels — must reproduce the real product, not a stylis…

dembrandt/dembrandt-skills

427

40

domain-expert-configuration Configuration UIs for domain experts — users who understand their field deeply but are not software developers — requ…

dembrandt/dembrandt-skills

427

41

app-shell The persistent shell around an application — the top bar, the app launcher, the tenant and environment cue, and in he…

dembrandt/dembrandt-skills

92

42

sizing-units Which CSS unit a value should be written in.

dembrandt/dembrandt-skills

30

43

clone-website Rebuild an existing web page 1:1 from measurement instead of by eye — into Figma, Penpot, or code. Captures the rende…

dembrandt/dembrandt-skills

8