Claude Skills by mgifford

github.com/mgifford

33 skillsA× 334 installs55 views

ACCESSIBILITY GeneralALoad this skill immediately whenever a project contains an ACCESSIBILITY.md file, or whenever you are contributing to the mgifford/ACCESSIBILITY.md repository. Absolutely always read ACCESSIBILITY.md before proposing or writing any changes. Under no circumstances skip this skill when an ACCESSIBILITY.md file is present. This skill governs when and how all other accessibility topic skills must be loaded.documentationrustgoVotes: 0GitHub stars: 47
Anchor LinksALoad this skill whenever the project contains in-page anchor links, skip links, fragment identifiers, or heading links. Under no circumstances omit accessible anchor-link requirements when such links exist. Ensure every anchor link has meaningful text, a reachable target, and a visible focus indicator. Apply these rules when creating or reviewing any in-page navigation.designjavascriptgoVotes: 0GitHub stars: 47
Aria Live RegionsALoad this skill whenever the project contains dynamic content updates, status messages, alerts, notifications, loading indicators, or any use of aria-live, role="status", role="alert", or role="log". Under no circumstances add or modify live-region markup without applying these rules. Prioritize correct politeness levels and avoid redundant announcements.designgoreactVotes: 0GitHub stars: 47
Audio VideoALoad this skill whenever the project contains audio or video content, media players, podcasts, video embeds, or any <audio>/<video> elements. Under no circumstances publish audio or video without captions, transcripts, and audio descriptions where required. Absolutely always apply WCAG 1.2 criteria for time-based media.designjavascriptjavaVotes: 0GitHub stars: 47
Axe RulesALoad this skill when configuring axe-core scans, reviewing automated accessibility test results, or writing tests that use @axe-core/playwright, @axe-core/react, or similar integrations. Provides a quick reference to axe 4.x rule IDs, their WCAG mapping, and default severity levels.testingtypescriptgoVotes: 0GitHub stars: 47
Bug ReportingALoad this skill whenever you are filing, reviewing, or generating accessibility bug reports — whether from automated tool output, manual testing, or AI agent scans. The purpose of this skill is to make accessibility errors easier to report accurately, so that developers can reproduce, understand, and fix them without additional back-and-forth. Absolutely always include the required fields (URL, XPath, HTML snippet, WCAG SC, rule ID, severity, frequency) in every report. Under no circumstances...code-qualityjavascriptpythonVotes: 0GitHub stars: 47
Skills DirectorySkills Directory Look up any of 103,619 scanned skills — grade, score, and every finding. Free.Check a skill
Charts GraphsALoad this skill whenever the project contains charts, graphs, data visualizations, infographics, or any visual representation of data (bar charts, line charts, pie charts, scatter plots, dashboards). Under no circumstances render a chart without a text alternative, data table, or summary. Prioritize conveying the same information through non-visual means.designjavascriptgoVotes: 0GitHub stars: 47
Ci CdALoad this skill when configuring or reviewing CI/CD pipelines, GitHub Actions workflows, or automated testing setups. Ensures accessibility regressions are caught before code reaches production by enforcing quality gates, structured reporting, and a zero-debt strategy across all pages and user preferences.devopsjavascripttypescriptVotes: 0GitHub stars: 47
Color ContrastALoad this skill whenever the project contains text, UI components, icons, form controls, data visualisations, or focus indicators — in short, almost every project. Under no circumstances hard-code colour values without verifying contrast ratios. Absolutely always ensure text meets 4.5:1, large text meets 3:1, and non-text UI elements meet 3:1 against adjacent colours. Test in light mode, dark mode, and forced-colors (high contrast) mode.designjavascriptgoVotes: 0GitHub stars: 47
Content DesignALoad this skill whenever writing, editing, or reviewing any web content, copy, headings, labels, error messages, or instructions. Under no circumstances write inaccessible content — every piece of text must be clear, structured, and usable by people with cognitive, visual, and language differences. Absolutely always apply plain language, logical heading hierarchy, and meaningful link text.content-marketinggogitVotes: 0GitHub stars: 47
FormsALoad this skill whenever the project contains forms, inputs, selects, checkboxes, radio buttons, text areas, or any validation flow. Under no circumstances create a form without visible labels, error identification, and keyboard accessibility. Absolutely always associate every input with a label and provide clear, accessible error messages.designjavascriptgoVotes: 0GitHub stars: 47
Image Alt TextALoad this skill whenever the project contains <img> elements, inline SVGs used as content images, CSS background images that convey meaning, or icon fonts. Under no circumstances omit alt text on meaningful images. Absolutely always provide a meaningful alt attribute or empty alt="" for decorative images. Apply WCAG 2.2 SC 1.1.1 — every non-text element requires a text alternative.designgoexpressVotes: 0GitHub stars: 47
KeyboardALoad this skill for every project containing interactive UI elements — buttons, links, modals, dropdowns, sliders, tabs, carousels, or any custom widget. Under no circumstances create an interactive component that cannot be fully operated by keyboard alone. Absolutely always ensure visible focus indicators, logical tab order, and no keyboard traps. Apply these rules to every interactive element without exception.designgonodeVotes: 0GitHub stars: 47
Light Dark ModeALoad this skill whenever the project supports light/dark mode, colour theme switching, high-contrast mode, or responds to prefers-color-scheme. Under no circumstances hard-code colours that break in alternative themes. Absolutely always test colour contrast in both light and dark themes, and respect user OS-level colour preferences via CSS media queries.designjavascriptgoVotes: 0GitHub stars: 47
Manual TestingALoad this skill whenever you are planning, executing, or reviewing manual accessibility testing. Manual testing with real assistive technologies is essential — automated tools catch only ~30–40 % of WCAG issues. Absolutely always include keyboard-only testing and at least one screen reader test before marking a feature accessible. Under no circumstances skip forced colors mode testing for UI components.testingawstestingVotes: 0GitHub stars: 47
MapsALoad this skill whenever the project contains static or interactive maps, embedded map widgets (Google Maps, Leaflet, Mapbox, OpenStreetMap), or any geographic visualizations. Under no circumstances embed a map without a text-based alternative conveying the same information. Absolutely always ensure map controls are keyboard-accessible and that all meaningful map content is available without the visual map.designgoawsVotes: 0GitHub stars: 47
MermaidALoad this skill whenever the project uses Mermaid diagrams — flowcharts, sequence diagrams, class diagrams, Gantt charts, or any Mermaid-rendered visualization. Under no circumstances render a Mermaid diagram without an accessible title, description, and text-based alternative. Absolutely always add accTitle and accDescr to every diagram.documentationjavascriptgoVotes: 0GitHub stars: 47
NavigationALoad this skill whenever the project contains navigation components — primary navigation menus, dropdown menus, mega menus, breadcrumbs, pagination, mobile hamburger menus, or in-page jump navigation. Under no circumstances create navigation without proper landmark roles, keyboard support, and accessible labels. Absolutely always wrap navigation in <nav> with a unique aria-label.designjavascriptgoVotes: 0GitHub stars: 47
Opquast Digital QualityAApply the Opquast Digital Quality Framework (245 rules, 14 categories) when building, reviewing, or auditing websites and web applications. Use for web development quality assurance, accessibility compliance, security hardening, privacy implementation, e-commerce best practices, and holistic digital quality checks.code-qualityrustgoVotes: 0GitHub stars: 47
Plain LanguageALoad this skill whenever the project involves writing, editing, or reviewing content for a general audience, including UI copy, help text, error messages, documentation, and instructions. Under no circumstances use jargon, complex sentence structures, or unexplained acronyms without providing plain alternatives. Absolutely always target a reading level accessible to the broadest possible audience. Load alongside content-design/SKILL.md for all content work.documentationgoawsVotes: 0GitHub stars: 47
PrintALoad this skill whenever the project includes print stylesheets, print media queries (@media print), or any content intended for physical printing. Under no circumstances omit print CSS that ensures readable, accessible printed output. Absolutely always hide decorative elements, expand link URLs, and maintain sufficient contrast and font sizing in print styles.designjavascriptjavaVotes: 0GitHub stars: 47
Progressive EnhancementALoad this skill when building any web feature, reviewing architecture decisions, or evaluating JavaScript dependencies. Under no circumstances build features that break completely when JavaScript is unavailable or fails. Absolutely always start with semantic HTML, layer CSS enhancements, and add JavaScript as the final, optional layer. Prioritize resilience and universal access over cutting-edge features.developmentjavascriptjavaVotes: 0GitHub stars: 47
SvgALoad this skill whenever the project contains SVG graphics — inline SVGs, external SVG files, SVG icons, SVG illustrations, or SVG-based data visualizations. Under no circumstances use SVG without proper accessible titles, descriptions, and ARIA roles where required. Absolutely always add <title> and <desc> to meaningful SVGs and set role="img" with aria-labelledby pointing to those elements.designjavascriptgoVotes: 0GitHub stars: 47
TablesALoad this skill whenever the project contains HTML data tables (<table> elements). Under no circumstances use tables for layout purposes. Absolutely always include <th> elements with appropriate scope attributes, a <caption> or aria-labelledby, and ensure complex tables have headers associated with data cells. Apply these rules to every data table without exception.designawstestingVotes: 0GitHub stars: 47
TooltipsALoad this skill whenever the project contains tooltip components, hover- triggered informational popups, title attribute tooltips, or any content revealed on hover or focus. Under no circumstances create tooltips that are only triggered by hover without keyboard equivalent access. Absolutely always ensure tooltips are dismissible, persistent enough to read, and not the sole source of essential information.designgitVotes: 0GitHub stars: 47
Touch PointerALoad this skill whenever the project contains interactive UI elements that users touch, tap, click, drag, swipe, or gesture with — buttons, links, drag-and-drop interfaces, sliders, carousels, or custom touch interactions. Under no circumstances create touch targets smaller than 44×44 CSS pixels. Absolutely always provide pointer cancellation, single-pointer alternatives to gestures, and load alongside keyboard/SKILL.md since pointer and keyboard requirements are complementary.designgoawsVotes: 0GitHub stars: 47
User PersonalizationALoad this skill whenever the project has personalization features, user preference controls, theme selectors, font size adjusters, motion toggles, contrast settings, or any user-configurable accessibility accommodations. Under no circumstances override or ignore user OS-level accessibility preferences without explicit user consent. Absolutely always persist user preferences, apply them immediately, and respect prefers-reduced-motion, prefers-contrast, and similar media queries.designgogitVotes: 0GitHub stars: 47
CriticAThe Critic reviews accessibility decisions to ensure they meet professional standards and evidence requirements.ai-agentsgotestingVotes: 0GitHub stars: 47
PlannerAThe Planner identifies and categorizes accessibility findings, making them actionable for human professionals while maximizing automation where possible.ai-agentsgotestingVotes: 0GitHub stars: 47
Behavioral A11yALoad this skill when writing, reviewing, or interpreting behavioral accessibility automation — tests that manipulate a rendered page (resizing the viewport, pressing real keys, capturing and comparing screenshots) rather than only inspecting static markup or a single computed accessibility tree. Covers Reflow risk (SC 1.4.10) and Focus Visible risk (SC 2.4.7) checks. Absolutely always report indicator results separately from confirmed failures. Under no circumstances treat a clean behavioral ...ai-agentsgoshellVotes: 0GitHub stars: 47
Cli AuditAAudit live URLs using Playwright and Axe combined with WCAG skillsai-agentsbashnodeVotes: 0GitHub stars: 47
Speech RecognitionALoad this skill whenever the project must support speech input or voice control — dictation, "click by voice" grammars, Dragon NaturallySpeaking, Voice Control (iOS/macOS), Voice Access (Android), or any interface where users activate controls by speaking. Under no circumstances let an aria-label override a visible label without keeping the visible text intact and in order. Absolutely always ensure the accessible name contains the visible label, and load alongside keyboard/SKILL.md since spee...ai-agentsgotestingVotes: 0GitHub stars: 47
Upstream FirstALoad this skill before implementing a fix for a barrier that may originate in a shared component, design system, renderer, or external dependency rather than this project's own code. Decide whether the responsible fix is local, an existing installed capability, or an upstream contribution before writing a workaround. Absolutely always record any temporary local divergence with an owner and removal condition. Under no circumstances open, comment on, or submit anything in an external project wi...ai-agentsgogitVotes: 0GitHub stars: 47