Design & UX

UI, UX, design systems, accessibility, visual design, and frontend polish

skills in category: 7,238
pages available: 302

Security grades appear on each card once the skill has been scanned. Newly imported skills may briefly show without a grade until the backfill job runs.

Open in full browser

Browse design & ux skills

Showing 7,177–7,200 of 7,238 skills

Color Theory Palette Harmony ExpertAExpert in color theory, palette harmony, and perceptual color science for computational photo composition. Specializes in earth-mover distance optimization, warm/cool alternation, diversity-aware palette selection, and hue-based photo sequencing. Activate on "color palette", "color harmony", "warm cool", "earth mover distance", "Wasserstein", "LAB space", "hue sorted", "palette matching". NOT for basic RGB manipulation (use standard image processing), single-photo color grading (use native-ap...designpythongoVotes: 0GitHub stars: 208
Visual Design FoundationsAApply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.designdocumentationVotes: 0GitHub stars: 40,199
Responsive DesignAImplement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.designreactperformanceVotes: 2GitHub stars: 40,199
Mobile Ios DesignAMaster iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design principles.designswiftperformanceVotes: 0GitHub stars: 40,199
Mobile Android DesignAMaster Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.designgokotlinVotes: 0GitHub stars: 40,199
Interaction DesignADesign and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.designgospringVotes: 0GitHub stars: 40,199
Design System PatternsABuild scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.designjavascripttypescriptVotes: 0GitHub stars: 40,199
Svg Precision SkillADeterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.designpythonVotes: 0GitHub stars: 99
Tailwindcss Utility ClassesAComplete Tailwind CSS utility classes reference - Layout, spacing, typography, colors, borders, effectsdesigngodocumentationVotes: 0GitHub stars: 29
Tailwindcss UtilitiesAComplete reference for Tailwind CSS utility classesdesignVotes: 0GitHub stars: 29
Tailwindcss TypographyAUse when setting font family/size/weight, aligning or wrapping text (balance/pretty), applying text-shadow or decoration, or letter/line spacing.designapiVotes: 0GitHub stars: 29
Tailwindcss TransformsAUse when scaling/rotating/translating/skewing an element, configuring transition duration/easing/delay, or applying @keyframes animations.designperformanceVotes: 0GitHub stars: 29
Tailwindcss SpacingAUse when setting margin or padding on any side, centering with m-auto, applying negative margins, or spacing children with space-x-*/space-y-*.designVotes: 0GitHub stars: 29
Tailwindcss SizingAUse when setting element width/height, constraining min/max dimensions, using dynamic viewport height (h-dvh), or fixing an aspect ratio.designdocumentationVotes: 0GitHub stars: 29
Tailwindcss ResponsiveAUse when applying responsive variants at different screen widths, defining a custom breakpoint, or building container-query-based components.designVotes: 0GitHub stars: 29
Tailwindcss LayoutAUse when building flex or grid layouts, positioning elements (absolute/relative/fixed/sticky), managing z-index/inset, or @container queries.designVotes: 0GitHub stars: 29
Tailwindcss InteractivityAUse when controlling cursor appearance, scroll snap/smooth behavior, text selection, pointer-events, touch actions, or caret/accent colors.designgodocumentationVotes: 0GitHub stars: 29
Tailwindcss EffectsAUse when adding box/inset shadows, controlling opacity, applying CSS filters or backdrop filters (glassmorphism), or mask-* utilities.designgoperformanceVotes: 0GitHub stars: 29
Tailwindcss Custom StylesAUse when creating a new named utility class, writing conditional/dark-mode variants, defining a custom variant selector, or using @apply.designVotes: 0GitHub stars: 29
Tailwindcss BordersAUse when styling element borders, rounded corners, focus outlines/rings, or divide-* separators between children.designVotes: 0GitHub stars: 29
Tailwindcss BackgroundsAUse when styling background colors, building linear/radial/conic gradients, setting background images/position/size, or blend modes.designjavascriptgoVotes: 0GitHub stars: 29
Visual ModesAUse when activating visual showcase modes (supersaiyan, kamehameha, over9000) for UI or interaction design - provides mode-specific enhancement checklists.designperformanceVotes: 0GitHub stars: 37
Ux ReviewAMulti-perspective UX review combining usability, accessibility, and interaction design analysis.designgotestingVotes: 0GitHub stars: 37
React ShadcnAshadcn/ui for React with TanStack Form. Use when building UI components, forms, dialogs, tables, toasts, or accessible components.designgoreactVotes: 0GitHub stars: 29