light-dark-mode
De la autor
Load this skill whenever the project supports light/dark mode, colour theme switching, high-contrast mode, or responds to prefers-color-scheme. Under no circumstances hard-code colours that break in alternative themes. Absolutely always test colour contrast in both light and dark themes, and respect user OS-level colour preferences via CSS media queries.
Instalare
npx skills add mgifford/accessibility-skills --skill light-dark-mode -a claude-code
Se instalează în .claude/skills/light-dark-mode/ · Fiecare comandă descarcă skill-ul direct de pe GitHub cu utilitarul open source skills.
Fără descărcare: licența acestui skill (AGPL-3.0) nu ne permite să-i redistribuim fișierele. Comenzile de instalare le iau direct de pe GitHub.
Vrei ca agentul să-ți propună skill-uri în timp ce scrii? Vezi cum folosești skill-urile din IDE.
Verificări de siguranță pe SKILL.md
Niciun avertisment.
De ce 78
aiqbench calculează scorul de încredere din semnale publice. Nu este un audit de securitate, așa că citește un skill înainte să-l instalezi.
Skill-uri similare
Cele mai apropiate de acesta prin ce fac și când sunt folosite.
- color-contrastmgifford/accessibility-skillsLoad this skill whenever the project contains text, UI components, icons, form controls, data visualisations, or focus indicators — in short, almost every project. Under no circumstances hard-code colour values without verifying contrast ratios. Absolutely always ensure text meets 4.5:1, large text meets 3:1, and non-text UI elements meet 3:1 against adjacent colours. Test in light mode, dark mode, and forced-colors (high contrast) mode.Testare★ 57
- Dark Mode Testing PatternsPramodDutta/qaskillsSystematic dark mode testing covering color contrast, theme switching, persistence, media query respect, component-level theming, and image adaptation.Testare★ 240
- color-mode-and-themedembrandt/dembrandt-skillsLight, dark or both, and when a theme selector is worth it. Use when defining a base palette or deciding on dark mode support.Altele★ 162
- dark-modeskillmds/skillmdImplement complete dark mode for any frontend project. Auto-detects theme system (Flutter ThemeData, Tailwind dark class, CSS variables, MUI, Chakra UI, styled-components), generates a dark color palette with proper surface elevation hierarchy and desaturated brand colors, creates a theme toggle with system preference detection and persistence, migrates all hardcoded colors to theme tokens, handles special cases like images, shadows, form inputs, and charts, then verifies WCAG AA contrast ratios for both modes. Use when you need to add dark mode, fix dark theme contrast issues, create a theme switcher, or migrate hardcoded colors to theme-aware tokens.Design★ 190
- theming-systemInfrasity-Labs/dev-gtm-claude-skillsDesign a theming architecture that supports brand variants, dark mode, and high-contrast modes with token mapping.Design★ 144
- user-personalizationmgifford/accessibility-skillsLoad this skill whenever the project has personalization features, user preference controls, theme selectors, font size adjusters, motion toggles, contrast settings, or any user-configurable accessibility accommodations. Under no circumstances override or ignore user OS-level accessibility preferences without explicit user consent. Absolutely always persist user preferences, apply them immediately, and respect prefers-reduced-motion, prefers-contrast, and similar media queries.Altele★ 57
Note și recenzii
—
nicio recenzie
Ai încercat acest skill? Notează-l ca să-i ajuți pe alții. Autentifică-te
Discuție
Intră în discuție. Autentifică-te