Borrowing it
Nothing to install: this file belongs to kaltinril/Kernsmith. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/kaltinril/Kernsmith/main/.claude/skills/gum-ui-layout/SKILL.mdgit clone --depth 1 https://github.com/kaltinril/KernsmithWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/kaltinril/kernsmith/gum-ui-layout)<a href="https://agentmods.dev/skills/kaltinril/kernsmith/gum-ui-layout"><img src="https://agentmods.dev/badge/skills/kaltinril/kernsmith/gum-ui-layout/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/kaltinril/kernsmith/gum-ui-layout"><img src="https://agentmods.dev/badge/skills/kaltinril/kernsmith/gum-ui-layout.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00110 | $0.02034 |
| Opus 5.5 | $0.00044 | $0.00814 |
| Sonnet 5.5 | $0.00022 | $0.00407 |
| Haiku 4.5 | $0.00011 | $0.00203 |
Grade A, and why
gum-ui-layout scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 216 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Gum UI Layout for KernSmith
This skill captures hard-won knowledge about building UI with Gum Forms V3 in the KernSmith desktop app. It covers layout patterns, common pitfalls, and the target visual aesthetic.
Project Structure
apps/KernSmith.Ui/Layout/— Panel classes (FontConfigPanel, EffectsPanel, etc.)apps/KernSmith.Ui/Styling/Theme.cs— Color palette and layout constantsapps/KernSmith.Ui/Styling/UiFactory.cs— Shared UI factory methodsapps/KernSmith.Ui/KernSmithGame.cs— App init, Gum setup, dark theme colors
Target Aesthetic: egui-Inspired
The UI is moving toward an egui-inspired look. The core principles:
Every Row is Label:Control
Source: [Browse for Font...]
Font: [dropdown v]
Glyphs: 0
Size: [32 ] pt
Rasterizer: [FreeType v]
All settings use a consistent two-column layout: fixed-width label on the left, control filling remaining space on the right. This creates visual alignment and rhythm.
Headers Are Just Text
Section headers (FONT FILE, SIZE, ATLAS, etc.) should be plain text with a chevron indicator — no colored background bars, no accent-colored text. Use spacing to separate sections, not decorative containers.
No Decorative Chrome
- No section header background rectangles
- No distinct
contentWrapperbackground colors - No visible layering between panel, content, and sections
- Sections separated by spacing alone
Color Hierarchy
- Accent blue (#0078D4) is reserved for interactive elements only: buttons, active tabs, checked checkboxes
- Section header text uses
Theme.SectionHeaderText(plain light gray), notTheme.Accent - Body text uses
Theme.Text(200, 200, 200) - The Gum dark style colors are set in
KernSmithGame.Initialize()
Gum Layout Fundamentals
Container Types and When to Use Them
- StackPanel — Use for simple rows of controls.
Orientation.Horizontalfor label:control rows. - ContainerRuntime with TopToBottomStack — Use for vertical stacking with
StackSpacing. More flexible than StackPanel for mixed content. - Grid — Use sparingly. Grid with
Starcolumns doesn't work reliably inside StackPanel parents. Prefer StackPanel with fixed-width labels instead. - ScrollViewer — For scrollable content. Always strip the default border (see below).
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 216 lines · 110 tokens per session scan A 64dceecd0aed
gum-ui-layout is a skill published in the GitHub repository kaltinril/Kernsmith (11 stars, last pushed 2d ago), licensed MIT. It adds 110 tokens to every session and 2,034 once invoked, about $0.0004 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-04.
Other skills, from other repositories
polish-ui
Design-quality workflow that combines design taste, aesthetic direction, image-to-code, a Web Interface Guidelines audit, and real-browser verification. Use when building or polishing a UI surface, implementing a mockup/screenshot, or when asked to make a page "look great".
review-design
Reviews frontend components for design quality and UI/UX standards. Use when checking component styling, responsiveness, accessibility, or when asked to review a design.
biome-creation
A workflow for placing rocks, trees, plants, and other reusable scene objects into a Unity biome, a themed area of a game world. It also covers regenerating the biome and checking the result with screenshots.
before-after-audit
A before-and-after screenshot workflow for checking visual changes in a Unity scene. It keeps the Scene view camera fixed, compares the two images, and sends the difference for an external review.
cratis-components-styling
Use when setting up Cratis Components styles, fixing unstyled components or changing themes, tokens and component parts. Not for component binding APIs or page composition.
cratis-components-accessibility
Use when fixing Cratis Components focus, keyboard submission, accessible names, field announcements or decorative icons. Not for claiming general WCAG conformance or choosing a visual theme.