skills.rest
mgifford
mgiffordCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

user-personalization

Implement user personalization controls that respect CSS media queries and persist choices via localStorage.

39|2|Updated Mar 28, 2026
Search Tags:#accessibility#personalization#localstorage#prefers-color-scheme#keyboard-accessibility#user-preferences#prefers-reduced-motion
One-click install
npx skills add https://github.com/mgifford/accessibility-skills --skill user-personalization
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: user-personalization
Source: https://github.com/mgifford/accessibility-skills/tree/main/skills/user-personalization
Command: npx skills add https://github.com/mgifford/accessibility-skills --skill user-personalization

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Projects often add personalization features that improve usability but risk conflicting with OS-level accessibility preferences or overriding user AT settings. This Skill guides teams to implement user configuration controls that respect user needs, persist choices, and honor system preferences such as motion, color scheme, and contrast.

Core Features & Use Cases

  • Implement safe, user-facing preferences (e.g., theme, motion, text sizing) that do not misrepresent accessibility or override system settings.
  • Persist user choices securely and restore them on load, with graceful fallbacks if storage is unavailable.
  • Ensure keyboard accessibility, clear labeling, and machine-readable purpose for cognitive accessibility goals (1.3.6).

Quick Start

Enable a user personalization layer that respects OS preferences, persists user choices, and loads only when personalization features exist.

Frequently Asked Questions about user-personalization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I personalize UI themes without overriding OS-level accessibility preferences?▼

To personalize UI without overriding OS-level accessibility preferences, implement user configuration controls that respect system settings. This ensures user choices for themes or motion do not conflict with native OS accessibility features.

What is the best way to persist user personalization settings using localStorage safely?▼

Safe localStorage usage for user personalization involves persisting choices securely and restoring them on load. This approach includes graceful fallbacks to ensure accessibility settings remain functional if storage is unavailable.

How do CSS media queries like prefers-reduced-motion and prefers-color-scheme work with user preferences?▼

CSS media queries like prefers-reduced-motion and prefers-color-scheme detect OS-level accessibility settings. Combining these queries with user preferences prevents web applications from misrepresenting accessibility or overriding system configurations.

Can I implement keyboard accessibility and machine-readable purpose for cognitive accessibility goals?▼

Yes, you can implement keyboard accessibility and machine-readable purpose to support cognitive accessibility goals. This ensures clear labeling and precise user control over personalization features without causing AT conflicts.

Does adding a personalization layer compromise forced-colors or prefers-contrast settings?▼

A properly configured personalization layer does not compromise forced-colors or prefers-contrast settings. It guides teams to respect these CSS media queries, ensuring user-facing preferences do not override vital system accessibility configurations.

Related Skills

Explore More Software Engineering Skills→
Owl-ListenerOwl-Listener
234

adaptive-interfaces

Detect system preferences and adapt interfaces for color, motion, typography, and density.

Community
Advanced
BrunoAlpezdevBrunoAlpezdev

accessibility

Audit web interfaces against WCAG 2.2 and Lighthouse accessibility findings.

Community
Intermediate
raybargasraybargas

Frontend Accessibility

Enforce frontend accessibility compliance in web UI code.

Community
Basic
mintuzmintuz
21

tailwind

Standardize Tailwind design systems with semantic tokens, CVA variants, and dark-mode theming.

Community
Intermediate