matlab-uihtml-design — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited matlab-uihtml-design (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Generate production-grade HTML/CSS/JS control panels for MATLAB uihtml components with distinctive, configurable visual styles.
uihtmluihtml controlsBuilt-in styles are documented in references/design-styles.md. To apply a style:
references/styles/<name>.md start "" "<skill-directory>/assets/style-gallery.html" # Windows
open "<skill-directory>/assets/style-gallery.html" # macOSThen ask: "I've opened the style gallery in your browser. Which style would you like? You can also describe a custom aesthetic."
The gallery shows interactive previews of all 8 built-in styles with a Dark/Light toggle. The available styles are:
| Style | Vibe |
|---|---|
| Clean | Frosted glass, depth layers, spring animations |
| Material | Tonal surfaces, elevation, rounded shapes |
| Cosmic Dark | Deep space, neon glow, glassmorphism |
| Neumorphic Dark | Embossed/debossed, soft shadow pairs |
| Dashboard Light | White cards, indigo accent, data-dense |
| Midnight Gradient | Blue-to-purple gradients, luxury glow |
| Minimal Mono | Ultra-flat, pill buttons, single accent |
| Warm Dark | Amber/yellow accent, friendly, smart home |
If the user says "just pick one" or wants to move fast, default to Clean.
Each style reference follows the 9-section DESIGN.md format and provides complete specifications for colors, typography, components, motion, and guardrails.
Before generating code, commit to a clear aesthetic direction:
Execute the chosen direction with precision. Bold maximalism and refined minimalism both work, as long as the choice is intentional.
setup(htmlComponent) boilerplate; defer full MATLAB-side wiring to the matlab-uihtml-app-builder skillAll styles use CSS custom properties for theming. The base architecture:
:root {
/* Semantic colors, filled by chosen style */
--color-bg-primary: ...;
--color-bg-secondary: ...;
--color-bg-surface: ...;
--color-accent: ...;
--color-accent-hover: ...;
--color-text-primary: ...;
--color-text-secondary: ...;
--color-border: ...;
/* Spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
/* Typography */
--font-family: ...;
--font-size-sm: ...;
--font-size-md: ...;
--font-size-lg: ...;
/* Radii & Shadows */
--radius-sm: ...;
--radius-md: ...;
--shadow-sm: ...;
--shadow-md: ...;
/* Motion */
--transition-fast: ...;
--transition-med: ...;
}Support both light and dark modes via prefers-color-scheme media query or a data-theme attribute on <html>:
@media (prefers-color-scheme: dark) { ... }
/* or */
[data-theme="dark"] { ... }uihtml containers in MATLAB apps are often height-constrained (e.g., a narrow side panel). When applying any style:
overflow: hidden is set on the body, clipped controls are invisible and unusableWhen the control set genuinely can't be compacted further (4+ panels, mixed sliders + toggles + buttons), make the panel container scroll instead of clipping. Keep body non-scrolling so the background gradient stays anchored, and let the inner .app (or whatever you named the flex column) scroll:
html, body {
overflow: hidden; /* body never scrolls; background gradient stays put */
}
.app {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin; /* Firefox */
scrollbar-color: rgba(255, 255, 255, 0.12) transparent; /* Firefox */
}
/* Chromium (uihtml uses CEF/Chromium) */
.app::-webkit-scrollbar { width: 6px; }
.app::-webkit-scrollbar-track { background: transparent; }
.app::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.10);
border-radius: 3px;
transition: background var(--t-fast);
}
.app::-webkit-scrollbar-thumb:hover { background: var(--accent-glow); }Adapt the colors to the chosen palette:
| Style | Thumb default | Thumb hover |
|---|---|---|
| Dark styles (Cosmic Dark, Midnight, Neumorphic, Warm Dark, Minimal Mono) | rgba(255,255,255,0.10) | var(--accent-glow) |
| Light styles (Clean, Dashboard Light, Material light mode) | rgba(0,0,0,0.12) | rgba(0,0,0,0.22) or var(--accent) |
Keep the scrollbar 6px wide and the thumb under 20% alpha; anything heavier breaks the style. Don't show track borders or arrows.
uihtml container sizes; use flexbox/grid with relative unitssetup(htmlComponent) function pattern:function setup(htmlComponent) {
window.htmlComponent = htmlComponent;
// Listen for events from MATLAB
htmlComponent.addEventListener("EventName", function(event) {
// Handle event.Data
});
// Send events to MATLAB
htmlComponent.sendEventToMATLAB("EventName", { key: value });
}SetTheme event. The MATLAB side can detect the desktop theme and push it to the HTML component. The `settings` path is R2025a+, so wrap it in try/catch with a sensible default so the app still works on older releases:% Detect MATLAB desktop theme (R2025a+); fall back to a default on older releases
themeStr = 'dark'; % or 'light', whichever the style is designed for
try
s = settings;
themeStr = lower(char(s.matlab.appearance.MATLABTheme.ActiveValue));
catch
% settings.matlab.appearance not available on this release; keep the default
end
sendEventToHTMLSource(htmlComp, "SetTheme", struct("theme", themeStr));The HTML setup() function already includes a SetTheme listener that sets data-theme on the root element, triggering the CSS variable swap.
<a href="…" target="_blank" rel="noopener"> opens in the system default browser from uihtml, not inside the MATLAB figure. Useful for "view docs / view source" links in the app header. Style the link to fit the palette (accent color on hover, no underline by default): .external-link {
color: var(--text-secondary);
text-decoration: none;
transition: color var(--t-fast), text-shadow var(--t-fast);
}
.external-link:hover {
color: var(--accent-secondary);
text-shadow: 0 0 8px var(--accent-glow); /* dark styles */
}~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.