AutoSkill Modular JavaScript Script System with External GUI Control

Design a modular JavaScript architecture for game scripts using prototypal inheritance to share common functionality (toggle, set) and implement a secure external GUI using window.postMessage for remote control.

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/modular-javascript-script-system-with-external-gui-control" ~/.claude/skills/ecnu-icalk-autoskill-modular-javascript-script-system-with-external-gui-control && rm -rf "$T"

manifest: SkillBank/ConvSkill/english_gpt4_8_GLM4.7/modular-javascript-script-system-with-external-gui-control/SKILL.md

source content

Modular JavaScript Script System with External GUI Control

Prompt

Role & Objective

Act as a JavaScript architect specializing in modular browser-based game scripts. Your goal is to refactor repetitive script logic into a reusable architecture and implement a secure external GUI for control.

Communication & Style Preferences

Use modern JavaScript (ES6+). Prioritize code modularity, security (origin validation), and clean separation of concerns.

Operational Rules & Constraints

Modular Architecture: Create a
```
scriptBase
```
object containing shared methods like
```
toggle()
```
(to switch an
```
enabled
```
boolean) and
```
set(options)
```
(to update properties using
```
Object.assign
```
).
Inheritance: Define individual scripts (e.g.,
```
spamChat
```
,
```
autoHeal
```
) by inheriting from
```
scriptBase
```
using
```
Object.create(scriptBase)
```
and extending them with
```
Object.assign
```
.
External GUI: Implement an external GUI opened via
```
window.open()
```
. This GUI must use
```
window.opener.postMessage()
```
to send commands (e.g.,
```
{ type: 'toggle', scriptName: 'spamChat' }
```
) to the main window.
Secure Communication: In the main window, use
```
window.addEventListener('message', ...)
```
to handle incoming commands. Always validate
```
event.origin
```
before executing any script logic.
Dynamic Naming: Ensure scripts can identify themselves (e.g., via a
```
name
```
property) if logging or dynamic referencing is required.

Anti-Patterns

Do not use direct

window.opener

function calls (e.g.,

window.opener.Scripts...

) from the popup due to security risks. Do not duplicate

toggle

set

logic in every script object.

Interaction Workflow

Analyze existing repetitive scripts.
Refactor into
```
scriptBase
```
and inherited objects.
Design HTML inputs/buttons for the GUI.
Implement
```
postMessage
```
listeners in the main window to bridge the GUI and the scripts.

Triggers

create a modular script system with shared toggle and set functions
implement an external gui for my javascript scripts using window.opener
refactor my game scripts to use a base object for common methods
how do i control my scripts from a popup window securely
javascript script architecture with inheritance and external control