Menu
Add SVG icon buttons to the UI. Use when creating or modifying buttons that use SVG icons from the assets directory.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Code-sign the MAGDA Windows installer with the Certum cloud certificate (SimplySign). Use when releasing on Windows, when the signing job in release.yml needs attention, or when troubleshooting "cert not found" / SmartScreen warnings.
Work on MAGDA's compiled Faust devices (synths/FX whose DSP is a .dsp file compiled to C++ at build time). Use when adding or changing a parameter on a compiled Faust plugin (e.g. Poly Synth, the filter engines, compiled FX), creating a new compiled Faust device, or wiring its custom UI. Covers the .dsp -> generated.cpp pipeline, the host-slot contract, and UI/linking.
Update the MAGDA application icon (dock / taskbar / window icon) from a new source PNG. Use when the user wants to change, swap, or update the app icon, e.g. "update the app icon to Bold-M6". Covers the assets/app_icon.png pipeline, the square-PNG requirement, and rebuilding so JUCE regenerates the .icns/.ico.
Manage MAGDA translations via Crowdin - how to add source strings, push sources, push a specific locale's translation via CLI, and the rules about who writes what.
Write values from MAGDA into a te::AutomatableParameter (slider moves, controller input, state restore, modifier sync). Covers the setParameterFromHost requirement, why setParameter silently drops host writes when modifiers are active, and what to do after a TE submodule bump. Use when adding a new DeviceProcessor, wiring a new control surface, debugging "slider does nothing when an LFO/macro is on the parameter", or rebasing the TE patch.
Tag and push a release. Use when the user says "release X.Y.Z". Does NOT merge any branches — just tags the current HEAD and pushes.
| name | svg-button |
| description | Add SVG icon buttons to the UI. Use when creating or modifying buttons that use SVG icons from the assets directory. |
Located at magda/daw/ui/components/common/SvgButton.hpp in namespace magda.
// Single icon — colors icon based on hover/press/active state
SvgButton(const juce::String& buttonName, const char* svgData, size_t svgDataSize);
// Dual icon — separate off/on SVGs with pre-baked colors
SvgButton(const juce::String& buttonName, const char* offSvgData, size_t offSvgDataSize,
const char* onSvgData, size_t onSvgDataSize);
SvgButton requires constructor args, so use std::unique_ptr:
Header (include ui/components/common/SvgButton.hpp):
std::unique_ptr<magda::SvgButton> myButton_;
Constructor (BinaryData generated from CMakeLists):
myButton_ = std::make_unique<magda::SvgButton>("MyButton", BinaryData::icon_svg,
BinaryData::icon_svgSize);
myButton_->setTooltip("Do something");
myButton_->onClick = [this] { /* handler */ };
addAndMakeVisible(myButton_.get());
resized() — use pointer dereference:
myButton_->setBounds(area.removeFromLeft(22));
// Colors (single-icon mode)
myButton_->setNormalColor(juce::Colour);
myButton_->setHoverColor(juce::Colour);
myButton_->setPressedColor(juce::Colour);
myButton_->setActiveColor(juce::Colour);
// Background colors
myButton_->setNormalBackgroundColor(juce::Colour);
myButton_->setActiveBackgroundColor(juce::Colour);
// Border
myButton_->setBorderColor(juce::Colour);
myButton_->setBorderThickness(float);
// Toggle state
myButton_->setActive(true);
Default colors come from DarkTheme: normal=TEXT_SECONDARY, hover=TEXT_PRIMARY, pressed/active=ACCENT_BLUE.
assets/icons/ (or a subdirectory)magda/daw/CMakeLists.txt:
juce_add_binary_data(MagdaAssets SOURCES
...
../../assets/icons/my_icon.svg
...
)
my_icon.svg → BinaryData::my_icon_svg / BinaryData::my_icon_svgSizemy-icon.svg → BinaryData::myicon_svg (hyphens stripped)subdir/icon.svg → same as icon.svg (path not part of name)assets/icons/ — app-specific icons (random.svg, enter.svg, delete.svg, etc.)assets/icons/fontaudio/ — FontAudio music icons (fad-*.svg)assets/icons/IO/ — input/output iconsassets/icons/browser_icons/ — browser panel iconsassets/icons/cloud_providers/ — cloud service logosFor buttons with distinct on/off visuals (e.g. play/pause):
myButton_ = std::make_unique<magda::SvgButton>(
"PlayPause",
BinaryData::play_off_svg, BinaryData::play_off_svgSize,
BinaryData::play_on_svg, BinaryData::play_on_svgSize);
myButton_->setClickingTogglesState(true);
No need to set LookAndFeel — SvgButton has its own paintButton override.