vue-ui

Guide Vue SFC and Composition API implementation with WCAG compliance checks.

1|Updated Mar 22, 2026

Search Tags:#ui #accessibility #vue #patterns #component #composition-api #sfc

Ready to run

npx skills add https://github.com/caraya/agent-skills --skill vue-ui

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vue-ui
Source: https://github.com/caraya/agent-skills/tree/main/skills/vue-ui
Command: npx skills add https://github.com/caraya/agent-skills --skill vue-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build production-quality Vue user interfaces that are accessible, performant, and visually polished.

Core Features & Use Cases

Vue-specific patterns: Single File Components, templates, directives, and the Composition API.
State management guidance: Pinia/Vuex integration and modular architecture.
Accessibility and quality gates: leverage the ui-accessibility skill for WCAG 2.1 AA checks during development, testing, and deployment.

Quick Start

Create a new Vue component following the Vue UI patterns and run accessibility checks with the ui-accessibility workflow.

Frequently Asked Questions about vue-ui

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

FAQPage Schema

How do I build accessible Vue components with the Composition API?▼

Build accessible Vue components by structuring Single File Components (SFCs) with the Composition API. This Skill enforces specific file structures and WCAG 2.1 AA compliance checks during development and testing to ensure UI quality.

What is the best way to manage state in a Vue user interface?▼

Manage state in a Vue user interface by integrating Pinia or Vuex within a modular component architecture. This Skill guides developers in establishing modular patterns to handle state management robustly.

How do I enforce WCAG 2.1 AA compliance in a Vue application?▼

Enforce WCAG 2.1 AA compliance in a Vue application by applying accessibility governance during development. This Skill specifies testing and verification requirements, leveraging the ui-accessibility workflow for checks during development and deployment.

Does this Vue UI pattern guidance work with Single File Components?▼

Yes, this Vue UI pattern guidance works directly with Single File Components (SFCs). It details SFC patterns, templates, and directives to guide developers in designing and implementing robust Vue user interfaces for modern projects.

When do I need specific file structures for Vue component architecture?▼

You need specific file structures for Vue component architecture when building production-grade user interfaces. This Skill specifies these structures and pattern enforcement requirements to ensure accessibility compliance and maintain UI quality at scale.