ui-components

Provide ready-to-use Vue 3 UI components with shadcn-vue and Reka UI primitives.

4|Updated Nov 17, 2023
One-click install
npx skills add https://github.com/cpvasques/vue-template --skill ui-components-cpvasques
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-components
Source: https://github.com/cpvasques/vue-template/tree/main/.cursor/skills/ui-components
Command: npx skills add https://github.com/cpvasques/vue-template --skill ui-components-cpvasques

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The UI components guide provides a centralized, consistent set of Vue 3 building blocks based on shadcn-vue and Reka UI, reducing duplication and visual drift across projects.

Core Features & Use Cases

  • Ready-to-use components wired for accessibility and Tailwind CSS integration.
  • Standardized import paths and patterns for common UI elements like Button, Input, Form, and Dialog.
  • Use cases include building forms, dialogs, modals, cards, and layouts with a cohesive design system.

Quick Start

Install and begin using the shared UI components to build consistent Vue 3 interfaces.

Frequently Asked Questions about ui-components

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 by applying standardized building blocks based on shadcn-vue and Reka UI. This approach enforces Tailwind-based styling and accessibility best practices to ensure consistent visuals across forms, dialogs, and layouts.

What's the best way to standardize shadcn-vue imports across multiple projects?

Standardize shadcn-vue imports by using a centralized set of unified Vue 3 components. This enforces standard import paths and patterns for common elements like Button, Input, and Dialog to prevent duplication and visual drift.

Do I need Reka UI to build accessible forms in Vue 3?

You need Reka UI primitives to provide the foundational accessibility features for Vue 3 forms. The components wire these primitives with Tailwind CSS to deliver ready-to-use, accessible form building blocks.

Can I use this for generating cohesive Vue 3 dialogs and modals?

Yes, you can generate cohesive Vue 3 dialogs and modals. The components provide ready-to-use building blocks that ensure consistent visual design and accessibility across your application's interactive overlays.

Why does my Vue 3 UI component library have visual drift between projects?

Vue 3 UI component libraries experience visual drift due to duplicated styling and unstandardized imports. Using a centralized set of shadcn-vue based components enforces consistent Tailwind styling and import patterns to eliminate this issue.

How to create a consistent design system for Vue 3 applications?

Create a consistent Vue 3 design system by utilizing unified components built on Reka UI and shadcn-vue. This provides standardized Tailwind-based styling and accessibility practices for forms, cards, and layouts across all projects.