create-edit-modal-interceptor

Generates and registers a TypeScript interceptor class that customizes Glyvio SimpleEditModal views.

1|Updated Jun 11, 2026
One-click install
npx skills add https://github.com/devena/glyvio-forge --skill create-edit-modal-interceptor-devena
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-edit-modal-interceptor
Source: https://github.com/devena/glyvio-forge/tree/main/claude/skills/create-edit-modal-interceptor
Command: npx skills add https://github.com/devena/glyvio-forge --skill create-edit-modal-interceptor-devena

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Customizing an existing Glyvio SimpleEditModal view requires understanding its live design tree, choosing the correct abstract interceptor base class, and wiring registration boilerplate, which is error-prone when done by hand. ## Core Features & Use Cases - Live Design Capture: Uses a temporary SpyInterceptor plus the chrome_inspector.js script to extract the modal's actual design JSON as ground truth before writing any code. - Guided Code Generation: Produces a complete interceptor class with hooks for design changes, query modification, onSave, onCancel, and event handling, following strict rules (no any, no external Glyvio imports, unique listener IDs). - Base Class Resolution: Searches .d.ts declaration files to select the correct abstract interceptor, honoring "You MUST extend this instead." JSDoc markers. - Use Case: Add a custom field and a pre-save validation rule to the CustomUserEditModal of another Glyvio plugin without modifying that plugin's source code. ## Quick Start Ask the agent to create an edit modal interceptor for a target Glyvio modal, providing the modal name, route class, entity name, and the modifications you want applied.

Frequently Asked Questions about create-edit-modal-interceptor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I customize a Glyvio SimpleEditModal from another plugin?▼

Create a class extending the modal's abstract SimpleEditModalInterceptor, override hooks like getDesign, populateMainQuery, and onSave, then register it via glyvio_core.appInterceptorService.registerInterceptors in src/index.ts.

How to capture the current design JSON of a Glyvio edit modal?▼

Register a temporary SpyInterceptor that stores the design on window.__finalDesign, rebuild with pnpm build, then run node .claude/scripts/chrome_inspector.js <ModalName> against Chrome with remote debugging on port 9222 to save the JSON to .agents/temp.

Which base class should a Glyvio modal interceptor extend?▼

Search the plugin's .d.ts declaration files for the abstract interceptor whose getListenerRoute returns the target route class. If a subclass carries the JSDoc comment "You MUST extend this instead.", extend that specialized class rather than the generic parent.

Can I import Glyvio classes like ActionButtonDesign from core packages?▼

No. Glyvio classes, decorators, services, and entities are injected globally at runtime, so reference them through globals like glyvio_core.ActionButtonDesign instead of importing from core packages.

What if Chrome remote debugging is unavailable during design capture?▼

Fall back to asking the user to provide the modal's current design JSON from modal.getDesignRaw(state) or the browser console, or to save it manually to .agents/temp/<ModalName>_design.json before proceeding.