New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Kb Email Accessibility

by Community-Access in Community-Access/accessibility-agents

Reference data, not a reviewer. An agent skill from Community-Access/accessibility-agents.

MITAuto-check passedFrontend & Design

Install Kb Email Accessibility

skills CLI
$ npx skills add Community-Access/accessibility-agents --skill kb-email-accessibility -a claude-code

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

GitHub CLI
$ gh skill install Community-Access/accessibility-agents kb-email-accessibility --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/Community-Access/accessibility-agents.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/kb-email-accessibility .claude/skills/kb-email-accessibility && 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/

Facts

Skill name
kb-email-accessibility
GitHub stars
423
Token cost
~1.6k tokens
SKILL.md length
521 words
Files
2
Skills in repo
108
Repo updated
First seen
Licence
MIT

At a glance

Reference data, not a reviewer. An agent skill from Community-Access/accessibility-agents.

  • Tasks that involve Accessibility
  • SKILL.md covers Email Accessibility Skill, Email Client Rendering…, Accessible Email Patterns and Dark Mode Adaptation, plus 3 more sections
  • Reaches w3.org
  • Tasks that involve Theming and dark mode

What it does

Kb Email Accessibility is an agent skill from Community-Access/accessibility-agents. Reference data, not a reviewer. HTML email accessibility: table layouts, inline styles, dark mode, image fallbacks, and email client rendering constraints.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).

It sits in Frontend & Design, covering Accessibility and Theming and dark mode. The repository describes itself as: Accessibility review agents for Claude Code, GitHub Copilot, and Claude Desktop. Eleven specialists that enforce WCAG 2.2 AA compliance so AI coding tools stop generating… The licence is MIT.

When your agent uses it

  • Tasks that involve Accessibility
  • Tasks that involve Theming and dark mode

Example prompts

  • “/kb-email-accessibility”

What it can do on your machine

Read from SKILL.md and the folder at commit decf6ba. 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 html).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • w3.org

    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

Kb Email Accessibility loads about 1.6k tokens when it runs. Until then it costs about 45 tokens; SKILL.md has 521 words of instructions outside code blocks.

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

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 Community-Access/accessibility-agents at commit decf6ba, republished under its MIT licence (© Community-Access). 521 words, ~1,637 tokens.

Download SKILL.mdSave it as .claude/skills/kb-email-accessibility/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
kb-email-accessibility
description
Reference data, not a reviewer. HTML email accessibility: table layouts, inline styles, dark mode, image fallbacks, and email client rendering constraints.
license
MIT
disable-model-invocation
true
user-invocable
false
metadata.tier
reference
metadata.domain
cross-cutting
metadata.output
none
metadata.effort
low
metadata.title
Email Accessibility

Email Accessibility Skill

Reference data for HTML email accessibility under email client rendering constraints. Used by email-accessibility agent.

Email Client Rendering Constraints

Email HTML operates under severe constraints compared to web browsers:

FeatureGmailOutlook (Win)Apple MailYahooOutlook.com
Semantic HTML (<nav>, <main>)StrippedStrippedSupportedStrippedStripped
role attributesStrippedStrippedSupportedStrippedStripped
aria-* attributesStrippedStrippedSupportedStrippedStripped
<style> blocksSupportedSupportedSupportedSupportedSupported
External CSSStrippedStrippedStrippedStrippedStripped
JavaScriptStrippedStrippedStrippedStrippedStripped
CSS GridSupportedNot supportedSupportedSupportedSupported
CSS FlexboxSupportedNot supportedSupportedSupportedSupported
<button> elementRenderedRenderedRenderedRenderedRendered
tabindexStrippedStrippedSupportedStrippedStripped
Key Constraint: Outlook Desktop uses the Word rendering engine, not a browser engine

Accessible Email Patterns

Table-Based Layout (Required for Outlook)
html
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
  <tr>
    <td align="center" style="padding: 20px;">
      <!-- Content here -->
    </td>
  </tr>
</table>

Rules:

  • ALL layout tables MUST have role="presentation" to prevent screen readers from announcing table semantics
  • Data tables (actual tabular data) should NOT have role="presentation" — they need proper <th>, scope, and <caption>
  • Use cellspacing="0" cellpadding="0" border="0" on layout tables
Images
html
<img src="hero.jpg" alt="Product launch announcement: 50% off all subscriptions through March" width="600" height="300" style="display: block; max-width: 100%;">

Rules:

  • Every <img> must have alt attribute
  • Decorative images: alt="" (empty, not omitted)
  • Set explicit width and height — prevents layout shifts when images are blocked
  • Many email clients block images by default — alt text is the only fallback
  • Style images with display: block to prevent gaps in Outlook
  • Use style="font-size: 14px; font-family: Arial, sans-serif; color: #333333;" on the <img> tag — some clients display alt text using these styles
html
<a href="https://example.com/subscribe" style="color: #005a9c; text-decoration: underline;">
  Subscribe to our accessibility newsletter
</a>

Rules:

  • Link text must be descriptive (no "click here" or "read more")
  • Always use text-decoration: underline — color alone can't distinguish links (WCAG 1.4.1)
  • Include style attributes directly on <a> tags — some clients strip <style> blocks
  • For CTA buttons, use the bulletproof button pattern (see below)
Bulletproof Buttons (Work in All Clients)
html
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td style="border-radius: 4px; background: #005a9c;">
      <a href="https://example.com/action" style="background: #005a9c; border: 15px solid #005a9c; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 4px; font-weight: bold;">
        <span style="color: #ffffff;">Get Started</span>
      </a>
    </td>
  </tr>
</table>
Headings
  • Use heading elements (<h1> through <h6>) for visual and semantic structure
  • Maintain heading hierarchy (don't skip levels)
  • Note: heading elements work in most email clients even where other semantic HTML is stripped
Show full SKILL.md (196 more words)Show less
Language
html
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  • Always set lang attribute on <html> element
  • Include xmlns for XHTML compatibility (some email clients require it)

Dark Mode Adaptation

html
<!-- Meta tag for dark mode support -->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

<style>
  @media (prefers-color-scheme: dark) {
    .email-body { background-color: #1a1a1a !important; }
    .text-content { color: #e0e0e0 !important; }
  }
</style>

Rules:

  • Test contrast ratios in both light and dark modes
  • Some clients invert colors automatically — use data-ogsb="ignore" for Outlook.com to prevent unwanted inversions
  • Transparent PNGs work well in both modes; JPGs with white backgrounds look broken in dark mode

Reading Order

  • Email reading order follows the HTML source order (no CSS Grid reordering possible in email)
  • Single-column layouts are most accessible — multi-column requires careful dir="ltr" and table cell ordering
  • For RTL languages, use dir="rtl" on the <html> element and reverse table cell order

Framework Patterns

MJML
html
<mj-image src="photo.jpg" alt="Description of the image" />
<mj-button href="https://example.com" background-color="#005a9c" color="#ffffff">
  Accessible Button Text
</mj-button>
Foundation for Emails
html
<img src="photo.jpg" alt="Description" class="float-center">
<button class="button large" href="https://example.com">
  <a href="https://example.com">Accessible Button Text</a>
</button>

Email Accessibility Checklist

Each check, with its WCAG SC and priority.

CheckWCAG SCPriority
All layout tables have role="presentation"1.3.1Critical
All images have meaningful or empty alt1.1.1Critical
Link text is descriptive2.4.4Serious
Color contrast meets 4.5:11.4.3Serious
Language is set on <html>3.1.1Serious
Heading hierarchy is logical1.3.1Moderate
Links are underlined (not color-only)1.4.1Moderate
Dark mode contrast is verified1.4.3Moderate
Preheader text is meaningfulBest practiceMinor
Alt text styled for image-blocked viewBest practiceMinor

© Community-Access, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in skills/kb-email-accessibility of Community-Access/accessibility-agents.

  • SKILL.md
  • agents/openai.yaml

Open the folder on GitHubat commit decf6ba

Compare with similar skills

Kb Email Accessibility 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.

Kb Email Accessibility compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Kb Email Accessibility this skillCommunity-Access/accessibility-agents423—~1.6kAutomated safety check: PassMIT
Color Auditrome-os/rome737—~2.7kAutomated safety check: PassMIT
Ant Designkqcoxn/MaaPipelineEditor4081 repos~1.1kAutomated safety check: PassMIT
Better Colorstrycompai/crm11k—~1.9kAutomated safety check: PassMIT
Data-Dense Dashboard Designerplugin87/ux-ui-agent-skills1.6k—~2.6kAutomated safety check: PassMIT
Material Design 3 UI/UX Guideskydashnet/material-design-3-ui-skill135—~3kAutomated safety check: PassMIT

Similar skills

  • Color Audit

    rome-os/rome

    Audit a design system's color palette against measurable color-science disciplines — WCAG/APCA contrast of declared token pairs, perceptual (OKLCH) ramp uniformity, color-blindness safety of…

    737 GitHub stars~2.7k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Ant Design

    kqcoxn/MaaPipelineEditor

    Decision guide for antd 6.x, Ant Design Pro 5/ProComponents, Ant Design X v2, and the offline @ant-design/cli.

    408 GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed

  • Better Colors

    trycompai/crm

    OKLCH color space and color usage for web projects. An agent skill from trycompai/crm.

    11k GitHub stars~1.9k tokensUpdated 28 days ago
    Frontend & DesignAuto-check passed

  • Data-Dense Dashboard Designer

    plugin87/ux-ui-agent-skills

    Lays out dense analytics or trading-terminal screens in banded sections with hand-drawn SVG charts, instead of a wall of identical stat cards.

    1.6k GitHub stars~2.6k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Material Design 3 UI/UX Guide

    skydashnet/material-design-3-ui-skill

    Guides designing, reviewing or implementing interfaces that follow Google's Material Design 3 system: semantic tokens, component states, adaptive layout and accessibility.

    135 GitHub stars~3k tokensUpdated 8 days ago
    Frontend & DesignAuto-check passed

  • UI Design System

    try-works/role-model

    React UI component systems with TailwindCSS + Radix + shadcn/ui.

    118 GitHub stars~5k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

More from Community-Access/accessibility-agents

All 108 skills in this repo

  • A11y Core

    Community-Access/accessibility-agents

    Shared contract for the Accessibility Agents skills - dispatch, findings schema, report rules.

    423 GitHub stars~1.2k tokensUpdated 16 days ago
    Auto-check passed

  • Kb Web Scanning

    Community-Access/accessibility-agents

    Reference data, not a reviewer. An agent skill from Community-Access/accessibility-agents.

    423 GitHub stars~1.2k tokensUpdated 16 days ago
    Auto-check passed

  • Accessibility Lead

    Community-Access/accessibility-agents

    Web UI accessibility lead. An agent skill from Community-Access/accessibility-agents.

    423 GitHub stars~932 tokensUpdated 16 days ago
    Auto-check passed

  • Alt Text Headings

    Community-Access/accessibility-agents

    Alt text, SVGs, figures, charts, heading order, page titles and landmarks.

    423 GitHub stars~1.5k tokensUpdated 16 days ago
    Auto-check passed

  • Aria Specialist

    Community-Access/accessibility-agents

    ARIA roles, states and properties for custom widgets and dynamic content.

    423 GitHub stars~1.6k tokensUpdated 16 days ago
    Auto-check passed

  • Cognitive Accessibility

    Community-Access/accessibility-agents

    Plain language, WCAG 2.2 cognitive criteria, COGA guidance and auth UX.

    423 GitHub stars~1.4k tokensUpdated 16 days ago
    Auto-check passed

Categories

Questions about Kb Email Accessibility

What does Kb Email Accessibility do?

Reference data, not a reviewer. An agent skill from Community-Access/accessibility-agents. Kb Email Accessibility is an agent skill from Community-Access/accessibility-agents. Reference data, not a reviewer.

When should I use Kb Email Accessibility?

Kb Email Accessibility fits situations like: tasks that involve Accessibility; tasks that involve Theming and dark mode.

How do I install Kb Email Accessibility in Claude Code?

Run `npx skills add Community-Access/accessibility-agents --skill kb-email-accessibility -a claude-code`. Or copy the skill folder (skills/kb-email-accessibility in Community-Access/accessibility-agents) into .claude/skills/kb-email-accessibility in your project. Claude Code loads it when a task matches its description.

How do I install Kb Email Accessibility in Codex?

Run `npx skills add Community-Access/accessibility-agents --skill kb-email-accessibility -a codex`. Or copy the skill folder (skills/kb-email-accessibility in Community-Access/accessibility-agents) into .agents/skills/kb-email-accessibility in your project. Codex loads it when a task matches its description.

Can I use Kb Email Accessibility 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 Community-Access/accessibility-agents --skill kb-email-accessibility -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/kb-email-accessibility, .gemini/skills/kb-email-accessibility, .github/skills/kb-email-accessibility and .opencode/skills/kb-email-accessibility in your project.

What does Kb Email Accessibility need to run?

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

Does Kb Email Accessibility access the network?

SKILL.md names 1 domain. In commands or code: w3.org; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Kb Email Accessibility 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 Kb Email Accessibility use?

Kb Email Accessibility is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Kb Email Accessibility use?

About 1.6k tokens (SKILL.md is roughly 6.5k 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 Kb Email Accessibility?

Skills that share tags, products or a category with Kb Email Accessibility: Color Audit (rome-os/rome, 737 stars), Ant Design (kqcoxn/MaaPipelineEditor, 408 stars), Better Colors (trycompai/crm, 11k stars) and Data-Dense Dashboard Designer (plugin87/ux-ui-agent-skills, 1.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Kb Email Accessibility?

Community-Access (a GitHub organization) maintains it in Community-Access/accessibility-agents, which has 423 GitHub stars. The repository holds 108 skills in this directory. The repository was last updated on September 23, 2026.

Source: Community-Access/accessibility-agents on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.