Claude Skills by dembrandt

github.com/dembrandt

45 skillsA× 456 installs139 views

Algorithmic Color PaletteADerive a full UI palette from one or two brand colours — state variants, brand-tinted greys, semantic colours. Use when building or expanding a colour system.designgoVotes: 0GitHub stars: 64
Brand Visual LanguageAShape language across type, radius and icons carries brand personality. Use when starting a design system, picking icons or radius tokens, or reviewing visual consistency.developmentgoangularVotes: 0GitHub stars: 64
Button StatesARest, hover, active, focus, disabled and loading states, derived from the base colour. Use when designing buttons, links, inputs or any clickable component.designgoVotes: 0GitHub stars: 64
Color Mode And ThemeALight, dark or both, and when a theme selector is worth it. Use when defining a base palette or deciding on dark mode support.designrustgoVotes: 0GitHub stars: 64
Component Family ConsistencyAButtons, inputs, badges and pills share radius, colour logic, shadow, border and spacing. Use when building or reviewing a component library.designrustgoVotes: 0GitHub stars: 64
Data Display And SelectionAView modes, row selection, mass actions, sorting, filters, search and table patterns. Use when designing data tables, listings, file browsers or any collection.designgogitVotes: 0GitHub stars: 64
Skills DirectorySkills Directory Look up any of 103,619 scanned skills — grade, score, and every finding. Free.Check a skill
DembrandtAOrchestrator that routes a UI/UX task through brand, tokens, layout, components, polish and accessibility. Use for multi-concern work such as a design review, UI build or interface audit.designgoshellVotes: 0GitHub stars: 64
Elevation And DepthAShadows and layering that lift elements above the surface. Use when designing cards, dropdowns, modals, tooltips or any floating element.designgoVotes: 0GitHub stars: 64
Extract DesignAExtract colours, typography, spacing, components and W3C design tokens from a live website with Dembrandt. Use when you need a site's real tokens or want to seed a design system from it.toolsrustgoVotes: 0GitHub stars: 64
Form DesignAHelper text, placeholders, validation and submit behaviour. Use when designing or reviewing a form, input field or data entry UI.designrustgoVotes: 0GitHub stars: 64
Generate Ui From BrandAPipeline from a URL or DESIGN.md to tokens, decisions and a UI spec. Use when building UI for an existing brand, auditing a design system or fixing visual inconsistency.designgobashVotes: 0GitHub stars: 64
Gestalt Ui OrganisationAGroup controls with Gestalt principles so users see what belongs together. Use when laying out components, navigation, toolbars, forms or dashboards.designgovueVotes: 0GitHub stars: 64
Global Toolbar ControlsACurrency, language, region and unit selectors live in a low-profile header or footer spot. Use when designing locale switchers or product-wide preference controls.designgoVotes: 0GitHub stars: 64
Information ArchitectureANaming, navigation, a UI that mirrors the data model, confirms for irreversible changes. Use when structuring a large application or naming its entities.developmentgoexpressVotes: 0GitHub stars: 64
Loading States And Perceived PerformanceASpinners, skeletons and staggered reveals that manage wait times. Use when designing loading states, async data or the feel of a slow interface.designrustgoVotes: 0GitHub stars: 64
Micro InteractionsASmall purposeful animations — toggles, animated icons, success moments. Use when designing interactive feedback, success states or loaders.designgospringVotes: 0GitHub stars: 64
Modular Scale TypographyARatio-based type scale where every size relates to the others. Use when defining font sizes or type tokens, or when typography feels arbitrary.developmentgoexpressVotes: 0GitHub stars: 64
Motion And StorytellingADisney's animation principles and cinematic technique applied to UI motion. Use when designing transitions, scroll animations or onboarding motion.designexpressspringVotes: 0GitHub stars: 64
Nielsen Usability HeuristicsANielsen's 10 usability heuristics. Use when auditing an interface, designing interaction flows, writing error messages or reviewing usability.designrustgoVotes: 0GitHub stars: 64
Notifications And RecoveryAToasts, inline errors, banners and recovery paths. Use when designing error states, success confirmations, async feedback or in-place editing.designgoapiVotes: 0GitHub stars: 64
Performance And Web VitalsALighthouse audits and Core Web Vitals — LCP, CLS, INP. Use when optimising page load, layout shift, input delay, images, fonts or render-blocking resources.devopsjavascriptgoVotes: 0GitHub stars: 64
Real World MetaphorsACards, drawers, carousels and other patterns borrowed from the physical world. Use when designing layout patterns, gestures or navigation paradigms.designdocumentationVotes: 0GitHub stars: 64
Responsive ParadigmsAMobile, tablet and desktop are different paradigms, not one layout scaled. Use when designing responsive layouts or deciding what each breakpoint shows.designgoVotes: 0GitHub stars: 64
Scroll AreasAAvoid inner scroll containers; when unavoidable, one axis at a time. Use when a layout, table or panel might scroll inside the page.designshellVotes: 0GitHub stars: 64
Semantic Html And SeoASemantic HTML5, SEO basics, alt text, progressive enhancement and SPA concerns. Use when building web UI, reviewing markup or optimising for search.content-marketingjavascriptgoVotes: 0GitHub stars: 64
Status Colors And ErrorsAFew semantic colours, each meaning one thing, and errors with a way forward. Use when designing status indicators, validation, alerts or error states.designgoapiVotes: 0GitHub stars: 64
Sticky And Fixed ElementsASticky headers, bottom toolbars, floating action buttons and pinned table headers. Use when deciding what stays on screen while the user scrolls.designVotes: 0GitHub stars: 64
Ui Context And ScopeAShow where the user is and what their actions affect — breadcrumbs, regions, scope labels. Use when designing deep navigation or multi-section layouts.designrustgoVotes: 0GitHub stars: 64
Ui DensityAMatch information density to platform and user type. Use when designing data tables, dashboards or toolbars, or adapting a desktop product for mobile.designgoVotes: 0GitHub stars: 64
User Flows And Guided PathsAGuided multi-step paths and wizards. Use when designing onboarding, checkout, setup sequences or any multi-step journey.designrustgoVotes: 0GitHub stars: 64
Visual Emphasis And HierarchyASize, colour, weight and position mark what matters most. Use when designing button groups, CTAs, cards, dashboards or any layout with a primary action.designgoawsVotes: 0GitHub stars: 64
Wcag AccessibilityAWCAG 2.2 AA compliance as required by the European Accessibility Act. Use when designing, building or reviewing any user-facing interface for accessibility.designvuegitVotes: 0GitHub stars: 64
App ShellATop bar, app launcher, tenant and environment cue, status bar. Use when designing the persistent shell or navigation between apps behind one login.ai-agentsrustgoVotes: 0GitHub stars: 64
Authentic Product RepresentationAProduct visuals must show the real product with real data. Use when building landing pages, hero sections, screenshots or demo panels.ai-agentsrustgoVotes: 0GitHub stars: 64
Coordinated Data ViewsAShow a table and its map, diagram, timeline or chart together, with selection synced both ways. Use when data appears in two representations at once.ai-agentsrustgoVotes: 0GitHub stars: 64
Domain Expert ConfigurationASettings for experts who are not developers — domain language, sane defaults, grouping by professional concept. Use when designing settings panels, solver configuration or constraint editors.ai-agentsgoVotes: 0GitHub stars: 64
Layout Paradigms And ConsistencyAChoose a layout paradigm (feed, board, table, canvas, master-detail, dashboard) and reuse it across screens. Includes a landing page narrative framework. Use when structuring a screen, page template or landing page.designrustgoVotes: 0GitHub stars: 64
Modal And Overlay PatternsAModals, drawers, bottom sheets and popovers, each with its scope and blocking level. Use when designing dialogs, confirmations, side panels or action sheets.ai-agentsgoVotes: 0GitHub stars: 64
Operational Expert Tool UiADense, 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.designgoVotes: 0GitHub stars: 64
Repeated Component AlignmentACards, rows, tiles and cells are fixed slot models that stay aligned when content length varies. Use when building or reviewing any repeated component.ai-agentsgovueVotes: 0GitHub stars: 64
Tab NavigationATabs swap views under a shared context. Use when designing tabbed layouts, settings pages, detail views or dashboards with several data views.ai-agentsVotes: 0GitHub stars: 64
Sizing UnitsArem, 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.ai-agentsgoVotes: 0GitHub stars: 64
Clone WebsiteARebuild a live web page 1:1 from measurement into Figma, Penpot or code, then verify it. Use when reproducing a page or checking a rebuild against the original.ai-agentsjavascriptrustVotes: 0GitHub stars: 64
Marketing Vs Product SystemAA marketing site and its product may differ in density and scale but share one token layer. Use when the two drift apart, share components or need a single token owner.designgoshellVotes: 0GitHub stars: 64
Surface SeparationASet 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.ai-agentsgogitVotes: 0GitHub stars: 64