Web Interface Guidelines Reviewer
vercel-labs/openreview
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…
Comprehensive accessibility and universal design expertise covering ADA/ABA Accessibility Standards, universal design principles (Ron Mace's 7 principles), inclusive environment design, accessible…
$ npx skills add Abhinavbwj/Skills-Architects --skill accessibility-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Abhinavbwj/Skills-Architects accessibility-design --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Abhinavbwj/Skills-Architects.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/accessibility-design .claude/skills/accessibility-design && rm -rf skills-srcUse ~/.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/
Install the "accessibility-design" agent skill from https://github.com/Abhinavbwj/Skills-Architects/tree/main/skills/accessibility-design into .claude/skills/accessibility-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "accessibility-design", 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 install https://github.com/Abhinavbwj/Skills-Architects/tree/main/skills/accessibility-designType 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.
$ npx skills add Abhinavbwj/Skills-Architects --skill accessibility-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Abhinavbwj/Skills-Architects accessibility-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Abhinavbwj/Skills-Architects.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/accessibility-design .agents/skills/accessibility-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "accessibility-design" agent skill from https://github.com/Abhinavbwj/Skills-Architects/tree/main/skills/accessibility-design into .agents/skills/accessibility-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "accessibility-design", 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.
$ npx skills add Abhinavbwj/Skills-Architects --skill accessibility-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Abhinavbwj/Skills-Architects accessibility-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Abhinavbwj/Skills-Architects.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/accessibility-design .cursor/skills/accessibility-design && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "accessibility-design" agent skill from https://github.com/Abhinavbwj/Skills-Architects/tree/main/skills/accessibility-design into .cursor/skills/accessibility-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "accessibility-design", 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 https://github.com/Abhinavbwj/Skills-Architects.git --path skills/accessibility-design--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Abhinavbwj/Skills-Architects --skill accessibility-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Abhinavbwj/Skills-Architects accessibility-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Abhinavbwj/Skills-Architects.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/accessibility-design .gemini/skills/accessibility-design && rm -rf skills-srcUse ~/.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/
Install the "accessibility-design" agent skill from https://github.com/Abhinavbwj/Skills-Architects/tree/main/skills/accessibility-design into .gemini/skills/accessibility-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "accessibility-design", 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.
$ gh skill install Abhinavbwj/Skills-Architects accessibility-designInstalls 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).
$ npx skills add Abhinavbwj/Skills-Architects --skill accessibility-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Abhinavbwj/Skills-Architects.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/accessibility-design .github/skills/accessibility-design && rm -rf skills-srcUse ~/.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/
Install the "accessibility-design" agent skill from https://github.com/Abhinavbwj/Skills-Architects/tree/main/skills/accessibility-design into .github/skills/accessibility-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "accessibility-design", 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.
$ npx skills add Abhinavbwj/Skills-Architects --skill accessibility-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Abhinavbwj/Skills-Architects accessibility-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Abhinavbwj/Skills-Architects.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/accessibility-design .opencode/skills/accessibility-design && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "accessibility-design" agent skill from https://github.com/Abhinavbwj/Skills-Architects/tree/main/skills/accessibility-design into .opencode/skills/accessibility-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "accessibility-design", 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.
accessibility-designComprehensive accessibility and universal design expertise covering ADA/ABA Accessibility Standards, universal design principles (Ron Mace's 7 principles), inclusive environment design, accessible…
Accessibility Design is an agent skill from Abhinavbwj/Skills-Architects. Comprehensive accessibility and universal design expertise covering ADA/ABA Accessibility Standards, universal design principles (Ron Mace's 7 principles), inclusive environment design, accessible route requirements, dimensional standards for wheelchair access, ramps, stairs, elevators, sanitary facilities, sensory accessibility (visual and hearing impairment), neurodiversity-informed design, aging in place, and international code comparison across ADA (US), Equality Act/BS 8300 (UK), DIN 18040 (Germany), AS 1428…
Its SKILL.md is about 7.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/ada-standards.md` and `references/universal-design-principles.md`).
It sits in Frontend & Design, covering Accessibility. The licence is MIT.
Read from SKILL.md and the folder at commit 30a0845. It shows what the files ask for, not the result of running them.
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.
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Accessibility Design loads about 7.4k tokens when it runs, and up to ~16k if it reads all its reference files. Until then it costs about 142 tokens; SKILL.md has 4,175 words of instructions outside code blocks.
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.
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.
The full file from Abhinavbwj/Skills-Architects at commit 30a0845, republished under its MIT licence (© Abhinavbwj). 4,175 words, ~7,434 tokens.
.claude/skills/accessibility-design/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.This skill provides practitioner-grade knowledge of accessibility standards, universal design principles, and inclusive design strategies for architectural practice. All dimensional values are given in metric with imperial equivalents where standard practice requires.
Universal design, as defined by Ronald L. Mace at the Center for Universal Design (North Carolina State University, 1997), is the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.
Principle 1: Equitable Use The design is useful and marketable to people with diverse abilities.
Guidelines:
Architectural application: A single entrance that is level with the sidewalk serves wheelchair users, parents with strollers, delivery workers, and ambulatory visitors equally. A separate "accessible entrance" at the back of the building fails this principle even if it meets code.
Principle 2: Flexibility in Use The design accommodates a wide range of individual preferences and abilities.
Guidelines:
Architectural application: Lever door handles work for persons with limited grip strength, those carrying packages, and those using elbows due to hand injuries. A door with both push-plate and pull-handle accommodates multiple approach methods.
Principle 3: Simple and Intuitive Use Use of the design is easy to understand, regardless of the user's experience, knowledge, language skills, or current concentration level.
Guidelines:
Architectural application: Wayfinding that uses consistent color-coding, pictograms, and intuitive spatial sequences. A building where the main circulation path is visually obvious without signage.
Principle 4: Perceptible Information The design communicates necessary information effectively to the user, regardless of ambient conditions or the user's sensory abilities.
Guidelines:
Architectural application: Elevator lobbies with floor numbers in visual (large print, high contrast), tactile (raised characters and Braille), and audible (voice announcement) formats.
Principle 5: Tolerance for Error The design minimizes hazards and the adverse consequences of accidental or unintended actions.
Guidelines:
Architectural application: Platform edge barriers at transit platforms. Contrasting nosings on stairs to prevent missteps. Automatic door closers that prevent doors from slamming. Slip-resistant flooring at entries and wet areas.
Principle 6: Low Physical Effort The design can be used efficiently and comfortably and with a minimum of fatigue.
Guidelines:
Architectural application: Power-operated doors at high-traffic entrances. Maximum door opening force of 22 N (5 lbf) for interior doors per ADA. Lever handles instead of knobs. Elevator locations that minimize walking distance from entries.
Principle 7: Size and Space for Approach and Use Appropriate size and space is provided for approach, reach, manipulation, and use regardless of user's body size, posture, or mobility.
Guidelines:
Architectural application: Reception counters with a lowered section at 865 mm (34 in) for wheelchair users. Adequate clear floor space at controls, fixtures, and displays. Knee clearance under counters and lavatories.
Universal design transcends accessibility codes. Codes establish minimum legal thresholds; universal design aspires to excellence. A building that barely meets ADA requirements may still be frustrating, undignified, or exclusionary. The goal is to design environments that are inherently usable by the broadest possible population without the need for separate "accessible" provisions.
The ADA Standards for Accessible Design (2010) apply to places of public accommodation, commercial facilities, and state/local government facilities in the United States. The ABA Standards apply to federally funded facilities.
Required number of accessible spaces:
| Total Parking | Minimum Accessible |
|---|---|
| 1-25 | 1 |
| 26-50 | 2 |
| 51-75 | 3 |
| 76-100 | 4 |
| 101-150 | 5 |
| 151-200 | 6 |
| 201-300 | 7 |
| 301-400 | 8 |
| 401-500 | 9 |
| 501-1000 | 2% of total |
| > 1000 | 20 + 1 per 100 over 1000 |
For persons with ambulatory disabilities who do not use wheelchairs but require grab bar support:
For persons requiring assistance with personal care (UK BS 8300, Changing Places Consortium guidelines, increasingly adopted internationally):
Tactile Ground Surface Indicators (TGSIs):
Stair and Ramp Visual Contrast:
Visual Contrast (Light Reflectance Value -- LRV):
Braille and Tactile Signage:
Audible Signals:
Hearing (Induction) Loops:
Visual Alarm Devices:
Acoustic Design for Speech Intelligibility:
Neurodivergent conditions (autism spectrum, ADHD, sensory processing disorders, dyslexia) affect approximately 15-20% of the population. Architectural responses:
Quiet spaces / sensory rooms:
Predictable layouts:
Reduced sensory stimulation:
Designing residential buildings for the full lifespan of occupants:
Structural provisions:
Spatial provisions:
Systems provisions:
Lowered fixtures:
Visibility:
Safety:
Any building user may experience temporary impairment: injury (crutches, arm sling), illness (dizziness, fatigue), pregnancy, carrying heavy loads, or simply being unfamiliar with the building.
Design for temporary impairment:
| Requirement | ADA (US) | BS 8300 (UK) | DIN 18040 (DE) | AS 1428 (AU) |
|---|---|---|---|---|
| Route width | 915 mm | 1000-1200 mm | 1200 mm | 1000-1200 mm |
| Turning space | 1525 mm | 1500 mm | 1500 mm | 1540 mm |
| Ramp max slope | 1:12 | 1:12-1:15 | 1:12-1:16 | 1:8-1:14 |
| Door clear width | 815 mm | 800-850 mm | 900 mm | 850 mm |
| WC grab bar height | 840-915 mm | 680-700 mm* | 850 mm | 810-830 mm |
| Parking space width | 2440 mm | 2400 mm+ | 3500 mm | 2400 mm |
(*UK grab bars are often lower due to different measurement reference point and user research.)
This skill provides general guidance for accessible design. All designs must comply with the specific accessibility standards and building codes adopted by the jurisdiction. Accessibility codes establish minimums -- practitioners should aim for universal design excellence beyond code requirements.
© Abhinavbwj, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 2 other files (references) in skills/accessibility-design of Abhinavbwj/Skills-Architects.
Open the folder on GitHubat commit 30a0845
Accessibility Design 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Accessibility Design this skillAbhinavbwj/Skills-Architects | 296 | — | ~7.4k | Automated safety check: Pass | MIT | |
| Web Interface Guidelines Reviewervercel-labs/openreview | 1.7k | 97 repos | ~308 | Automated safety check: Pass | None | |
| Accessibility Reviewmarkmead/hyperui | 12k | 1 repos | ~1.1k | Automated safety check: Pass | MIT | |
| Web Animation DesignbaptisteArno/typebot.io | 11k | 2 repos | ~2.7k | Automated safety check: Pass | Custom licence | |
| Accessibility Fixeribelick/ui-skills | 9.5k | 4 repos | ~1.2k | Automated safety check: Pass | MIT | |
| Wcag Audit PatternsvmDeshpande/ai-agent-automation | 178 | 11 repos | ~610 | Automated safety check: Pass | Apache-2.0 |
vercel-labs/openreview
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…
markmead/hyperui
Run a WCAG 2.1 AA accessibility audit on a design or page. An agent skill from markmead/hyperui.
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.
ibelick/ui-skills
Audits and fixes HTML accessibility problems such as ARIA labels, keyboard navigation, focus management, contrast and form errors with minimal changes.
vmDeshpande/ai-agent-automation
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance.
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.
Abhinavbwj/Skills-Architects
Seven command-line Python calculators for early architectural checks: area and density, U-value, daylight factor, egress, structural load, energy demand and cost.
Abhinavbwj/Skills-Architects
Compares building types, from detached houses to supertall towers, using plan depth, density and efficiency metrics plus exemplar buildings.
Abhinavbwj/Skills-Architects
Guides architectural programming work: space needs, adjacency matrices, area schedules and net-to-gross checks for project briefs across common building types.
Abhinavbwj/Skills-Architects
Knowledge base for early-stage architectural design: parti development, massing studies, spatial organization and translating abstract ideas into building form.
Abhinavbwj/Skills-Architects
Architectural movements, design philosophy, critical theory, precedent analysis, and compositional principles for informed design reasoning
Abhinavbwj/Skills-Architects
Architectural material properties, durability, sustainability, specification, detailing, life-cycle assessment, and material palettes for building design
Categories
Comprehensive accessibility and universal design expertise covering ADA/ABA Accessibility Standards, universal design principles (Ron Mace's 7 principles), inclusive environment design, accessible…. Accessibility Design is an agent skill from Abhinavbwj/Skills-Architects.
Accessibility Design fits situations like: tasks that involve Accessibility.
Run `npx skills add Abhinavbwj/Skills-Architects --skill accessibility-design -a claude-code`. Or copy the skill folder (skills/accessibility-design in Abhinavbwj/Skills-Architects) into .claude/skills/accessibility-design in your project. Claude Code loads it when a task matches its description.
Run `npx skills add Abhinavbwj/Skills-Architects --skill accessibility-design -a codex`. Or copy the skill folder (skills/accessibility-design in Abhinavbwj/Skills-Architects) into .agents/skills/accessibility-design in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Abhinavbwj/Skills-Architects --skill accessibility-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/accessibility-design, .gemini/skills/accessibility-design, .github/skills/accessibility-design and .opencode/skills/accessibility-design in your project.
SKILL.md names no scripts, command-line tools or credentials: Accessibility Design is instructions for the agent only.
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.
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.
Accessibility Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 7.4k tokens (SKILL.md is roughly 30k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 8.3k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Accessibility Design: 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.
Abhinavbwj (a GitHub user) maintains it in Abhinavbwj/Skills-Architects, which has 296 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on May 20, 2026.
Source: Abhinavbwj/Skills-Architects on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.