skills.rest
ps-carvalho
ps-carvalhoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

spavn-ui

Provide a Vue 3 component library with over 50 accessible components and MCP tooling.

Updated Mar 12, 2026
Search Tags:#accessibility#design system#tailwind css#ui components#mcp server#vue 3
One-click install
npx skills add https://github.com/ps-carvalho/spavn-agents --skill spavn-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spavn-ui
Source: https://github.com/ps-carvalho/spavn-agents/tree/main/.opencode/skills/spavn-ui
Command: npx skills add https://github.com/ps-carvalho/spavn-agents --skill spavn-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive Vue 3 component library and design system, enabling developers to build polished, accessible, and consistent user interfaces efficiently.

Core Features & Use Cases

  • Vue 3 Component Library: Offers over 50 pre-built, accessible Vue 3 components.
  • Design System: Enforces a unified design language with a 6-level elevation system and customizable design tokens.
  • AI Integration: Includes an MCP server for AI-assisted code generation, theme customization, and component usage validation.
  • Use Case: Quickly scaffold a new feature in a Vue 3 application by using spavn-ui's Card, Button, and Input components, ensuring design consistency and accessibility from the start.

Quick Start

Use the spavn-ui skill to add the 'button' component to your project.

Frequently Asked Questions about spavn-ui

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

FAQPage Schema
How do I build accessible Vue 3 UI components with Tailwind CSS?▼

Build accessible Vue 3 UI components using Tailwind CSS by leveraging pre-built primitives like Radix Vue, CSS custom properties for theming, and a 6-level elevation system to ensure design consistency across your application.

What is an MCP server for AI-assisted UI component generation?▼

An MCP server for AI-assisted UI component generation provides tooling that integrates with AI models to generate Vue 3 code, validate component usage, and customize design themes automatically.

Does this Vue 3 design system support CSS custom properties for theming?▼

Yes, the Vue 3 design system supports CSS custom properties for theming, allowing developers to define customizable design tokens and enforce a unified design language across applications.

How do I add a button component to a Vue 3 application using a design system?▼

Add a button component to a Vue 3 application by utilizing the design system's pre-built library, which offers over 50 accessible components including Card, Button, and Input for rapid UI development.

Can I use Radix Vue primitives with Tailwind CSS in a Vue 3 component library?▼

Yes, you can use Radix Vue primitives with Tailwind CSS in this Vue 3 component library, combining accessible foundational elements with utility-first styling and design tokens for consistent user interfaces.

How many accessible Vue 3 components are included in a standard design system?▼

This Vue 3 design system includes over 50 accessible pre-built components, providing a comprehensive library to quickly scaffold features like Cards, Buttons, and Inputs while ensuring accessibility from the start.

Related Skills

Explore More Software Engineering Skills→
FortiumPartnersFortiumPartners

styling-with-tailwind

Apply Tailwind CSS 3.x utility classes for responsive UI styling and theme configuration.

Official
Intermediate
coco-researchcoco-research
264

frontend-design

Design distinctive frontend interfaces with HTML, CSS, JavaScript, React, or Vue.

Community
Advanced
locnbk2002locnbk2002
1

ui-styling

Style React interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
civictechdccivictechdc
1

web-component-design

Design reusable UI components across React, Vue, and Svelte.

Official
Advanced