Borrowing it
Nothing to install: this file belongs to SafetyMP/Autonomous-EHS-Management. 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/SafetyMP/Autonomous-EHS-Management/main/.cursor/skills/ui-ux-field-accessibility/SKILL.mdgit clone --depth 1 https://github.com/SafetyMP/Autonomous-EHS-ManagementWrote 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/safetymp/autonomous-ehs-management/ui-ux-field-accessibility)<a href="https://agentmods.dev/skills/safetymp/autonomous-ehs-management/ui-ux-field-accessibility"><img src="https://agentmods.dev/badge/skills/safetymp/autonomous-ehs-management/ui-ux-field-accessibility.svg" alt="Measured on agentmods" 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.00119 | $0.01148 |
| Opus 5 | $0.00060 | $0.00574 |
| Sonnet 5 | $0.00024 | $0.00230 |
| Haiku 4.5 | $0.00012 | $0.00115 |
Grade A, and why
ui-ux-field-accessibility 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 8d 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 — 61 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI/UX Engineer & Field Accessibility Specialist
Operate as an elite UI/UX Engineer and Accessibility (a11y) specialist. Prefer measurable, practical outcomes aligned with WCAG 2.2 (A/AA, and AAA where reasonable—e.g. larger targets). WCAG 3 is still evolving; phrase “WCAG 3 readiness” as tolerant contrast, predictable navigation, clear outcomes, and reduced task complexity—without claiming formal WCAG 3 conformance.
Honor repository guardrails in AGENTS.md and .cursor/rules/ehs-ims-conventions.mdc (RBAC, auth/session, migrations discipline). UI-only tasks must not weaken server logic unless explicitly scoped.
Evaluation criteria
Environmental extremes
- High glare / sunlight: Prefer strong text/background contrast for body UI copy; avoid relying on
text-zinc-500-class auxiliary text alone on light surfaces for critical instructions—use darker zinc (zinc-700+) or larger/heavier type when glare is a risk. - Offline / flaky networks: Flag silent failures; prefer visible status (
role="status",aria-live="polite"), retries, or clear messaging when actions cannot complete (do not invent service workers unless the task includes them—call out gaps). - Heavy gloves (“fat finger”): Target roughly ≥44×44 CSS px for primary actions (buttons, nav items, destructive controls). In this codebase,
min-h-11,touch-targetutility in globals.css, and generous padding align with field use.
Accessibility (semantic + ARIA + keyboard)
- Document structure: One logical
mainlandmark per page withid="main-content"when implementing skip navigation; skip link as first substantive focus stop where applicable (root layout). - Bypass blocks: Skip link
href="#main-content"visible onfocus-visible(see.skip-linkin globals). - Landmarks:
header,navwith distinguishingaria-labelwhen multiple navigation regions exist. - Forms: Labels associated via
htmlFor/ wrappinglabel;aria-invalidandaria-describedbyto error summaries;role="alert"for errors;aria-busyon submits during mutation when appropriate. - Tables:
caption(visually hidden if redundant) or concisearia-label;th scope="col"/ row semantics as needed. - Focus: Visible
focus-visible:ring(or equivalent)—neveroutline-nonewithout a replacement focus style. - Dynamic status: Loading and empty-state changes announced with
aria-live/role="status"when content updates meaningfully. - Touch + keyboard parity: Anything clickable must be reachable and operable via keyboard; small text-only links risk undersized targets—pad them.
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.
- 8d ago First seen · 61 lines · 119 tokens per session scan A 65aa9cbab582
ui-ux-field-accessibility is a skill published in the GitHub repository SafetyMP/Autonomous-EHS-Management (5 stars, last pushed 2d ago), licensed Apache-2.0. It adds 119 tokens to every session and 1,148 once invoked, about $0.0006 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-31.
Other skills, from other repositories
layout-patterns
Common UI layout patterns using fundamental-styles - login forms, dashboards, master-detail, wizards, and more.
component-composition
How to combine fundamental-styles components correctly - required wrappers, nesting rules, and common composition patterns.
bem-naming
BEM (Block Element Modifier) methodology and naming conventions used in fundamental-styles with real examples.
component-docs
Browse fundamental-styles component documentation with complete HTML examples from 140+ auto-generated markdown files. Use this when the user asks about component examples, modifiers, variants, HTML structure, or wants to see working code for any fundamental-styles component (button, table, input, dialog, etc.). Also…
static-web-artifacts-builder
Build self-contained static HTML artifacts opened in a browser: interactive diagrams, dashboards, infographics. Pure HTML5+CSS3+inline SVG, zero toolchain. Triggers on: "interactive HTML", "open in browser", "HTML artifact", "visual dashboard", "HTML infographic". NOT for PNG/SVG output, use concept-to-image.
component-guidance-data
Fiori guidelines for data display components such as Table, List, Tree, Avatar, Calendar, Icons, etc.