dembrandt
44 skills with substantive source documentation and an official publisher or observed installation demand. Read each skill’s original documentation through its card.
dembrandtmotion-and-storytelling
Disney's animation principles and cinematic technique applied to UI motion. Use when designing transitions, scroll animations or onboarding motion.
- 導入数
- 2
- GitHub Stars
- 133
- 更新日
- 10月15日
dembrandtnielsen-usability-heuristics
Nielsen's 10 usability heuristics. Use when auditing an interface, designing interaction flows, writing error messages or reviewing usability.
- 導入数
- 2
- GitHub Stars
- 133
- 更新日
- 10月15日
dembrandtnotifications-and-recovery
Toasts, inline errors, banners and recovery paths. Use when designing error states, success confirmations, async feedback or in-place editing.
- 導入数
- 2
- GitHub Stars
- 133
- 更新日
- 10月15日
dembrandtoperational-expert-tool-ui
Dense, linear, status-at-a-glance UI for specialists who use a tool all day. Use when designing dispatch, warehouse, logistics, scheduling or other B2B operations tools.
- 導入数
- 2
- GitHub Stars
- 133
- 更新日
- 10月15日
dembrandtperformance-and-web-vitals
Lighthouse audits and Core Web Vitals — LCP, CLS, INP. Use when optimising page load, layout shift, input delay, images, fonts or render-blocking resources.
- 導入数
- 2
- GitHub Stars
- 133
- 更新日
- 10月15日
dembrandtreal-world-metaphors
Cards, drawers, carousels and other patterns borrowed from the physical world. Use when designing layout patterns, gestures or navigation paradigms.
- 導入数
- 2
- GitHub Stars
- 133
- 更新日
- 10月15日
dembrandtrepeated-component-alignment
Cards, rows, tiles and cells are fixed slot models that stay aligned when content length varies. Use when building or reviewing any repeated component.
- 導入数
- 2
- GitHub Stars
- 133
- 更新日
- 10月15日
dembrandtresponsive-paradigms
Mobile, tablet and desktop are different paradigms, not one layout scaled. Use when designing responsive layouts or deciding what each breakpoint shows.
- 導入数
- 2
- GitHub Stars
- 133
- 更新日
- 10月15日
dembrandtscroll-areas
Avoid inner scroll containers; when unavoidable, one axis at a time. Use when a layout, table or panel might scroll inside the page.
- 導入数
- 2
- GitHub Stars
- 133
- 更新日
- 10月15日
dembrandtsemantic-html-and-seo
Semantic HTML5, SEO basics, alt text, progressive enhancement and SPA concerns. Use when building web UI, reviewing markup or optimising for search.
- 導入数
- 2
- GitHub Stars
- 133
- 更新日
- 10月15日
dembrandtsizing-units
rem, px or relative units for each kind of value. Use when defining spacing and sizing tokens, control heights or media queries, or when a layout breaks under enlarged text.
- 導入数
- 2
- GitHub Stars
- 133
- 更新日
- 10月15日
dembrandtstatus-colors-and-errors
Few semantic colours, each meaning one thing, and errors with a way forward. Use when designing status indicators, validation, alerts or error states.
- 導入数
- 2
- GitHub Stars
- 133
- 更新日
- 10月15日
dembrandtsticky-and-fixed-elements
Sticky headers, bottom toolbars, floating action buttons and pinned table headers. Use when deciding what stays on screen while the user scrolls.
- 導入数
- 2
- GitHub Stars
- 133
- 更新日
- 10月15日
dembrandtsurface-separation
Set a surface apart by one means — border, elevation or fill — and keep opacity for state. Use when designing cards, panels, list rows, toolbars or any container.
- 導入数
- 2
- GitHub Stars
- 133
- 更新日
- 10月15日
dembrandttab-navigation
Tabs swap views under a shared context. Use when designing tabbed layouts, settings pages, detail views or dashboards with several data views.
- 導入数
- 2
- GitHub Stars
- 133
- 更新日
- 10月15日
dembrandtui-context-and-scope
Show where the user is and what their actions affect — breadcrumbs, regions, scope labels. Use when designing deep navigation or multi-section layouts.
- 導入数
- 2
- GitHub Stars
- 133
- 更新日
- 10月15日
dembrandtui-density
Match information density to platform and user type. Use when designing data tables, dashboards or toolbars, or adapting a desktop product for mobile.
- 導入数
- 2
- GitHub Stars
- 133
- 更新日
- 10月15日
dembrandtuser-flows-and-guided-paths
Guided multi-step paths and wizards. Use when designing onboarding, checkout, setup sequences or any multi-step journey.
- 導入数
- 2
- GitHub Stars
- 133
- 更新日
- 10月15日
dembrandtvisual-emphasis-and-hierarchy
Size, colour, weight and position mark what matters most. Use when designing button groups, CTAs, cards, dashboards or any layout with a primary action.
- 導入数
- 2
- GitHub Stars
- 133
- 更新日
- 10月15日
dembrandtwcag-accessibility
WCAG 2.2 AA compliance as required by the European Accessibility Act. Use when designing, building or reviewing any user-facing interface for accessibility.
- 導入数
- 2
- GitHub Stars
- 133
- 更新日
- 10月15日