smithery.ai

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.

First seen May 3, 2026

Installation

$ npx skills add https://smithery.ai

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

Also in this package

Other skills from smithery.ai · top by installs.

npx skills add https://smithery.ai

Browse all from smithery.ai

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Skill metadata

Parsed from SKILL.md frontmatter.

Declared agents claude-code

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,819 B
  • docs SUMMARY.md 249 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 1 installs

SKILL.md

Scrcpy option UI builder

Working directory: [/lib/presentation/scrcpyconfig/](/lib/presentation/scrcpyconfig/)

UI option screens are present in @lib/presentation/scrcpy_config.

Common, re-usable widgets are present in @lib/presentation/scrcpy_config/widgets.

Steps

  1. Gather information
  2. Extend or create UI code in the <category_screen>.dart file
  3. Create necessary translations for the the UI Control

1. Gather information

  • Refer to [/docs/scrcpyoptions](/docs/scrcpyoptions) to find information about the scrcpy option (Argument, name,

description, is advanced).

  • Find the corresponding argument class

in [/lib/application/model/scrcpy/arguments/](/lib/application/model/scrcpy/arguments/)

  • If the argument class doesn't exist, first create it

using [this skill](/.claude/skills/scrcpy-cli-argument-to-code-mapper)

  • 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/scrcpyconfig/videoscreen.dart](/lib/presentation/scrcpyconfig/video/videoscreen.dart)
  • Create a similar scrollable screen with necessary dependencies for the new category screen.
  • Create a new route inside [routes.dart](/lib/routes.dart)
  • Introduce new NavigationPaneItem inside [homescreen.dart](/lib/presentation/home/homescreen.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>.dart file for requested scrcpy option and the respective category already exists, then

extend the Scrollable Column, with the new control(s) - Use [/lib/presentation/scrcpyconfig/widgets/configitem.dart](/lib/presentation/scrcpyconfig/widgets/configitem.dart) for wrapping the actual UI control.

  • The ConfigItem widget expects:
  1. label (key and translation label) to show title, description and argument tooltip.
  2. child the actual control widget (toggle/switch/text input/comboBox/etc.)
  • Use [ConfigTextBox](/lib/presentation/scrcpyconfig/widgets/configtext_box.dart) for text input controls

3. Create translations

  • Currently, the project only supports english language.
  • The translation file is present [here](/assets/i18n/en.json)
  • 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)