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 TimboGP/timbogp-marketplace --skill accessible-componentsgit clone --depth 1 https://github.com/TimboGP/timbogp-marketplaceWrote 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/timbogp/timbogp-marketplace/accessible-components)<a href="https://agentmods.dev/skills/timbogp/timbogp-marketplace/accessible-components"><img src="https://agentmods.dev/badge/skills/timbogp/timbogp-marketplace/accessible-components/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/timbogp/timbogp-marketplace/accessible-components"><img src="https://agentmods.dev/badge/skills/timbogp/timbogp-marketplace/accessible-components.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.00098 | $0.01333 |
| Opus 5.5 | $0.00039 | $0.00533 |
| Sonnet 5.5 | $0.00020 | $0.00267 |
| Haiku 4.5 | $0.00010 | $0.00133 |
Grade A, and why
accessible-components 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 — 61 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Accessible components
Scaffold accessible UI component patterns that match the project's stack, then install automated accessibility linting so regressions get caught. Build on semantic HTML, add ARIA only to fill gaps, and ship correct keyboard support and focus management.
When to use
Use this skill for requests such as:
- "Make this modal/dialog accessible"
- "Build an accessible dropdown / menu / tabs / combobox / tooltip / accordion / switch"
- "Add ARIA to this component"
- "Fix keyboard navigation" or "this can't be used without a mouse"
- "Set up a11y linting" / "add accessibility checks to CI"
Workflow
-
Detect the stack. Read
../ux-foundations/references/stack-detection.mdand run that procedure before writing any code. Hold the resultingframework,styling,language, androotDir. Report what was detected in one line. With no project, fall back to framework-agnostic HTML + vanilla JS + CSS custom properties (seeexamples/disclosure.html). -
Pick the correct APG pattern. Map the requested component to its WAI-ARIA Authoring Practices (APG) pattern and read
references/aria-patterns.mdfor required roles/attributes, the full keyboard map, focus rules, and common mistakes. Do not invent ARIA — use the established pattern. -
Implement, semantics first.
- Reach for native elements before ARIA:
<button>,<a href>,<dialog>,<details>/<summary>,<input type="checkbox">,<select>,<fieldset>/<legend>. They bring behavior, focusability, and state for free. - Add ARIA only to express what HTML can't: correct
role, and live state (aria-expanded,aria-selected,aria-checked,aria-current,aria-disabled). - Provide an accessible name for every interactive element (visible
<label>,aria-label, oraria-labelledby). - Implement the complete keyboard interaction map from the pattern — not just Tab. Composite widgets (tabs, menus, listboxes, grids) use roving tabindex or
aria-activedescendant, not a tab stop per child. - Manage focus: focus trap inside modal dialogs, focus restoration to the triggering element on close, send focus to a sensible target when content appears, and never strand focus on a hidden element.
- Reach for native elements before ARIA:
What ships with it
11 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.
- examples/combobox.html 11 KB
- examples/dialog-react.tsx 5.9 KB
- examples/dialog-svelte.svelte 6.6 KB
- examples/dialog-vue.vue 6.6 KB
- examples/disclosure.html 3.7 KB
- examples/menu-button-react.tsx 6.2 KB
- examples/menu-button.html 8.9 KB
- examples/README.md 2.5 KB
- examples/tabs-react.tsx 5.2 KB
- examples/tabs.html 6.8 KB
- references/aria-patterns.md 9.3 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.
- 1mo ago First seen · 61 lines · 98 tokens per session scan A a5ee399ae46d
accessible-components is a skill published in the GitHub repository TimboGP/timbogp-marketplace (3 stars, last pushed 12d ago), licensed MIT. It adds 98 tokens to every session and 1,333 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-08-31.
Other skills, from other repositories
gan-zhong-xue
A learning workflow that makes an AI explain code changes through questions, evidence, and underlying principles. It is designed to help developers understand work they asked an AI to do, rather than merely accept the result.
explain
Explain what a piece of code does — a specific file, class, or method in close detail, or a user-facing flow as a concise system overview. What it does and why, not whether it's good.
accessibility
Audits code for WCAG 2.2 AA compliance and provides design guidance for accessible components. Covers semantic HTML, ARIA, keyboard nav, contrast, focus management, and motion.
abd-design
ABD Design agent: produces architecture diagrams, component breakdowns, data flow, and design decisions from the current plan.
qector-educator
Teaching and documentation content for quantum error correction with QECTOR: beginner-to-advanced tutorials, ELI5 explanations of syndromes / decoders / parity checks, Tanner-graph visual explanations, and local Markdown teaching material. Load for explanations, course material, or documentation generation.
ux-design
Guided, section-by-section UX spec authoring for a screen, flow, or HUD. Reads game concept, player journey, and relevant GDDs to provide context-aware design guidance. Produces ux-spec.md (per screen/flow) or hud-design.md using the studio templates.