Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add alinaqi/maggy --skill ui-testinggit clone --depth 1 https://github.com/alinaqi/maggyWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/alinaqi/maggy/ui-testing)<a href="https://agentmods.dev/skills/alinaqi/maggy/ui-testing"><img src="https://agentmods.dev/badge/skills/alinaqi/maggy/ui-testing.svg" alt="Measured on agentmods" height="20"></a>- Socket pass
- Snyk pass
- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00014 | $0.01227 |
| Opus 5 | $0.00007 | $0.00613 |
| Sonnet 5 | $0.00003 | $0.00245 |
| Haiku 4.5 | $0.00001 | $0.00123 |
Grade A, and why
ui-testing scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 187 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI Verification Skill
Load with: ui-web.md or ui-mobile.md
Purpose
Quick verification that generated UI meets accessibility standards. Run these checks after creating any new UI components.
Pre-Flight Checklist
Before Shipping ANY UI:
## Visibility Check
- [ ] All buttons have visible background OR border
- [ ] No text is same color as its background
- [ ] All text meets 4.5:1 contrast ratio
- [ ] Ghost/text buttons have visible borders
## Touch/Click Targets
- [ ] All buttons are minimum 44px height
- [ ] Icon buttons are minimum 44x44px
- [ ] Adequate spacing between clickable elements
## States
- [ ] Hover states visible (web)
- [ ] Pressed states visible (mobile)
- [ ] Focus rings on keyboard navigation
- [ ] Disabled states visually distinct (opacity 0.5)
- [ ] Loading states show indicators
## Dark Mode (if applicable)
- [ ] Text readable on dark backgrounds
- [ ] Borders visible in dark mode
- [ ] No gray-400 text on dark backgrounds
## Responsive (web)
- [ ] No horizontal scroll on mobile (320px)
- [ ] Content readable at all breakpoints
- [ ] Touch targets adequate on mobile
Quick Contrast Check
Use Browser DevTools
1. Right-click element → Inspect
2. In Styles panel, click on color value
3. Look for contrast ratio display
4. Must show ✓ for AA compliance (4.5:1 for text)
Online Tools
Tailwind Safe Combinations
LIGHT MODE (on white bg):
✓ text-gray-900 (#111827) = 16:1
✓ text-gray-800 (#1F2937) = 12:1
✓ text-gray-700 (#374151) = 9:1
✓ text-gray-600 (#4B5563) = 6:1
✗ text-gray-500 (#6B7280) = 4.6:1 (barely)
✗ text-gray-400 (#9CA3AF) = 2.6:1 (FAILS)
DARK MODE (on gray-900 bg):
✓ text-white (#FFFFFF) = 16:1
✓ text-gray-100 (#F3F4F6) = 13:1
✓ text-gray-200 (#E5E7EB) = 11:1
✓ text-gray-300 (#D1D5DB) = 8:1
✗ text-gray-400 (#9CA3AF) = 5:1 (barely)
✗ text-gray-500 (#6B7280) = 3:1 (FAILS)
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 4d ago First seen · 187 lines · 14 tokens per session scan A 02b6c34e7476
ui-testing is a skill published in the GitHub repository alinaqi/maggy (705 stars, last pushed 20d ago), licensed MIT. It adds 14 tokens to every session and 1,227 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
ring:checking-frontend-quality
Checking frontend quality against changed UI via ring:qa-frontend in accessibility, visual, e2e, or performance mode and aggregating pass/fail verdicts. Use when a frontend change needs standalone a11y, visual-snapshot, Playwright e2e, or Lighthouse/Core-Web-Vitals validation outside the dev cycle. Skip for…
go-testing
Trigger: Go tests, go test coverage, Bubbletea teatest, golden files. Apply focused Go testing patterns.
verify
Runs this project's check chain through scripts/verify.py and reads the receipt it writes. Fires when tracked changes are finished, when the user asks whether work passes, before a commit, and before reporting a task done. Stays dormant in repositories with no detectable check chain, during read-only audits, and for…
memstack-development-webapp-testing
Use when the user says 'write browser tests', 'test this page', 'playwright test', 'e2e test', 'end to end test', 'browser test', 'test the UI', or needs Playwright-based browser testing for a web application. Do NOT use for unit tests, API tests, or non-browser testing.
app-user-story-qa
End-to-end app feature inventory and user-story testing workflow with a canonical tracker. Use when the user asks to audit every feature, derive expected behavior from code, test user journeys, or explicitly fix and retest documented UX or logistical defects.
ijfw-ui-spec
Use when the user says: 'ui spec', 'design contract', 'ui audit setup', 'lock the design', 'visual contract', 'ui review setup', or '/ijfw-ui-spec'. Produces UI-SPEC.md as the visual design contract before any frontend or visual-artifact build, and dispatches ijfw-ui-auditor as the final 6-pillar gate.