applying-a11y-standards
Rules for ensuring Accessibility (a11y) across the Tourly app. Use to build inclusive interfaces.
Best use case
applying-a11y-standards is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Rules for ensuring Accessibility (a11y) across the Tourly app. Use to build inclusive interfaces.
Teams using applying-a11y-standards should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/applying-a11y-standards/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How applying-a11y-standards Compares
| Feature / Agent | applying-a11y-standards | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Rules for ensuring Accessibility (a11y) across the Tourly app. Use to build inclusive interfaces.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Accessibility Standards (a11y) ## When to use this skill - Every time you create a new component or page. - During UI audits. ## Best Practices - **Semantic HTML**: Use `<main>`, `<header>`, `<footer>`, `<nav>`, and appropriate heading levels. - **ARIA Labels**: Use `aria-label` for icon-only buttons. - **Keyboard Nav**: Ensure all interactive elements have a visible `:focus-visible` state. - **Contrast**: Maintain a text-to-background contrast ratio of at least 4.5:1. ## Instructions - **Tools**: Use the `axe-core` library or Lighthouse to run automated audits. - **Alt Text**: Every `Image` must have a descriptive `alt` attribute.
Related Skills
applying-responsive-standards
Rules for mobile-first responsive design using Tailwind CSS. Use on every UI component to ensure cross-device compatibility.
write-coding-standards-from-file
Write a coding standards document for a project using the coding styles from the file(s) and/or folder(s) passed as arguments in the prompt.
readme-standards
README template structure and required sections
documentation-standards
Clear technical documentation with JSDoc, READMEs, Mermaid diagrams, ISMS policy references, and comprehensive code examples
Naming & Tagging Standards
Establish consistent resource naming conventions and mandatory tagging for cost allocation, security, and governance
a11y-checker-ci
Adds comprehensive accessibility testing to CI/CD pipelines using axe-core Playwright integration or pa11y-ci. Automatically generates markdown reports for pull requests showing WCAG violations with severity levels, affected elements, and remediation guidance. This skill should be used when implementing accessibility CI checks, adding a11y tests to pipelines, generating accessibility reports, enforcing WCAG compliance, automating accessibility scans, or setting up PR accessibility gates. Trigger terms include a11y ci, accessibility pipeline, wcag ci, axe-core ci, pa11y ci, accessibility reports, a11y automation, accessibility gate, compliance check.
standards-typescript
This skill provides TypeScript coding standards and is automatically loaded for TypeScript projects. It includes naming conventions, best practices, and recommended tooling.
standards-python
This skill provides Python coding standards and is automatically loaded for Python projects. It includes naming conventions, best practices, and recommended tooling.
standards-frontend
Frontend component and UI development standards for modern React/Next.js applications. Includes React 19 patterns, Tailwind CSS v4, Server Components, accessibility, and the Anthropic frontend-design aesthetic philosophy.
security-environment-standards
Security and environment configuration standards for web applications, including environment variable management, secure coding practices, and production deployment security. Use when setting up environments, configuring security, or deploying applications.
modern-python-standards
Strict adherence to modern (3.11+), idiomatic, and type-safe Python development.
mcp-standards
MCP server standardization patterns for Claude Code plugins. Use when implementing MCP servers, designing tool interfaces, configuring MCP transports, or standardizing MCP naming conventions. Trigger keywords - "MCP", "MCP server", "MCP tools", "MCP transport", "tool naming", "MCP configuration".