Dark Mode Migrator
Automates the transition to dark mode in React components by batch-updating Tailwind color classes.
Install
mkdir -p .claude/skills/dark-mode-migrator && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13882" && unzip -o skill.zip -d .claude/skills/dark-mode-migrator && rm skill.zipInstalls to .claude/skills/dark-mode-migrator
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Batch migration tool for adding dark mode support to React componentsKey capabilities
- →Identify target components lacking dark mode support
- →Analyze current color classes in components
- →Apply dark mode mappings for backgrounds, text, and borders
- →Handle special cases like gradients and inverted buttons
- →Verify changes with TypeScript and browser testing
How it works
The skill identifies components without dark mode, analyzes existing color classes, and applies predefined dark mode Tailwind variants based on a color mapping reference.
Inputs & outputs
When to use Dark Mode Migrator
- →Add dark mode to components
- →Migrate background colors to dark mode
- →Audit dark mode support in codebase
About Dark Mode Migrator
Scans components for light-mode color classes and suggests or applies corresponding `dark:` Tailwind classes based on a reference mapping.
Batch migration tool for adding dark mode support to React components
Limitations
- →Existing classes must not be removed, only dark: variants added
- →Existing opacity values must be preserved
- →Contrast must be checked using browser DevTools
How it compares
This skill systematically adds dark mode support by applying predefined Tailwind class mappings, which is more efficient than manually identifying and adding each dark mode class.
Compared to similar skills
Dark Mode Migrator side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| Dark Mode Migrator (this skill) | 0 | 6mo | Review | Beginner |
| screenshot-to-code | 204 | 2mo | No flags | Beginner |
| web-artifacts-builder | 49 | 3mo | Review | Intermediate |
| radix-ui-design-system | 33 | 2mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
screenshot-to-code
OneWave-AI
Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.
web-artifacts-builder
anthropics
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
radix-ui-design-system
sickn33
Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.
react-modernization
wshobson
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
figma-integration
duongdev
Guides design-to-code workflow using Figma integration. Helps extract designs, analyze components, and generate implementation specs. Auto-activates when users mention Figma URLs, design implementation, component conversion, or design-to-code workflows. Works with /ccpm:planning:design-ui, design-approve, design-refine, and /ccpm:utils:figma-refresh commands.
3d-web-experience
davila7
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.