user-preference-respect

Name: user-preference-respect
Author: Owl-Listener

82stars25forks

How to install user-preference-respect?

owl-listener/inclusive-design-skills/user-preference-respect

$npx -y skills add Owl-Listener/inclusive-design-skills --skill user-preference-respect

Installs into the current project.

Summary

Design interfaces that detect and respond to system-level user preferences. Use when implementing dark mode, reduced motion, high contrast, text scaling, or any user preference that affects how the interface renders. Triggers on: user preference, system preference, prefers-reduce

Files · 1

View on GitHub

SKILL.md

1	# User Preference Respect
2
3	The operating system already knows what the user needs. Your job is
4	to listen and respond. These preferences exist because people set them
5	deliberately — ignoring them overrides the user's own accessibility
6	decision.
7
8	## The Preferences
9
10	### prefers-reduced-motion
11	What it means: user experiences discomfort or harm from motion.
12	What to do:
13	- Disable all decorative animation
14	- Replace slide/fade transitions with instant state changes
15	- Keep essential motion (loading spinners) but simplify
16	- Disable parallax, scroll-triggered animation, and auto-advance
17	- Never override this preference
18
19	How to detect: `@media (prefers-reduced-motion: reduce)`
20
21	### prefers-contrast
22	What it means: user needs stronger visual distinction.
23	What to do:
24	- Increase contrast beyond WCAG minimums
25	- Replace subtle shadows and gradients with solid borders
26	- Make focus indicators bolder and more visible
27	- Remove transparency and blur effects
28	- Increase border widths on interactive elements
29
30	How to detect: `@media (prefers-contrast: more)`
31
32	### prefers-color-scheme
33	What it means: user prefers light or dark interface.
34	What to do:
35	- Provide genuine dark mode (not just inverted colours)
36	- Ensure all content is legible in both modes
37	- Test images, charts, icons, and illustrations in both
38	- Don't use pure black (#000) on dark mode — use dark grey (#1a1a1a)
39	for less eye strain
40	- Remember: dark mode is not just aesthetic — it reduces eye
41	fatigue and helps some people with light sensitivity
42
43	How to detect: `@media (prefers-color-scheme: dark)`
44
45	### forced-colors
46	What it means: user has enabled Windows High Contrast or similar.
47	What to do:
48	- Don't fight the system colour override
49	- Ensure borders and outlines define interactive elements
50	(the system will strip your colours)
51	- Use transparent borders that become visible in forced-colors mode
52	- Test that all interactive elements remain distinguishable
53	- Don't rely on background colour alone to indicate state
54
55	How to detect: `@media (forced-colors: active)`
56
57	### prefers-reduced-transparency
58	What it means: user finds transparent elements hard to read.
59	What to do:
60	- Replace semi-transparent backgrounds with solid ones
61	- Remove frosted glass / backdrop blur effects
62	- Ensure overlays are fully opaque
63
64	How to detect: `@media (prefers-reduced-transparency: reduce)`
65
66	## Implementation Principles
67
68	### Progressive Enhancement
69	- Build the accessible version first
70	- Add motion, transparency, and visual flourishes as enhancements
71	- When a preference is detected, you're removing the enhancement,
72	not degrading the experience
73
74	### Don't Ask — Detect
75	- Don't make users configure accessibility settings in your app
76	when the OS already has the setting
77	- Detect and respond automatically
78	- If you offer additional settings, they should layer on top of
79	system preferences, not replace them
80
81	### Test Every Preference
82	- Test with each preference enabled individually
83	- Test with combinations (reduced motion + high contrast + dark mode)
84	- Verify that the interface is complete and usable in every state
85	- Automated tests can check that media queries exist —
86	manual testing verifies they work
87
88	## Assessment Checklist
89
90	- [ ] prefers-reduced-motion is detected and all decorative motion stops
91	- [ ] prefers-contrast is detected and visual contrast increases
92	- [ ] prefers-color-scheme is detected and theme switches
93	- [ ] forced-colors mode doesn't break interactive elements
94	- [ ] Combinations of preferences work together
95	- [ ] No preference is overridden or ignored

People who liked this also viewed

6 picks

Type

user-preference-respect

82stars25forks

View on GitHub

How to install user-preference-respect?

owl-listener/inclusive-design-skills/user-preference-respect

$npx -y skills add Owl-Listener/inclusive-design-skills --skill user-preference-respect

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# User Preference Respect
2
3	The operating system already knows what the user needs. Your job is
4	to listen and respond. These preferences exist because people set them
5	deliberately — ignoring them overrides the user's own accessibility
6	decision.
7
8	## The Preferences
9
10	### prefers-reduced-motion
11	What it means: user experiences discomfort or harm from motion.
12	What to do:
13	- Disable all decorative animation
14	- Replace slide/fade transitions with instant state changes
15	- Keep essential motion (loading spinners) but simplify
16	- Disable parallax, scroll-triggered animation, and auto-advance
17	- Never override this preference
18
19	How to detect: `@media (prefers-reduced-motion: reduce)`
20
21	### prefers-contrast
22	What it means: user needs stronger visual distinction.
23	What to do:
24	- Increase contrast beyond WCAG minimums
25	- Replace subtle shadows and gradients with solid borders
26	- Make focus indicators bolder and more visible
27	- Remove transparency and blur effects
28	- Increase border widths on interactive elements
29
30	How to detect: `@media (prefers-contrast: more)`
31
32	### prefers-color-scheme
33	What it means: user prefers light or dark interface.
34	What to do:
35	- Provide genuine dark mode (not just inverted colours)
36	- Ensure all content is legible in both modes
37	- Test images, charts, icons, and illustrations in both
38	- Don't use pure black (#000) on dark mode — use dark grey (#1a1a1a)
39	for less eye strain
40	- Remember: dark mode is not just aesthetic — it reduces eye
41	fatigue and helps some people with light sensitivity
42
43	How to detect: `@media (prefers-color-scheme: dark)`
44
45	### forced-colors
46	What it means: user has enabled Windows High Contrast or similar.
47	What to do:
48	- Don't fight the system colour override
49	- Ensure borders and outlines define interactive elements
50	(the system will strip your colours)
51	- Use transparent borders that become visible in forced-colors mode
52	- Test that all interactive elements remain distinguishable
53	- Don't rely on background colour alone to indicate state
54
55	How to detect: `@media (forced-colors: active)`
56
57	### prefers-reduced-transparency
58	What it means: user finds transparent elements hard to read.
59	What to do:
60	- Replace semi-transparent backgrounds with solid ones
61	- Remove frosted glass / backdrop blur effects
62	- Ensure overlays are fully opaque
63
64	How to detect: `@media (prefers-reduced-transparency: reduce)`
65
66	## Implementation Principles
67
68	### Progressive Enhancement
69	- Build the accessible version first
70	- Add motion, transparency, and visual flourishes as enhancements
71	- When a preference is detected, you're removing the enhancement,
72	not degrading the experience
73
74	### Don't Ask — Detect
75	- Don't make users configure accessibility settings in your app
76	when the OS already has the setting
77	- Detect and respond automatically
78	- If you offer additional settings, they should layer on top of
79	system preferences, not replace them
80
81	### Test Every Preference
82	- Test with each preference enabled individually
83	- Test with combinations (reduced motion + high contrast + dark mode)
84	- Verify that the interface is complete and usable in every state
85	- Automated tests can check that media queries exist —
86	manual testing verifies they work
87
88	## Assessment Checklist
89
90	- [ ] prefers-reduced-motion is detected and all decorative motion stops
91	- [ ] prefers-contrast is detected and visual contrast increases
92	- [ ] prefers-color-scheme is detected and theme switches
93	- [ ] forced-colors mode doesn't break interactive elements
94	- [ ] Combinations of preferences work together
95	- [ ] No preference is overridden or ignored

People who liked this also viewed

6 picks

Type