antislop-human

Validate UI accessibility for contrast, keyboard navigation, focus states, and mobile zoom.

Updated Sep 17, 2026
One-click install
npx skills add https://github.com/bramanda48/skills --skill antislop-human-bramanda48
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: antislop-human
Source: https://github.com/bramanda48/skills/tree/main/skills/antislop-human
Command: npx skills add https://github.com/bramanda48/skills --skill antislop-human-bramanda48

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated and hand-built UIs often ship with accessibility defects that exclude real users: low-contrast text, removed focus outlines, mouse-only interactions, color-only status feedback, and forms hidden behind mobile keyboards. This Skill gives coding agents concrete rules and a deterministic contrast checker to catch these issues before delivery. ## Core Features & Use Cases - WCAG Contrast Verification: Compute contrast ratios via a bundled Python script, the WCAG 2.x formula, or a precomputed reference table, with PASS/FAIL verdicts for normal (4.5:1) and large (3.0:1) text. - Keyboard and Focus Rules: Enforce reachable tab order, visible focus indicators at 3:1 contrast, Escape-closable dialogs, and a ban on outline: none without replacement. - State and Mobile Checks: Require perceivable empty/loading/error states, non-color-only feedback, 200% text zoom without clipping, and inputs that scroll above the on-screen keyboard. - Use Case: While building a settings page, run contrast-check.py "#FFFFFF" "#777777" to confirm a muted label fails normal-text contrast (4.48 < 4.5), then pick a darker shade before shipping. ## Quick Start Ask the agent to review your UI code against the antislop-human checklist and verify every text and background color pairing with the bundled contrast checker script.

Frequently Asked Questions about antislop-human

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check WCAG color contrast from the command line?

Run the bundled script with two hex colors: python3 contrast-check.py "#FFFFFF" "#777777". It prints the contrast ratio and PASS/FAIL verdicts for normal text (4.5:1) and large text (3.0:1), exiting nonzero when either fails.

What contrast ratio is required for WCAG AA text?

WCAG AA requires 4.5:1 for normal text and 3.0:1 for large text (18px or larger). Non-text UI elements like button borders, icons, and focus indicators must meet 3:1 against adjacent colors per WCAG 1.4.11.

How is the WCAG contrast ratio calculated?

Convert each RGB channel to 0-1, linearize it (divide by 12.92 if <= 0.03928, otherwise apply ((c+0.055)/1.055)^2.4), then compute luminance as 0.2126R + 0.7152G + 0.0722B. The ratio is (L1 + 0.05) / (L2 + 0.05) with the lighter luminance on top.

Can I use the contrast checker without the Python script?

Yes. The SKILL.md documents the full WCAG 2.x formula for manual computation and includes a reference table of common pairings with precomputed ratios. The script is a convenience, not a requirement, and the skill says never to block on it.

Why does grey text on white backgrounds often fail accessibility checks?

The eye overestimates contrast on grey pairs, so combinations like #777777 on white (4.48:1) fall just below the 4.5:1 normal-text threshold. Always compute the ratio with the formula or script instead of judging by appearance.

Does this skill cover responsive layout and breakpoints?

No. Layout mechanics like breakpoints, grids, and tap targets belong to the separate antislop-layoutmobile skill. This skill keeps only the mobile details that exclude people: text zoom to 200% without clipping and inputs staying visible above the on-screen keyboard.