How do I install the UI Design skill?

Run npx skillmds@latest add abbaye/ui-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is UI Design safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with UI Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is UI Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published UI Design?

abbaye (@abbaye) published this skill. Their other Agent Skills are listed on their SkillMD profile.

UI Design by abbaye — Agent Skill

Name: UI Design
Author: abbaye

UI Design

INTERNAL DEV WORKFLOW for WpfHexEditor — Claude self-invokes after editing *.xaml under WpfHexEditor.App/, Editors/, Controls/, Plugins/, Core/ to enforce the design-system: no hardcoded colors (use {DynamicResource Dock* / HexEditor_* / Panel_*}), no unknown tokens, canonical spacing scale, canonical FontSize ladder, glyph-only interactive elements need ToolTip, no template reinvention. Skip on: Themes/*.xaml (themes ARE the palette), ColorPicker (legitimate color literals), generated *.g.cs.

abbaye 3fe22f7 11 files · 79.9 KB Updated Sep 17, 2026

File contents

ui-design (internal)

Static guard for 18-theme design system (Dock* / HexEditor_* / Panel_* token surface).

When I invoke

Situation	Run?
Edit `*.xaml` under `App/`, `Editors/`, `Controls/`, `Plugins/`	yes
Edit `.xaml` in `Themes/`, `ColorPicker`, generated `.g.cs`	no
New theme under `Themes/`	run `token-catalog.ps1` instead

Pipeline

If data/known-tokens.json missing or stale: run scripts/token-catalog.ps1 first.
scripts/ui-check.ps1 -Files <paths>
→ UI: <summary> | TokenCoverage=<pct>% or OK

6 rules

Rule	Severity	Reference
`hardcoded-color`	error	`references/design-tokens.md`
`unknown-token`	error	`data/known-tokens.json` (only keys ending in Brush/Color/Background/Foreground/Border/Fill/Stroke/Highlight/Accent)
`non-canonical-spacing`	warn	`references/spacing-grid.md`
`non-canonical-fontsize`	warn	`references/typography.md`
`glyph-no-tooltip`	warn	`references/glyphs-catalog.md` (skips icon slots + `PanelIconButtonStyle`/`PanelIconToggleStyle`)
`reinvented-style`	warn	`references/components.md`

hardcoded-color + unknown-token are errors (break theme switching at runtime). Warnings flag drift; resolve when they cluster.

Output

UI: 3 hardcoded-color, 2 unknown-token, 1 non-canonical-fontsize | TokenCoverage=92%
  MainWindow.xaml:122  hardcoded-color  Background="#E81123"
  MainWindow.xaml:1687 unknown-token    {DynamicResource DockAccentBrush}
  Welcome.xaml:330     non-canonical-fontsize  FontSize="15"

Does not fix colors, auto-add tooltips, verify compile, or check accessibility beyond glyph-no-tooltip.

Maintenance

New theme → token-catalog.ps1 immediately so unknown-token sees new keys.
New canonical spacing/FontSize → update arrays in ui-check.ps1 + matching reference file.
Periodic: glyph-catalog.ps1 to refresh data/glyphs.tsv and spot duplicate glyphs.

---name: ui-designdescription: INTERNAL DEV WORKFLOW for WpfHexEditor — Claude self-invokes after editing *.xaml under WpfHexEditor.App/, Editors/, Controls/, Plugins/, Core/ to enforce the design-system: no hardcoded colors (use {DynamicResource Dock* / HexEditor_* / Panel_*}), no unknown tokens, canonical spacing scale, canonical FontSize ladder, glyph-only interactive elements need ToolTip, no template reinvention. Skip on: Themes/*.xaml (themes ARE the palette), ColorPicker (legitimate color literals), generated *.g.cs.---# ui-design (internal)Static guard for 18-theme design system (`Dock*` / `HexEditor_*` / `Panel_*` token surface).## When I invoke| Situation | Run? ||---|---|| Edit `*.xaml` under `App/`, `Editors/`, `Controls/`, `Plugins/` | yes || Edit `*.xaml` in `Themes/`, `*ColorPicker*`, generated `*.g.cs` | no || New theme under `Themes/` | run `token-catalog.ps1` instead |## Pipeline1. If `data/known-tokens.json` missing or stale: run `scripts/token-catalog.ps1` first.2. `scripts/ui-check.ps1 -Files <paths>`3. → `UI: <summary> | TokenCoverage=<pct>%` or `OK`## 6 rules| Rule | Severity | Reference ||---|---|---|| `hardcoded-color` | error | `references/design-tokens.md` || `unknown-token` | error | `data/known-tokens.json` (only keys ending in Brush/Color/Background/Foreground/Border/Fill/Stroke/Highlight/Accent) || `non-canonical-spacing` | warn | `references/spacing-grid.md` || `non-canonical-fontsize` | warn | `references/typography.md` || `glyph-no-tooltip` | warn | `references/glyphs-catalog.md` (skips icon slots + `PanelIconButtonStyle`/`PanelIconToggleStyle`) || `reinvented-style` | warn | `references/components.md` |`hardcoded-color` + `unknown-token` are errors (break theme switching at runtime). Warnings flag drift; resolve when they cluster.## Output```UI: 3 hardcoded-color, 2 unknown-token, 1 non-canonical-fontsize | TokenCoverage=92% MainWindow.xaml:122 hardcoded-color Background="#E81123" MainWindow.xaml:1687 unknown-token {DynamicResource DockAccentBrush} Welcome.xaml:330 non-canonical-fontsize FontSize="15"```Does not fix colors, auto-add tooltips, verify compile, or check accessibility beyond glyph-no-tooltip.## Maintenance- New theme → `token-catalog.ps1` immediately so `unknown-token` sees new keys.- New canonical spacing/FontSize → update arrays in `ui-check.ps1` + matching reference file.- Periodic: `glyph-catalog.ps1` to refresh `data/glyphs.tsv` and spot duplicate glyphs.

Frequently asked questions