Agent skill

Iconbutton A11y

Enforce the Campfire IconButton accessibility convention — every IconButton (and its derivatives) must be wrapped with IconButtonTooltip and given a localized action label.

GPL-3.0Auto-check passedFrontend & Design

Install Iconbutton A11y

skills CLI

$ npx skills add r0adkll/Campfire --skill iconbutton-a11y -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install r0adkll/Campfire iconbutton-a11y --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/r0adkll/Campfire.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/iconbutton-a11y .claude/skills/iconbutton-a11y && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "iconbutton-a11y" agent skill from https://github.com/r0adkll/Campfire/tree/main/.claude/skills/iconbutton-a11y into .claude/skills/iconbutton-a11y/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "iconbutton-a11y", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/r0adkll/Campfire/tree/main/.claude/skills/iconbutton-a11y

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add r0adkll/Campfire --skill iconbutton-a11y -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install r0adkll/Campfire iconbutton-a11y --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/r0adkll/Campfire.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/iconbutton-a11y .agents/skills/iconbutton-a11y && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "iconbutton-a11y" agent skill from https://github.com/r0adkll/Campfire/tree/main/.claude/skills/iconbutton-a11y into .agents/skills/iconbutton-a11y/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "iconbutton-a11y", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add r0adkll/Campfire --skill iconbutton-a11y -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install r0adkll/Campfire iconbutton-a11y --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/r0adkll/Campfire.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/iconbutton-a11y .cursor/skills/iconbutton-a11y && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "iconbutton-a11y" agent skill from https://github.com/r0adkll/Campfire/tree/main/.claude/skills/iconbutton-a11y into .cursor/skills/iconbutton-a11y/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "iconbutton-a11y", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/r0adkll/Campfire.git --path .claude/skills/iconbutton-a11y

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add r0adkll/Campfire --skill iconbutton-a11y -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install r0adkll/Campfire iconbutton-a11y --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/r0adkll/Campfire.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/iconbutton-a11y .gemini/skills/iconbutton-a11y && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "iconbutton-a11y" agent skill from https://github.com/r0adkll/Campfire/tree/main/.claude/skills/iconbutton-a11y into .gemini/skills/iconbutton-a11y/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "iconbutton-a11y", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install r0adkll/Campfire iconbutton-a11y

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add r0adkll/Campfire --skill iconbutton-a11y -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/r0adkll/Campfire.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/iconbutton-a11y .github/skills/iconbutton-a11y && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "iconbutton-a11y" agent skill from https://github.com/r0adkll/Campfire/tree/main/.claude/skills/iconbutton-a11y into .github/skills/iconbutton-a11y/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "iconbutton-a11y", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add r0adkll/Campfire --skill iconbutton-a11y -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install r0adkll/Campfire iconbutton-a11y --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/r0adkll/Campfire.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/iconbutton-a11y .opencode/skills/iconbutton-a11y && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "iconbutton-a11y" agent skill from https://github.com/r0adkll/Campfire/tree/main/.claude/skills/iconbutton-a11y into .opencode/skills/iconbutton-a11y/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "iconbutton-a11y", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: iconbutton-a11y
GitHub stars: 140
Token cost: ~1.2k tokens
SKILL.md length: 343 words
Files: 1
Skills in repo: 9
Repo updated: Oct 9, 2026
First seen: Oct 7, 2026
Licence: GPL-3.0

At a glance

Enforce the Campfire IconButton accessibility convention — every IconButton (and its derivatives) must be wrapped with IconButtonTooltip and given a localized action label.

Authoring Compose UI that adds
SKILL.md covers Rule, When to apply, Component and Canonical usage, plus 3 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Moves an icon-only button

What it does

Iconbutton A11y is an agent skill from r0adkll/Campfire. Enforce the Campfire IconButton accessibility convention — every IconButton (and its derivatives) must be wrapped with IconButtonTooltip and given a localized action label. Trigger when reviewing or authoring Compose UI that adds, copies, or moves an icon-only button.

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Accessibility. The repository describes itself as: A KMP Compose app for Audiobookshelf. The licence is GPL-3.0.

When your agent uses it

Authoring Compose UI that adds
Moves an icon-only button

Example prompts

“/iconbutton-a11y”

What it can do on your machine

Read from SKILL.md and the folder at commit 2fde7e5. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are kotlin).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Iconbutton A11y loads about 1.2k tokens when it runs. Until then it costs about 72 tokens; SKILL.md has 343 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~72
When it runs · the whole SKILL.md, loaded when a task matches: ~1.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from r0adkll/Campfire at commit 2fde7e5, republished under its GPL-3.0 licence (© r0adkll). 343 words, ~1,212 tokens.

Download SKILL.mdSave it as .claude/skills/iconbutton-a11y/SKILL.md (or your agent's skills folder).

name: iconbutton-a11y
description: Enforce the Campfire IconButton accessibility convention — every IconButton (and its derivatives) must be wrapped with `IconButtonTooltip` and given a localized action label. Trigger when reviewing or authoring Compose UI that adds, copies, or moves an icon-only button.

Rule

Every IconButton, FilledIconButton, OutlinedIconButton, FilledTonalIconButton, IconToggleButton, FilledIconToggleButton, FilledTonalIconToggleButton, or OutlinedIconToggleButton MUST be wrapped with IconButtonTooltip from app.campfire.common.compose.widgets.

The tooltip text MUST be a localized string from the module's composeResources/values/*_strings.xml, looked up via stringResource(Res.string.<name>). The same string MUST also be passed to the inner Icon's contentDescription so screen readers announce the action when the button is focused, in addition to revealing the tooltip on long-press / hover.

When to apply

Authoring any new icon-only button (Compose material3.IconButton or any derivative).
Copy-pasting an existing icon-only button: re-check that it's wrapped — many older call sites in the codebase are NOT yet migrated; do not propagate the legacy pattern.
Reviewing a PR that adds/moves an icon-only button in a *Ui.kt, top-app-bar, toolbar, bottom sheet, list-item action slot, or bottom bar.

Component

kotlin

// Located at:
// common/compose/src/commonMain/kotlin/app/campfire/common/compose/widgets/IconButtonTooltip.kt
package app.campfire.common.compose.widgets

@Composable
fun IconButtonTooltip(
  text: String,
  modifier: Modifier = Modifier,
  position: TooltipAnchorPosition = TooltipAnchorPosition.Above,
  state: TooltipState = rememberTooltipState(),
  content: @Composable () -> Unit,
)

Defaults are tuned for the common case (top app bar / toolbar action). Override position for buttons anchored below their tooltip (e.g. a bottom bar action) and state if you need to drive visibility programmatically.

Canonical usage

kotlin

import app.campfire.common.compose.widgets.IconButtonTooltip
import org.jetbrains.compose.resources.stringResource
import campfire.<module>.ui.generated.resources.Res
import campfire.<module>.ui.generated.resources.action_edit_playlist

IconButtonTooltip(
  text = stringResource(Res.string.action_edit_playlist),
) {
  IconButton(onClick = onEditClick) {
    Icon(
      Icons.Rounded.Edit,
      contentDescription = stringResource(Res.string.action_edit_playlist),
    )
  }
}

Toggle variant:

kotlin

IconButtonTooltip(
  text = stringResource(Res.string.action_reorder_playlist),
) {
  IconToggleButton(
    checked = isReordering,
    onCheckedChange = onReorderChange,
  ) {
    Icon(
      CampfireIcons.Rounded.SwapCalls,
      contentDescription = stringResource(Res.string.action_reorder_playlist),
    )
  }
}

Anti-patterns

Bare IconButton with no tooltip. Fails Material 3 a11y guidance — long-press reveals nothing, screen readers may announce only "button".
kotlin
```
// ❌ DON'T
IconButton(onClick = onClick) {
  Icon(Icons.Rounded.Edit, contentDescription = "Edit")
}
```
Hardcoded English label. All tooltip text MUST go through a stringResource(Res.string.*) lookup; we have multiple locales planned.
kotlin
```
// ❌ DON'T
IconButtonTooltip(text = "Edit playlist") { ... }
```
Inlining TooltipBox directly. Use IconButtonTooltip so the plain-tooltip shape, padding, and anchor position stay consistent across the app.
kotlin
```
// ❌ DON'T
TooltipBox(positionProvider = ..., tooltip = { PlainTooltip { Text("Edit") } }, ...) { ... }
```
Mismatched tooltip + contentDescription. The two strings MUST be the same stringResource lookup. Drifting copy hurts a11y and looks sloppy.

Show full SKILL.md (104 more words)Show less

String resource conventions

Place new tooltip labels in the owning module's src/commonMain/composeResources/values/<module>_strings.xml.
Prefer action_<verb>_<object> or cd_<noun> naming, e.g. action_edit_playlist, action_download_book, cd_clear_search.
Verbs in imperative mood: Edit playlist, Delete bookmark, Toggle reorder.

Audit (as of 2026-05-11)

There are ~86 unmigrated IconButton/derivative call sites across 47 files. The wrapper is in place but call site migration is intentionally deferred. When you touch an unmigrated file for any reason, opportunistically migrate the IconButtons in it — do not propagate the legacy pattern when copy-pasting.

A representative reference implementation (already correctly tooltip-wrapped) lives at: features/playlists/ui/src/commonMain/kotlin/app/campfire/playlists/ui/detail/composables/PlaylistFloatingToolbar.kt (though that file inlines its own tooltip helper — migrate it to IconButtonTooltip when convenient).

Files

Just SKILL.md in .claude/skills/iconbutton-a11y of r0adkll/Campfire.

Open the folder on GitHubat commit 2fde7e5

Compare with similar skills

Iconbutton A11y next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Iconbutton A11y compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Iconbutton A11y this skillr0adkll/Campfire	140	—	~1.2k	Automated safety check: Pass	GPL-3.0	today
Web Interface Guidelines Reviewervercel-labs/openreview	1.7k	97 repos	~308	Automated safety check: Pass	None	7 mo ago
Accessibility Reviewmarkmead/hyperui	12k	1 repos	~1.1k	Automated safety check: Pass	MIT	13 days ago
Web Animation DesignbaptisteArno/typebot.io	11k	2 repos	~2.7k	Automated safety check: Pass	Custom licence	2 days ago
Accessibility Fixeribelick/ui-skills	9.5k	4 repos	~1.2k	Automated safety check: Pass	MIT	2 days ago
Wcag Audit PatternsvmDeshpande/ai-agent-automation	178	11 repos	~610	Automated safety check: Pass	Apache-2.0	27 days ago

Similar skills

Web Interface Guidelines Reviewer
vercel-labs/openreview
Official
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…
1.7k GitHub starsUsed in 97 repos~308 tokens
Frontend & DesignAuto-check passed
Accessibility Review
markmead/hyperui
Run a WCAG 2.1 AA accessibility audit on a design or page. An agent skill from markmead/hyperui.
12k GitHub starsUsed in 1 repo~1.1k tokens
Frontend & DesignAuto-check passed
Web Animation Design
baptisteArno/typebot.io
Guides easing, timing and animation choices for UI motion, based on a web animation course, and reviews existing animations in a before-and-after table.
11k GitHub starsUsed in 2 repos~2.7k tokens
Frontend & DesignAuto-check passed
Accessibility Fixer
ibelick/ui-skills
Audits and fixes HTML accessibility problems such as ARIA labels, keyboard navigation, focus management, contrast and form errors with minimal changes.
9.5k GitHub starsUsed in 4 repos~1.2k tokens
Frontend & DesignAuto-check passed
Wcag Audit Patterns
vmDeshpande/ai-agent-automation
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance.
178 GitHub starsUsed in 11 repos~610 tokens
Frontend & DesignAuto-check passed
Baseline UI
ibelick/ui-skills
Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.
9.5k GitHub starsUsed in 8 repos~855 tokens
Frontend & DesignAuto-check passed

Questions about Iconbutton A11y

What does Iconbutton A11y do?

Enforce the Campfire IconButton accessibility convention — every IconButton (and its derivatives) must be wrapped with IconButtonTooltip and given a localized action label. Iconbutton A11y is an agent skill from r0adkll/Campfire. Enforce the Campfire IconButton accessibility convention — every IconButton (and its derivatives) must be wrapped with IconButtonTooltip and given a localized action label.

When should I use Iconbutton A11y?

Iconbutton A11y fits situations like: authoring Compose UI that adds; moves an icon-only button.

How do I install Iconbutton A11y in Claude Code?

Run `npx skills add r0adkll/Campfire --skill iconbutton-a11y -a claude-code`. Or copy the skill folder (.claude/skills/iconbutton-a11y in r0adkll/Campfire) into .claude/skills/iconbutton-a11y in your project. Claude Code loads it when a task matches its description.

How do I install Iconbutton A11y in Codex?

Run `npx skills add r0adkll/Campfire --skill iconbutton-a11y -a codex`. Or copy the skill folder (.claude/skills/iconbutton-a11y in r0adkll/Campfire) into .agents/skills/iconbutton-a11y in your project. Codex loads it when a task matches its description.

Can I use Iconbutton A11y in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add r0adkll/Campfire --skill iconbutton-a11y -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/iconbutton-a11y, .gemini/skills/iconbutton-a11y, .github/skills/iconbutton-a11y and .opencode/skills/iconbutton-a11y in your project.

What does Iconbutton A11y need to run?

SKILL.md names no scripts, command-line tools or credentials: Iconbutton A11y is instructions for the agent only.

Does Iconbutton A11y access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Iconbutton A11y safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Iconbutton A11y use?

Iconbutton A11y is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Iconbutton A11y use?

About 1.2k tokens (SKILL.md is roughly 4.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Iconbutton A11y?

Skills that share tags, products or a category with Iconbutton A11y: Web Interface Guidelines Reviewer (vercel-labs/openreview, 1.7k stars), Accessibility Review (markmead/hyperui, 12k stars), Web Animation Design (baptisteArno/typebot.io, 11k stars) and Accessibility Fixer (ibelick/ui-skills, 9.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Iconbutton A11y?

r0adkll (a GitHub user) maintains it in r0adkll/Campfire, which has 140 GitHub stars. The repository holds 9 skills in this directory. The repository was last updated on October 9, 2026.

Source: r0adkll/Campfire on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Iconbutton A11y

Install Iconbutton A11y

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Rule

When to apply

Component

Canonical usage

Anti-patterns

String resource conventions

Audit (as of 2026-05-11)

Files

Compare with similar skills

Similar skills

Web Interface Guidelines Reviewer

Accessibility Review

Web Animation Design

Accessibility Fixer

Wcag Audit Patterns

Baseline UI

More from r0adkll/Campfire

PR Stack

Compose Modifier

Fdroid Reproducible Foss

I18n Compose

Socket Event Listener

Compose UI

Questions about Iconbutton A11y

Install Iconbutton A11y

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Rule

When to apply

Component

Canonical usage

Anti-patterns

String resource conventions

Audit (as of 2026-05-11)

Files

Compare with similar skills

Similar skills

More from r0adkll/Campfire

Related

Questions about Iconbutton A11y