AgentStack
Sign in Publish
MCP servers Skills Toolkits Why AgentStack Sell Docs
Sign in
SKILL verified MIT Self-run

Vue A11y

skill-kimjinwoo4-vue-skills-vue-a11y · by KIMJINWOO4

Accessibility (a11y) for Vue 3 apps. Semantic templates, ARIA component patterns (modal, tabs, menu, combobox), focus management with Teleport and router navigation, accessible forms and errors, automated testing with axe. Use when building UI components, reviewing for accessibility, WCAG compliance, keyboard navigation, or screen reader support.

↗ Repository
— No reviews yet
0 installs
2 views
0.0% view→install

Install

$ agentstack add skill-kimjinwoo4-vue-skills-vue-a11y

✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.

Security review

✓ Passed

No issues found. Passed automated security review. · v0.1.0 How review works →

  • ✓ Prompt-injection patterns
  • ✓ Secret / credential exfiltration
  • ✓ Dangerous shell & filesystem operations
  • ✓ Untrusted network calls
  • ✓ Known-malicious package signatures

What it can access

  • ✓ Network access No
  • ✓ Filesystem access No
  • ✓ Shell / process execution No
  • ✓ Environment & secrets No
  • ✓ Dynamic code execution No

From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.

Are you the author of Vue A11y? Claim this listing to set pricing, connect Stripe payouts, and keep 70% of every sale.
Sign up to claim

About

Vue Accessibility Skill

> Target: WCAG 2.2 AA. Priority order: semantic HTML > keyboard support > focus management > ARIA. ARIA is the last resort, not the first tool — ` beats ` plus three handlers.

Non-negotiables for every component

  1. Interactive = focusable + keyboard-operable (`, , ` give this free).
  2. Every input has a `; every image an alt (empty alt=""` for decorative).
  3. Visible focus indicator — never outline: none without a replacement (:focus-visible).
  4. Click targets ≥ 24×24px; color is never the only signal.
  5. State changes announce themselves: errors, async results, route changes (live regions / focus moves).

SPA-specific traps (Vue)

| Trap | Fix | |------|-----| | Route change is silent to screen readers | Announce + move focus — [focus-management](references/focus-management.md) | | Modal via Teleport, focus escapes behind it | Focus trap + inert/aria-modal — [focus-management](references/focus-management.md) | | v-if swaps content without announcement | aria-live region or focus the new content | | Custom ` dropdown/tab/menu widgets | Use the ARIA pattern — [aria-components](references/aria-components.md) | | Validation errors only shown as red text | aria-describedby + aria-invalid wiring — see vue-forms` skill + [aria-components](references/aria-components.md) |

Reference Map

| Topic | Description | Path | |------|-------------|------| | ARIA components | Modal, tabs, menu, combobox, disclosure, toast patterns in Vue | [aria-components](references/aria-components.md) | | Focus management | Teleport modals, focus traps, route announcements, skip links | [focus-management](references/focus-management.md) | | Testing | vitest-axe, Playwright audits, eslint-plugin-vuejs-accessibility | [testing-a11y](references/testing-a11y.md) |

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

Install and usage instructions live in the source repository linked above.

Reviews

No reviews yet — be the first.

Write a review

Versions

  • v0.1.0 Imported from the upstream source.

More in Search