dembrandt/dembrandt-skills
40 skills · 10,573 total installs
$npx skills add dembrandt/dembrandt-skillsSkillInstalls
nielsen-usability-heuristicsUI design and review should apply Nielsen's 10 Usability Heuristics — the foundational principles for evaluating and improving usability.brand-visual-languageA brand's visual tone — playful or serious, rounded or angular — should be consistent across all UI elements.color-mode-and-themeChoose light, dark, or combined color mode deliberately based on brand tone and user context.performance-and-web-vitalsAudit UI performance with Lighthouse and fix Core Web Vitals — LCP, CLS, INP. Fast UI is good UX.form-designForms have three layers of guidance: helper text below the input explains what to enter, placeholder shows the expected format, and validation confirms…motion-and-storytellingDisney's 12 animation principles, cinematic storytelling techniques, and comic book conventions apply to web UI — used subtly, they make interfaces feel alive,…semantic-html-and-seoSemantic HTML5, SEO fundamentals, alt texts, progressive enhancement, SPA considerations, device capability detection, and user context awareness.information-architectureIn large applications, information architecture determines whether users can find, understand, and act on data. Naming matters.modular-scale-typographyTypography feels cohesive and intentional when font sizes follow a modular scale — a ratio-based sequence where every size is mathematically related to the…user-flows-and-guided-pathsRelated features and tasks — such as purchase flows, onboarding, or multi-step configuration — should be designed as natural, guided paths that feel coherent…ui-densityUI density — how much information and how many features appear at once — should match the primary platform and user type.micro-interactionsMicro-interactions are small, purposeful animations and responses that reward the user and make the interface feel alive — an animated icon, a satisfying…button-statesEvery interactive element needs a complete set of visual states — rest, hover, active/pressed, focus, disabled, and loading.responsive-paradigmsMobile, tablet, and desktop are different interaction paradigms — not the same layout scaled up or down.visual-emphasis-and-hierarchyThe most important actions and content in a UI should be visually prominent — through size, colour, weight, and position.algorithmic-color-paletteDerive a full UI colour palette algorithmically from one or two brand colours.wcag-accessibilityUI must comply with WCAG 2.2 Level AA, as required by the European Accessibility Act (EN 301 549). Do not deviate without deliberate justification.component-family-consistencyButtons, inputs, pills, badges, calendars, and other interactive components form a visual family — they share the same border-radius, colour logic, shadow…generate-ui-from-brandPipeline skill — turns a URL or DESIGN.md into a concrete UI structure with decisions already made.gestalt-ui-organisationUI layout and grouping should follow Gestalt principles so users immediately understand which controls, commands, and elements belong together.sticky-and-fixed-elementsSticky and fixed positioning keeps critical UI persistent as the user scrolls — headers at the top, toolbars at the bottom on mobile.elevation-and-depthElevation — subtle shadows and layering — communicates visual hierarchy by lifting elements above the surface.data-display-and-selectionComplex data deserves multiple view modes — grid, list, table — chosen by the user based on their task.ui-context-and-scopeUI should make it immediately clear where the user is, what context they are operating in, and what their actions will affect.real-world-metaphorsUI patterns borrowed from the physical world feel immediately intuitive — cards feel graspable, carousels feel scrollable, drawers feel pullable.scroll-areasScroll areas inside a layout should be avoided wherever possible. When unavoidable, allow only one scroll axis at a time and always keep the user in control.status-colors-and-errorsKeep status and error colours minimal and consistent — too many semantic colours confuse users. Each colour must mean exactly one thing.notifications-and-recoveryWhen something goes wrong, the user must be able to recover or try again. Toasts, inline errors, banners, and notification patterns each have a specific role.loading-states-and-perceived-performanceManage user expectations during wait times with appropriate loading states — from simple spinners to complex skeleton screens and staggered animations.global-toolbar-controlsQuick global settings — currency, language, region, units — belong in a persistent, low-profile location such as a header toolbar or footer.extract-designExtract a complete design system — colors, typography, spacing, components, shadows, and W3C design tokens — from any live website using Dembrandt.dembrandtOrchestrator for the full dembrandt UX pipeline. Routes a UI/UX task through six ordered stages — brand foundation → design tokens → layout → components → UX…layout-paradigms-and-consistencyA layout is not a neutral container — choosing the right layout paradigm (feed, board, table, canvas, master-detail, dashboard, gallery, timeline, map,…modal-and-overlay-patternsOverlays — modals, drawers, bottom sheets, popovers — interrupt or augment the main flow.operational-expert-tool-uiOperational expert tools — used by domain specialists for hours every day — require a different design approach than consumer or occasional-use software.authentic-product-representationProduct visuals — hero shots, demos, screenshots, landing-page panels — must reproduce the real product, not a stylised poster of it.coordinated-data-viewsWhen data has both a tabular/list representation and a visual representation, show both simultaneously and keep them synchronized.repeated-component-alignmentAny component rendered many times — cards, list rows, table cells, nav items, tiles, KPI widgets, feed entries — is a fixed slot model, not a free-form box.domain-expert-configurationConfiguration UIs for domain experts — users who understand their field deeply but are not software developers — require domain language, sensible defaults,…tab-navigationTabs organise related content under a shared context — switching tabs swaps the view without leaving the page.