create-sidebar

Generates a Glyvio SimpleSidebar view with routes, sections, file uploads, and event handling.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a details or configuration sidebar in a Glyvio plugin requires wiring together route classes, state interfaces, design sections, file-drop support, and event handlers while following strict framework rules. This Skill generates the complete sidebar implementation from a small set of input parameters, eliminating boilerplate errors. ## Core Features & Use Cases - Full Sidebar Scaffolding: Produces the route class, state interface, SimpleSidebar view, and interceptor class in one TypeScript file under src/views/sidebars/. - Framework Rule Enforcement: Applies Glyvio constraints automatically, including global runtime injection (no core imports), route path format, EventReturn semantics, and separate userConfigKey for embedded tables. - File Upload Support: Configures drag-and-drop file zones via allowDropFile and the onFileUploaded callback for attachment handling. - Use Case: Ask the agent to create a ProductDetail sidebar for the inventory plugin at route /product-detail-sidebar with a form section and file drop support, and receive a ready-to-register implementation. ## Quick Start Ask the agent to create a Glyvio sidebar named TaskType in the my_plugin namespace at route /task-type-sidebar with a form section and file drop enabled.

Frequently Asked Questions about create-sidebar

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

FAQPage Schema
How do I create a sidebar view in a Glyvio plugin?▼

Provide the sidebar name, plugin namespace, route path, layout sections, and route parameters. The skill generates a TypeScript file in src/views/sidebars/ containing the route class, SimpleSidebar view, and interceptor, which you then register via glyvio_core.routerService.loadRoutes.

How do I add drag-and-drop file upload to a Glyvio sidebar?▼

Set design.allowDropFile = true in the getDesign method and implement the onFileUploaded callback. Inside that callback you can link the uploaded attachment to an entity using attachmentService.saveAttachment and refresh the sidebar state.

Why can't I import SimpleSidebarDesign from Glyvio core packages?▼

Glyvio classes, decorators, services, and entities are injected globally at runtime, so importing them from core packages is prohibited. Use the global namespaces directly, for example new glyvio_core.SimpleSidebarDesign(...).

What should events() return in a Glyvio sidebar action handler?▼

Return 'STATE_UPDATE' when the handler mutates state properties directly, and 'STATE_FREEZED' only for navigation actions like pushPage or pushModal. Returning undefined from a newly added action key is a silent no-op and must be avoided.

Why does my embedded table lose column preferences inside a sidebar?▼

An embedded TableLayoutDesign or grid with user-configurable columns needs its own userConfigKey, separate from the sidebar's state.userConfigKey. The sidebar-level key does not cover per-widget configuration, so set a distinct key on the embedded section.