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 | $0.00049 | $0.00666 |
| Sonnet 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 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.
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.
- 11d 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 2mo ago), licensed MIT. It adds 98 tokens to every session and 1,333 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-31.
Other skills, from other repositories
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.
team-ui
Orchestrate the UI team through the full UX pipeline: from UX spec authoring through visual design, implementation, review, and polish. Integrates with /ux-design, /ux-review, and studio UX templates.
lottie-design
Search, fetch, and integrate free Lottie animations into React, React Native, Vue, Svelte, Angular, Flutter, and Vanilla web projects. Use when the user asks for any Lottie/dotLottie/animation work — loaders, success checkmarks, splash screens, empty states, onboarding, micro-interactions. Triggers on keywords like…
canvas-app
Creates or edits a Power Apps Canvas App through the Canvas Authoring MCP coauthoring session. Handles new app generation, direct targeted edits, complex multi-screen changes, responsive layout, per-screen self-QA, and compile-error convergence. Trigger on requests to create, build, generate, modify, update, change…
aceternity-ui
100+ animated React components (Aceternity UI) for Next.js with Tailwind. Use for hero sections, parallax, 3D effects, or encountering animation, shadcn CLI integration errors.
base-ui-react
MUI Base UI unstyled React components with Floating UI. Use for accessible components, Radix UI migration, render props API, or encountering positioning, popup, v1.0 rc / pre-GA issues.