FrancoStino/ui-a11y
bundled-skills/ui-a11y/SKILL.md
Audit a component or page for accessibility issues and fix them
$ install --global
skillsauthnpx skillsauth add FrancoStino/opencode-skills-antigravity ui-a11yInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 10, 2026, 3:20 AM125.2s1 file scanned
SKILL.md
- name:
- ui-a11y
- description:
- Audit a component or page for accessibility issues and fix them
- risk:
- unknown
- source:
- https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-a11y
- source_repo:
- bitjaru/styleseed
- source_type:
- community
- date_added:
- 2026-07-01
- license:
- MIT
- license_source:
- https://github.com/bitjaru/styleseed/blob/main/LICENSE
Accessibility Audit
When to Use
Use this skill when you need audit a component or page for accessibility issues and fix them.
When NOT to use
- For general design system compliance review → use
/ss-review - For Nielsen UX heuristics → use
/ss-audit - For non-StyleSeed code (no
data-slot, no semantic tokens) — assumes StyleSeed conventions - For runtime testing — this is a static code audit, not a screen-reader simulation
Target: $ARGUMENTS
Audit Criteria
WCAG 2.2 AA Compliance
1. Perceivable
- Color contrast: Text must meet 4.5:1 (normal) or 3:1 (large/bold text)
- Check
text-muted-foreground(#717182) onbg-background(#FFFFFF) = 4.6:1 (passes) - Check
text-brandon white (verify contrast with your skin's brand color) - Flag any custom colors that don't meet ratio
- Check
- Non-text contrast: UI controls/graphics must meet 3:1
- Text alternatives: All
<img>needalt, icons needaria-labelwhen meaningful - Color independence: Don't convey info by color alone (add icons/text)
2. Operable
- Touch targets: Minimum 44x44px (
min-h-11 min-w-11)- Common violation:
h-9(36px) buttons — should beh-11 - Icon buttons need explicit size:
w-11 h-11
- Common violation:
- Keyboard navigation: All interactive elements must be keyboard-accessible
- Tab order should be logical
focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
- Motion: Animations must respect
prefers-reduced-motion@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
3. Understandable
- Labels: Form inputs must have visible labels or
aria-label - Error messages: Form errors must be programmatically associated (
aria-describedby) - Language:
<html lang="en">(or appropriate language code for your project)
4. Robust
- Semantic HTML: Use appropriate elements (
<button>,<nav>,<main>,<header>) - ARIA: Use Radix UI components (they handle ARIA automatically)
- Roles: Custom interactive elements need proper
roleattributes
Design System Token Reference
| Token | Minimum Contrast | Note |
|-------|-----------------|------|
| --foreground | 7:1+ | Body text — verify with your skin |
| --muted-foreground | 4.5:1+ | Secondary text — verify with your skin |
| --brand | 4.5:1+ | Accent — verify with your skin's brand color |
| --destructive | 4.5:1+ | Error — verify with your skin |
| --success | 3:1+ | Large text/icons only — verify with your skin |
| --warning | 4.5:1+ | Warning text — some skins need a darker variant |
Output
- Issues found: List with severity (Critical/Major/Minor)
- Auto-fixes: Apply fixes directly where possible
- Manual review needed: Flag items that need human judgment
Limitations
- Use this skill only when the task clearly matches its upstream source and local project context.
- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.
Related Skills
FrancoStino/llm-security
tools
VerifiedTrustedCommunity
Authorized security assessment of LLM applications and AI agents: prompt injection, tool abuse, RAG exposure, memory poisoning, system-prompt extraction, and agent-compliance engineering per OWASP LLM/ASI Top 10.
68SKILL.mdUpdated Aug 30, 2026
FrancoStino/liuguang-banlan-ui
development
VerifiedTrustedCommunity
Builds two parameterized UI modes—流光溢彩白 (iridescent white) and 五彩斑斓黑 (colorful black)—with OKLCH, WebGL/CSS fallback, vision gating, screenshot QA, and total/per-color intensity reports. Use when a UI request names either mode or needs measured color parameters.
68SKILL.mdUpdated Aug 30, 2026
FrancoStino/kimi-delegate
tools
VerifiedTrustedCommunity
Delegate coding tasks to the Kimi Code CLI (`kimi`) only when the user explicitly requests it, while the orchestrator retains review and landing responsibility.
68SKILL.mdUpdated Aug 30, 2026
FrancoStino/js-reverse
development
VerifiedTrustedCommunity
Front-end JavaScript reverse engineering: locate signature chains, analyze encrypted request parameters, sample runtime behavior, and reproduce logic locally in Node for evidence-based output.
68SKILL.mdUpdated Aug 30, 2026