메뉴
Use when editing UI code in any panel or effect Draw*Params function. Enforces the Signal Stack design language. Triggers on UI edits to src/ui/, src/effects/ UI sections, drawable_type_controls.cpp, or when reviewing effect UI for consistency.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use when adding a new transform effect, creating a post-process shader, or planning effect implementation. Provides the complete checklist of files and commonly-missed steps.
Use when exploring a vague idea, finding inspiration, or researching a technique before planning. Triggers on "I want to add...", "what if...", "research", "look up", or when uncertain about what to build.
Use when creating a git commit for staged or unstaged changes. Triggers on "commit this", "save my changes", or when implementation work completes and needs version control.
Use when creating a tagged release with changelog. Triggers on "release", "tag a release", "cut a release", or when ready to publish a new version.
Use when reviewing an implemented feature against its plan document. Triggers after implementation completes, on "review this", or when checking if code matches specification.
Use when planning a new feature before implementation. Triggers on "plan", "design", "architect", or when describing a feature to build.
| name | ui-guide |
| description | Use when editing UI code in any panel or effect Draw*Params function. Enforces the Signal Stack design language. Triggers on UI edits to src/ui/, src/effects/ UI sections, drawable_type_controls.cpp, or when reviewing effect UI for consistency. |
Follow these rules when writing or modifying UI code.
Three patterns for three contexts:
SeparatorText("Label") - Universal section divider. Lightweight inline text with theme border. No interaction. The default choice.
Module Strip (DrawModuleStripBegin/End) - Compact repeating items. 3px left accent bar, background tint (accent at ~8% alpha), top rim-light (1px, accent at ~24% alpha), enable indicator dot (click-to-toggle). Always visible, never collapsible. Accent cycles per item via Theme::GetSectionAccent(i).
DrawSectionBegin/End() - Collapsible sections. Gradient box + left accent bar + collapse arrow. Effects window per-effect entries only.
Collapsible: Only per-effect entries in the Effects window.
Never collapsible: Everything else. If the user navigated there, they want to see it.
| Context | Use | Collapsible? |
|---|---|---|
| Per-effect entry in Effects window | DrawSectionBegin/End() | Yes |
| Subsections inside an expanded effect | SeparatorText() | No |
| LFO modules | DrawModuleStripBegin/End() | No |
| All other panel sections | SeparatorText() | No |
Level 0: Window Title (docking tab)
Level 1: DrawGroupHeader() -- Effects window pipeline groups ONLY
Level 2: DrawCategoryHeader() -- Effects window transform categories ONLY
Level 3: DrawSectionBegin/End() -- Effects window per-effect ONLY (collapsible)
Level 4: SeparatorText() -- Universal section divider (everywhere)
Most panels use only Level 0 and Level 4. Only the Effects window uses all five.
TextColored() as a section headerTreeNodeAccented() (deprecated, convert to SeparatorText)ImGui::Separator() + ImGui::Spacing() as a manual section breakDrawGroupHeader() restating the window titleCanonical order for SeparatorText subsections in Draw<Name>Params(). Skip what doesn't apply.
1. Audio -- FFT: baseFreq, maxFreq, gain, contrast, baseBright
2. Geometry -- Spatial: scale, size, layers, radius, count, offset
3. [Domain] -- Effect-specific (0-4 sections, unique names)
4. Animation -- Time: speed, phase, frequency, spin, drift
5. Glow -- Brightness: threshold, intensity, radius, softness
6. Color -- Color: tint, saturation, hue shift
6+ params requires sections. 5 or fewer can be flat.
| Use | Not |
|---|---|
"Audio" | -- |
"Geometry" | "Shape", "Grid", "Layout", "Structure" |
"Animation" | "Motion", "Timing", "Dynamics", "Movement" |
"Glow" | "Visual", "Rendering", "Appearance", "Bloom" |
"Color" | "Tonemap", "Palette" |
"Trail" | "Decay", "History", "Persistence" |
Domain-specific names are fine when no standard name fits (e.g., "Flocking", "Pressure", "Wave", "Raymarching").
When present, always this order:
SeparatorText("Audio");
ModulatableSlider("Base Freq (Hz)", &cfg->baseFreq, "{name}.baseFreq", "%.1f", ms); // 27.5-440, default 55
ModulatableSlider("Max Freq (Hz)", &cfg->maxFreq, "{name}.maxFreq", "%.0f", ms); // 1000-16000, default 14000
ModulatableSlider("Gain", &cfg->gain, "{name}.gain", "%.1f", ms); // 0.1-10, default 2.0
ModulatableSlider("Contrast", &cfg->curve, "{name}.curve", "%.2f", ms); // 0.1-3, default 1.5
ModulatableSlider("Base Bright", &cfg->baseBright, "{name}.baseBright", "%.2f", ms); // 0-1, default 0.15
Do not use ModulatableSliderLog for baseFreq.
| Widget | When |
|---|---|
ModulatableSlider() | Float params with modulation |
ModulatableSliderAngleDeg() | Static angle (radians stored, degrees displayed) |
ModulatableSliderSpeedDeg() | Rotation speed (rad/s stored, deg/s displayed) |
ModulatableSliderLog() | Small float ranges like 0.01-1.0 |
ModulatableSliderInt() | Integer params stored as float for modulation |
ImGui::SliderInt() | True integers, no modulation |
ImGui::Combo() | Enum/mode selection |
ImGui::Checkbox() | Boolean toggles |
Use STANDARD_GENERATOR_OUTPUT(field) macro for the Color/Output section. Place immediately before REGISTER_GENERATOR. Same section ordering rules apply to the params function.