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 agentmods add skills/d-o-hub/github-template-ai-agents/reader-ui-uxnpx skills add d-o-hub/github-template-ai-agents --skill reader-ui-uxgit clone --depth 1 https://github.com/d-o-hub/github-template-ai-agentsWrote 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/d-o-hub/github-template-ai-agents/reader-ui-ux)<a href="https://agentmods.dev/skills/d-o-hub/github-template-ai-agents/reader-ui-ux"><img src="https://agentmods.dev/badge/skills/d-o-hub/github-template-ai-agents/reader-ui-ux.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 | $0.00077 | $0.00607 |
| Opus 5 | $0.00039 | $0.00303 |
| Sonnet 5 | $0.00015 | $0.00121 |
| Haiku 4.5 | $0.00008 | $0.00061 |
Grade A, and why
reader-ui-ux 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 5d 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 — 65 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Reader UI/UX
Purpose: deliver intentional, localized, accessible reader/admin UX.
When to Use
- Modifying reader/admin React screens, layout primitives, or shared UI components.
- Adding localization copy, accessibility improvements, or design polish.
- Building locale switchers, typography controls, or comment/annotation panels.
Workflow
- Define experience -- confirm viewport-specific layout (mobile drawer vs desktop side panels) + theme rules.
- Localization -- add strings to locale catalogs, ensure fallback, surface locale switcher.
- Accessibility -- keyboard focus, ARIA labels, reduced motion, semantic regions.
- State -- use state management selectors, avoid prop drilling, memoize heavy renders.
- Observability -- log key UI actions with trace IDs.
- Testing -- add component tests; E2E coverage for primary flows.
Checklist
- Layout responsive (mobile/tablet/desktop) with deliberate spacing.
- Strings localized and locale header updated.
- Error states use ErrorBoundary + inline alerts.
- Async effects cancel via AbortController; cleanup functions implemented.
- UI interactions include aria-labels + focus traps where applicable.
See Also
anti-ai-slop— Avoid AI slop in UI/UXcss-render-performance— CSS render performance optimization
Rationalizations
| Rationalization | Reality |
|---|---|
| "Accessibility is a nice-to-have, not a requirement" | Legal compliance (WCAG, ADA, Section 508) and user inclusion make it mandatory. |
| "I'll add localization later after the UI is done" | Retroactive localization is costly; string extraction and fallback logic should be designed upfront. |
| "Prop drilling is simpler than state management" | Prop drilling breaks at scale; memoized selectors prevent unnecessary re-renders and deep coupling. |
Red Flags
- Reader UI built without keyboard navigation support
- Locale strings hardcoded in components instead of catalog
- Missing ErrorBoundary or AbortController cleanup on async effects
What ships with it
3 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.
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.
- 5d ago First seen · 65 lines · 77 tokens per session scan A e495172bb5d9
reader-ui-ux is a skill published in the GitHub repository d-o-hub/github-template-ai-agents (2 stars, last pushed today), licensed MIT. It adds 77 tokens to every session and 607 once invoked, about $0.0004 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
web-i18n-react-intl
ICU message format internationalization.
i18n
Patterns for building multilingual React and Next.js applications with next-intl, react-intl, locale routing, RTL support, and pluralization.
airflow-translations
Add or update translations for the Apache Airflow UI. Guides through setting up locales, scaffolding translation files, translating with locale-specific guidelines, and validating results. Use when working with i18n tasks in airflow-core/src/airflow/ui/public/i18n/locales/.
generate-translations
Use when new translation keys are added to packages to generate new translations strings.
harden
Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.
update-portal-ui
Guidelines for updating or designing pages in the portal React frontend (portal/src). Covers component conventions, link rendering rules, i18n patterns, and common pitfalls.