Help us improve
Share bugs, ideas, or general feedback.
From designpowers
Guides designing adaptive web interfaces that respect user preferences for motion sensitivity, contrast, color schemes, text sizing, and information density using CSS media queries.
npx claudepluginhub owl-listener/designpowersHow this skill is triggered — by the user, by Claude, or both
Slash command
/designpowers:adaptive-interfacesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Good design does not force everyone through the same experience. It adapts. This skill ensures interfaces respect user preferences, system settings, and individual needs — not as optional extras, but as fundamental design requirements.
Provides UI/UX design guidance for unique, accessible web interfaces covering colors, typography, layouts. Always asks before decisions; activates for building web components, pages, apps.
Guides principled UI composition for layouts, color palettes, typography, visual hierarchy, spacing, and responsive design ensuring WCAG accessibility alongside aesthetics.
Generates distinctive, production-grade frontend code for web components, pages, and apps with bold, creative UX designs in styles like brutalist or retro-futuristic, avoiding generic AI aesthetics.
Share bugs, ideas, or general feedback.
Good design does not force everyone through the same experience. It adapts. This skill ensures interfaces respect user preferences, system settings, and individual needs — not as optional extras, but as fundamental design requirements.
Review the design and map what should adapt:
| Property | User Preference | CSS/System Signal |
|---|---|---|
| Colour scheme | Light/dark/custom | prefers-color-scheme |
| Contrast | Standard/high | prefers-contrast |
| Motion | Full/reduced/none | prefers-reduced-motion |
| Text size | System font size settings | rem/em units, viewport scaling |
| Information density | Compact/comfortable/spacious | User setting or breakpoint |
| Transparency | Standard/reduced | prefers-reduced-transparency |
Motion is the most commonly harmful interface property. Handle it rigorously:
Default behaviour:
prefers-reduced-motion: reduce disables non-essential animationImplementation pattern:
/* Full motion (default) */
.element { transition: transform 300ms ease-out; }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.element { transition: none; }
}
Never autoplay:
Dark mode is not "invert the colours." It is a separate design exercise:
Text must be resizable without breaking the layout:
rem or em units, never fixed px for font sizesDifferent users need different densities:
If offering density controls:
For each adaptive property, document:
ui-composition, interaction-designcognitive-accessibility (density and simplification), inclusive-personas (preference awareness)designpowers-critique