skills.rest
caraya
carayaCOMMUNITY
Explore all skills by this author →
Website𝕏@elrond25GitHub

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
One-click install
npx skills add https://github.com/caraya/agent-skills --skill vue-ui
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
dang0705dang0705

vue

Document Vue 3 Composition API, script setup macros, reactivity, and built-in components.

Community
Intermediate
leboncoinleboncoin
92

check-accessibility

Automate WCAG 2.1 AA accessibility testing of Spark UI components with Playwright.

Official
Intermediate
olehsvyrydovolehsvyrydov
13

vue-developer

Generate Vue 3 development plans with Composition API, Pinia, and Nuxt 3 SSR.

Community
Intermediate
wjyugutouwjyugutou

vue-best-practices

Standardize Vue 3 development with Composition API and TypeScript patterns.

Community
Advanced