Agent skill
scrcpy-option-ui-builder
This skill should modify the category screens and add the requested scrcpy options to the UI, depending on the type of the option (text, toggle, dropdown, etc.). Use this skill for adding new scrcpy options in the UI.
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/scrcpy-option-ui-builder-majiayu000-claude-skill-regist
SKILL.md
Scrcpy option UI builder
Working directory: /lib/presentation/scrcpy_config/
UI option screens are present in @lib/presentation/scrcpy_config.
Common, re-usable widgets are present in @lib/presentation/scrcpy_config/widgets.
Steps
- Gather information
- Extend or create UI code in the
<category_screen>.dartfile - Create necessary translations for the the UI Control
1. Gather information
- Refer to /docs/scrcpy_options to find information about the scrcpy option (Argument, name, description, is advanced).
- Find the corresponding argument class in /lib/application/model/scrcpy/arguments/
- If the argument class doesn't exist, first create it using this skill
- Use this argument class in the UI code to get existing value and to update it.
2. Create <category_screen>.dart
- Refer to /lib/presentation/scrcpy_config/video_screen.dart
- Create a similar scrollable screen with necessary dependencies for the new category screen.
- Create a new route inside routes.dart
- Introduce new
NavigationPaneIteminside home_screen.dart using the new route - Follow the next section to extend the screen code with UI controls.
2. Extend existing UI Code
- If the
<category_screen>.dartfile for requested scrcpy option and the respective category already exists, then extend the ScrollableColumn, with the new control(s)
Use /lib/presentation/scrcpy_config/widgets/config_item.dart for wrapping the actual UI control.
- The
ConfigItemwidget expects:
label(key and translation label) to show title, description and argument tooltip.childthe actual control widget (toggle/switch/text input/comboBox/etc.)
- Use
ConfigTextBoxfor text input controls
3. Create translations
- Currently, the project only supports english language.
- The translation file is present here
- Refer to the existing translations under this path inside the JSON: e.g.
confg/video/noVideo - Expected path:
config/<category>/<argument.label> - Required translations:
title,description,arg - Optional:
default(default value for the control e.g. for comboBox)
Didn't find tool you were looking for?