skills.rest
mirkosertic
mirkoserticCOMMUNITY
Explore all skills by this author →
Website𝕏@mirkoserticGitHub

frontend

Implement Megahub web IDE frontend changes with Vite, Blockly, and Web Bluetooth.

5|2|Updated Dec 26, 2025
Search Tags:#frontend#vite#ui development#web components#blockly#web bluetooth#megahub
One-click install
npx skills add https://github.com/mirkosertic/Megahub --skill frontend-mirkosertic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/mirkosertic/Megahub/tree/main/.claude/skills/frontend
Command: npx skills add https://github.com/mirkosertic/Megahub --skill frontend-mirkosertic

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill gives you the project-specific context needed to safely build and maintain the Megahub web IDE without breaking the browser, Bluetooth, or layout conventions that the app depends on.

Core Features & Use Cases

  • Web IDE Development: Work on the Vite-based frontend, including app startup, routing, state handling, and browser integration.
  • Blockly and UI Work: Extend visual programming behavior, custom blocks, sidebar panels, project management, logs, and preview components.
  • Platform-Specific Constraints: Keep changes compatible with Web Bluetooth, VS Code-like theming, Shadow DOM components, and the app’s mode-based layout system.
  • Use Case: Add a new sidebar panel or refine the project editor while preserving the existing Megahub styling, interaction patterns, and mode visibility rules.

Quick Start

Use the frontend skill to implement a Megahub IDE change in the /frontend directory while following the existing Vite, Blockly, Web Bluetooth, and theme-token conventions.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I add a custom sidebar panel to a Vite web IDE without breaking Shadow DOM conventions?▼

To add a custom sidebar panel in a Vite web IDE, use Shadow DOM component patterns and the app's shared status APIs. This ensures your panel integrates cleanly without breaking the existing layout system or visual programming workspace conventions.

What's the best way to handle Web Bluetooth user-gesture requirements in a browser-based IDE?▼

Handling Web Bluetooth user-gesture requirements involves triggering the connection request directly from a user interaction like a button click. The frontend skill ensures browser-specific UI flows remain compatible with these strict gesture constraints during Bluetooth mode.

How do I apply VS Code-like theming to web components using CSS theme tokens?▼

Applying VS Code-like theming to web components requires using predefined CSS theme tokens instead of hardcoded values. The frontend skill enforces consistent use of these tokens to maintain styling parity across development, Bluetooth, and WiFi modes.

Does Web Bluetooth work with Shadow DOM components in a Vite frontend application?▼

Web Bluetooth works with Shadow DOM components when the API call is bound to a user gesture in the light DOM. The frontend skill supports building browser-specific UI flows that preserve these Web Bluetooth interactions and mode-based visibility rules.

How to extend visual programming behavior in a Blockly web IDE while preserving mode-based layout rules?▼

Extending visual programming behavior in a Blockly web IDE involves creating custom blocks and sidebar panels while adhering to the app's mode-based layout system. The frontend skill guides these modifications to ensure mode visibility rules remain intact.

Why does my Megahub IDE layout break when adding new project editor components?▼

Your Megahub IDE layout breaks when new components bypass the established Shadow DOM patterns and CSS theme tokens. The frontend skill provides the project-specific context needed to build editors safely without breaking these layout conventions.

Related Skills

Explore More Software Engineering Skills→
bradtaylorsfbradtaylorsf
8

vite-config

Generate Vite configuration files with server, build, and environment variable patterns.

Community
Intermediate
PlayableIntelligencePlayableIntelligence
307

game-deploy

Deploy browser games to here.now, GitHub Pages, Vercel, or Netlify.

Official
Advanced
elliewlh2094elliewlh2094

ros2-web-integration

Integrate ROS2 robots with web platforms via REST and WebSocket protocols.

Community
Intermediate
gil00pitagil00pita

web-components

Define and register framework-agnostic web components using Custom Elements and Shadow DOM.

Community
Intermediate