Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add timhok/hmi-design --skill hmi-design-fullgit clone --depth 1 https://github.com/timhok/hmi-designWrote 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/timhok/hmi-design/hmi-design-full)<a href="https://agentmods.dev/skills/timhok/hmi-design/hmi-design-full"><img src="https://agentmods.dev/badge/skills/timhok/hmi-design/hmi-design-full/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/timhok/hmi-design/hmi-design-full"><img src="https://agentmods.dev/badge/skills/timhok/hmi-design/hmi-design-full.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00107 | $0.02513 |
| Opus 5 | $0.00053 | $0.01256 |
| Sonnet 5 | $0.00021 | $0.00503 |
| Haiku 4.5 | $0.00011 | $0.00251 |
Grade A, and why
hmi-design-full 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 11d 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.
Copies of this mod
1 near-identical copy found in the catalogue:
- hmi-design-light — 86% identical, 18 lines differ
How it starts
The opening of the file, as written. The whole thing — 226 lines — stays where its author put it; the contents beside it link to each section on GitHub.
HMI Design for AI Agents
ISA-101 design rules for Human Machine Interfaces in process automation. Apply these rules strictly when designing HMI displays, screens, dashboards, or control interfaces.
Core Design Philosophy
- The HMI is a safety tool first. Every design decision must support safe, effective process monitoring and control.
- Support situation awareness. The operator must always know: what is happening now, why it's happening, and what will happen next.
- Minimize cognitive load. Operators should detect, diagnose, and respond — not search, decode, or remember.
- Consistency is mandatory. All displays must share a unified look, feel, and interaction model.
- Failure must be visible. If a display element, data source, or communication path fails, the operator must know immediately.
Display Hierarchy
Design displays generally in a 4-level hierarchy.
Level 1 — Overview (Entire Span of Control)
- Shows the operator's ENTIRE scope of responsibility on ONE screen
- Key parameters, calculated conditions, alarm status, deviation indicators
- Embedded sparkline trends for critical variables
- NO control actions — monitoring only
- Abnormal states must be immediately visible via color/shape changes
- Should be continuously visible (dedicated monitor if possible)
- Include: deviation direction, severity indicators, alarm counts by area
Level 2 — Unit/Area Operating Displays (Primary Working Displays)
- Operator's PRIMARY working displays during normal operations
- Show one major system or subsystem per display
- Include all controllers, setpoints, and indicators needed for routine operations
- Display all high and medium priority alarms for the area
- Task-based layout: operator should handle most routine work from these displays with minimal navigation
- Include start-up/shutdown task-specific information
Level 3 — Detail Displays (Troubleshooting)
- Detailed P&ID-style or schematic views of specific equipment
- All control loops, indicators, and interlock status for depicted equipment
- Display ALL alarm priorities
- Used for non-routine operations: lineup changes, equipment switching, diagnostics
- Task-based: minimize navigation within troubleshooting workflows
What ships with it
14 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- alarm-design.md 6.1 KB
- color-and-visual-design.md 5.7 KB
- display-hierarchy-and-styles.md 7.8 KB
- lifecycle-and-management.md 6.0 KB
- navigation-and-interaction.md 7.7 KB
- performance-requirements.md 4.2 KB
- references/alarm-design.md 6.1 KB
- references/color-and-visual-design.md 5.7 KB
- references/display-hierarchy-and-styles.md 7.8 KB
- references/lifecycle-and-management.md 6.0 KB
- references/navigation-and-interaction.md 7.7 KB
- references/performance-requirements.md 4.2 KB
- references/situation-awareness-and-human-factors.md 6.0 KB
- situation-awareness-and-human-factors.md 6.0 KB
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.
- 11d ago First seen · 226 lines · 107 tokens per session scan A 240374275bb8
hmi-design-full is a skill published in the GitHub repository timhok/hmi-design (19 stars, last pushed 6mo ago), licensed MIT. It adds 107 tokens to every session and 2,513 once invoked, about $0.0005 per session on Opus 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-08-30.
Other skills, from other repositories
design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides…
ux-icons
Symfony UX Icons for rendering SVG icons in Twig templates. Supports 200,000+ Iconify icons (Lucide, Heroicons, Tabler, Material Design, etc.), local SVG files, and custom icon sets with aliases. Use when displaying icons, configuring icon defaults, importing or locking on-demand icons, creating icon aliases, or…
frontend-design-director
Set subject-grounded visual direction for standard or deep UI work, redesign, polish, critique, anti-template review, or design handoff. Skip technical micro-fixes and isolated code edits.
frontend-design-intelligence
Ground standard or deep UI work in product category, page pattern, design dials, domain UX risks, and anti-patterns before visual direction. Produces a brief, not code or tool setup.
frontend-layout-implementer
Implement an approved Design Implementation Spec or screenshot-derived spec in React/Next.js using existing CSS Modules, Redux, TanStack, and Axios conventions. Excludes unrelated stacks, live design tools, and new styling systems.
design-screenshot-spec
Turn user-supplied screenshots, copied inspect values, exports, assets, or design notes into a strict frontend Design Implementation Spec. Live design links alone are insufficient.