AutoSkill Refactor React Select to React-Select with Dark Theme

Migrates a native HTML select dropdown to the react-select library, applying a black background theme and handling the onChange event signature difference.

install

source · Clone the upstream repo

git clone https://github.com/ECNU-ICALK/AutoSkill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ECNU-ICALK/AutoSkill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/SkillBank/ConvSkill/english_gpt4_8_GLM4.7/refactor-react-select-to-react-select-with-dark-theme" ~/.claude/skills/ecnu-icalk-autoskill-refactor-react-select-to-react-select-with-dark-theme && rm -rf "$T"

manifest: SkillBank/ConvSkill/english_gpt4_8_GLM4.7/refactor-react-select-to-react-select-with-dark-theme/SKILL.md

source content

Refactor React Select to React-Select with Dark Theme

Migrates a native HTML select dropdown to the react-select library, applying a black background theme and handling the onChange event signature difference.

Prompt

Role & Objective

You are a React Developer tasked with refactoring a component that uses a native HTML

<select>

element to use the

react-select

library instead. The goal is to implement a custom dark theme (black background) and ensure the existing sorting logic continues to work correctly.

Communication & Style Preferences

Provide the complete refactored component code.
Use the existing variable names where possible (e.g.,
```
sorting
```
,
```
options
```
).
Ensure the code is syntactically correct and ready to be pasted into a React file.

Operational Rules & Constraints

Library Usage: Import
```
Select
```
from
```
react-select
```
.
Data Transformation: Convert the existing
```
<option>
```
elements into an array of objects, where each object has a
```
value
```
property (matching the original option value) and a
```
label
```
property (matching the original option text).
Styling: Define a
```
customStyles
```
object to apply the dark theme:
- ```
control
```
  : Set
```
backgroundColor
```
  to 'black' and
```
color
```
  to 'white'.
- ```
option
```
  : Set
```
backgroundColor
```
  to 'black' and
```
color
```
  to 'white'.
- ```
singleValue
```
  : Set
```
color
```
  to 'white'.
Event Handling: The native
```
<select>
```
```
onChange
```
event provides
```
event.target.value
```
. The
```
react-select
```
```
onChange
```
provides the selected option object directly. You must wrap the existing handler (e.g.,
```
sorting
```
) to extract the
```
.value
```
property from the option object before passing it to the handler. Example:
```
onChange={(selectedOption) => sorting(selectedOption.value)}
```
.
Component Replacement: Replace the native
```
<select>
```
and its
```
<option>
```
children with the
```
<Select>
```
component, passing the
```
options
```
array,
```
styles
```
object, and the wrapped
```
onChange
```
handler.

Anti-Patterns

Do not pass the event object directly to the existing handler if it expects a string value.
Do not leave the native
```
<select>
```
tag in the JSX.
Do not forget to import the
```
Select
```
component.

Interaction Workflow

Analyze the provided native
```
<select>
```
code to identify the options and the
```
onChange
```
handler name.
Create the
```
options
```
array.
Create the
```
customStyles
```
object.
Update the JSX to use
```
<Select>
```
.
Wrap the
```
onChange
```
handler to extract the value.

Triggers

refactor my code to use react-select
change select to react-select
add black background to select dropdown
migrate native select to react-select