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.