Intopia Web Accessibility: Install, Source and Security | FunnelSlayer
FunnelSlayer
Book a call

Intopia Web Accessibility

Published by intopia in intopia-web-accessibility-skill

No known issues39 installs

What this skill does

Build accessible web user interfaces that meet WCAG 2.2 Level AA. Use whenever generating HTML, CSS, JSX, TSX, React, Vue, or Svelte components, pages, forms, modals, or email templates - including small snippets.

Add Intopia Web Accessibility to your agent

Review the source and files first. When you are ready, copy the prompt instruction or use the CLI command supported by your environment.

Install with a prompt

Paste this into a compatible coding agent:

add this skill "intopia-web-accessibility" from https://github.com/intopia/intopia-web-accessibility-skill

Install with the CLI

Run this command in a controlled environment after reviewing the repository:

npx skills add https://github.com/intopia/intopia-web-accessibility-skill --skill intopia-web-accessibility

Skill instructions

Overview

Apply these accessibility principles whenever generating or modifying UI code. The goal is interfaces usable by people of all abilities, without workarounds.

Instructions

  1. Identify each UI component and which cross-cutting topics the user's request touches (forms, keyboard/focus, images/charts, drag and drop, live regions, responsive layout, structure/semantics, colour).
  2. Read INDEX.md. For every component identified, load the linked acceptance criteria file (and code example file, if one exists). If a component's row in INDEX.md's Component Index names bases in its Load first column, load those first (once each, in the order given, even when several requested components share a base), then load the component's own file for its deltas. For every applicable topic, load its file from references/topic/ via the Topic Index. These are authoritative - do not generate code without consulting them.
  3. If colour values are involved, consult references/colour-contrast/Colour Contrast Reference.md.
  4. Apply the Universal Rules below to fill any gaps not covered by the component or topic references.
  5. Generate the code.
  6. After presenting the code, list the specific accessibility decisions made, one line per component or pattern (e.g. "Modal: focus moves to heading on open, trapped while open, returns to trigger on close").

Universal Rules (always apply)

These rules apply to every generation regardless of which topics are loaded. Load the relevant topic file (see the Topic Index in INDEX.md) for the detail behind each.

  • Use semantic HTML first; use elements for their intended purpose. See references/topic/Topic - Structure and Semantics.md.
  • Use ARIA sparingly; never add a role a native element already has. See references/topic/Topic - Structure and Semantics.md.
  • Every interactive element has an accessible name, correct role, and current state.
  • Tab order follows visual reading order; never use tabindex greater than 0; focus is never lost or moved off-screen. See references/topic/Topic - Keyboard and Focus.md.
  • All interactive elements have a visible focus indicator with at least 3:1 contrast.
  • Manage focus for dynamic content (modals, menus, SPA navigation). See references/topic/Topic - Keyboard and Focus.md.
  • Text and UI contrast meets 4.5:1 (normal text) or 3:1 (large text and UI components). See references/colour-contrast/Colour Contrast Reference.md.
  • Never convey meaning by colour alone.

Files included

  • SKILL.md
  • LICENSE
  • assets/tabs-palette.json
  • README.md
  • references/acceptance-criteria/Acceptance Criteria - Checkbox Group.md
  • references/acceptance-criteria/Acceptance Criteria - Button.md
  • references/acceptance-criteria/Acceptance Criteria - Carousel.md
  • references/acceptance-criteria/Acceptance Criteria - Checkbox.md
  • references/acceptance-criteria/Acceptance Criteria - Combobox (list autocomplete).md
  • references/acceptance-criteria/Acceptance Criteria - Combobox (date picker).md
  • INDEX.md
  • references/acceptance-criteria/Acceptance Criteria - Card.md
  • references/acceptance-criteria/Acceptance Criteria - Combobox (list and inline autocomplete).md
  • references/acceptance-criteria/Acceptance Criteria - Accordion.md
  • assets/colour-contrast-template.json
  • references/acceptance-criteria/Acceptance Criteria - Combobox (grid popup).md
  • references/acceptance-criteria/Acceptance Criteria - Combobox (no autocomplete).md
  • references/acceptance-criteria/Acceptance Criteria - Image.md
  • references/acceptance-criteria/Acceptance Criteria - Landmark.md
  • references/acceptance-criteria/Acceptance Criteria - Interactive Control.md
  • references/acceptance-criteria/Acceptance Criteria - Heading.md
  • references/acceptance-criteria/Acceptance Criteria - Complex Image (e.g. diagram, graph, infographic).md
  • references/acceptance-criteria/Acceptance Criteria - Menu Button.md
  • references/acceptance-criteria/Acceptance Criteria - Combobox.md
  • references/acceptance-criteria/Acceptance Criteria - Modal Dialog.md
  • references/acceptance-criteria/Acceptance Criteria - Disclosure.md
  • references/acceptance-criteria/Acceptance Criteria - Page Language.md
  • references/acceptance-criteria/Acceptance Criteria - Select.md
  • references/acceptance-criteria/Acceptance Criteria - Radio Group.md
  • references/acceptance-criteria/Acceptance Criteria - Link.md
  • references/acceptance-criteria/Acceptance Criteria - Text Field.md
  • references/acceptance-criteria/Acceptance Criteria - Tabs.md
  • references/acceptance-criteria/Acceptance Criteria - Toggletip.md
  • references/acceptance-criteria/Acceptance Criteria - Page Title.md
  • references/acceptance-criteria/Acceptance Criteria - List.md
  • references/acceptance-criteria/Acceptance Criteria - Tooltip.md
  • references/code-example/Code example - Combobox.md
  • references/code-example/Code example - Complex Image (e.g. diagram, graph, infographic).md
  • references/code-example/Code example - Disclosure.md
  • references/code-example/Code example - Button.md
  • references/acceptance-criteria/Acceptance Criteria - Table.md
  • references/code-example/Code example - Link.md
  • references/code-example/Code example - List.md
  • references/code-example/Code example - Heading.md
  • references/code-example/Code example - Radio Group.md
  • references/code-example/Code example - Table.md
  • references/code-example/Code example - Image.md
  • references/code-example/Code example - Landmark.md
  • references/topic/Topic - Images and Charts.md
  • references/topic/Topic - Keyboard and Focus.md
  • references/code-example/Code example - Page Title.md
  • references/code-example/Code example - Text Field.md
  • references/code-example/Code example - Page language.md
  • scripts/check-colour-contrast.js
  • scripts/composite-colour.js
  • references/topic/Topic - Drag and Drop.md
  • references/colour-contrast/Colour Contrast Reference.md
  • references/topic/Topic - Forms.md
  • references/topic/Topic - Responsive and Reflow.md
  • references/topic/Topic - Live Regions and Status.md
  • references/topic/Topic - Structure and Semantics.md

More skills