dashersw/coyopedal/editing-the-gea-ui
Claude Code and agent skill by dashersw/coyopedal
- community
Checking that the SKILL.md file is still in the repository.
Use when changing the touchscreen UI — screens, JSX components, styles, PedalboardStore, the board API boundary, or the browser preview — or when a UI change needs to be seen in a browser.
Install
npx vskill@latest install dashersw/coyopedal/editing-the-gea-uiSKILL.md
The Gea UI
A single TypeScript/JSX app runs on both targets. The web build uses Vite and @geajs/core. On the ESP32, @geastack/compiler lowers it to native C++, and there is no JS VM.
Map
| Path | Role | |
|---|---|---|
src/ui/index.tsx | mount(App) entry | |
src/ui/components/*.tsx + .css | One stylesheet per component; App.css holds only shared shell/utilities | |
src/ui/stores/PedalboardStore.ts | Navigation, preset actions, view of board state (PageStore.ts for paging) | |
src/ui/board.ts | Typed boundary to audio controls and preset storage | |
src/preview/ | Browser-only fixture for board.ts, plus mouse-drag scrolling | |
scripts/panel-host-plugin.mjs | Declares the board boundary to the compiler (gea.compilerPlugins) | |
src/native/ui/board_bridge.cpp | Native implementation of the board API | |
src/native/ui/controls.c, task.cpp | Audio control state; tuner and preset-save pumps around the frame loop |
Adding a board call
Add it in three places: the type in src/ui/board.ts, the fixture in src/preview/, and the native side in board_bridge.cpp. Also declare it in scripts/panel-host-plugin.mjs if the plugin enumerates it. Keep the store the only caller.
Seeing it
npm run devstarts the Vite server..claude/launch.jsondefinesdevon port 3000, so use
the preview tools with that name. The layout fills the viewport width with fixed-size text and a minimum height of 205 logical px. The preview width selector covers 251 px (2.06), 300 px (landscape 2.41), 480 px and fit-window; preview zoom is 2×. Board key 3 is the logical viewport width used by slider hit testing.
npm run preview:panelwritesbuild/ui-preview/.node --test tests/gea-store.test.mjsandnpm run check:frontend.npm run build:firmwareis the only check of the native lowering. Compilation must keep
dynamic fallback disabled.
Don'ts
- Don't edit generated C++ or rasterised assets under
.gea/build/. - Don't add a JS runtime, a second compiler invocation, a local panel/display component or the
old hand-written screen renderer.
- Don't enable Gea's own network services. Wi-Fi and BLE belong to the maintenance service.
- The browser preview doesn't show device frame rate, PSRAM headroom or audio impact.
UI boot has caused audio misses before (see measuring-pedal-audio).
- Fonts:
assets/fonts/Saira-Bold-Pedal.otf, Saira Bold with icon glyphs drawn in by
node tools/font_glyphs.mjs (edit its GLYPHS table and rerun). The panel only has printable ASCII and a short list of extra codepoints (embeddedFontExtraCodepoints in @geastack/core); icons are glyphs drawn there (‹ › are chevrons). Don't use SVG, images or rotated borders for icons. Public asset paths must be literals so both Vite and the embedded asset linker resolve them.
Security
- Security scanPassed, 95 of 100Pattern checks on the skill's files.
- Model reviewPassed
Quality evaluation
- Task evaluationNot runNo evaluation yet. Run one in Skill Studio.
Source
- SKILL.md in the repositoryCheckingskills/editing-the-gea-ui/SKILL.md
Popularity
- 7-day trend score
- 0
Not refreshed yet.
Works with
Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.
- Claude Code
- Cursor
- GitHub Copilot
- Windsurf
- Codex
- Gemini CLI
- Cline
- Amp
- Roo Code
- Goose
- Continue
- Kilo Code
- Junie
- Trae
- OpenHands
- Qwen Code
- AI Agent
- Tabnine Chat
- Sourcegraph Cody
- Amazon Q
- Firebase Genkit
- Sweep
- Devin
- Phind
- Mentat
- Claude Desktop
- Aider
- GPT Pilot
- Plandex
- bolt.new
- v0
- Replit Agent
- Anse
- TypingMind
- BetterChatGPT
- LibreChat
- Warp AI
- Pieces
- Fig AI
Embed badge
[](https://verified-skill.com/skills/dashersw/coyopedal/editing-the-gea-ui)