skills.rest
seanchiuai
seanchiuaiCOMMUNITY
Explore all skills by this author →
𝕏@seanchiuaiGitHub

ui-components

Create Vue 3 component libraries with Tailwind styling and Reka UI primitives.

14|2|Updated Mar 13, 2026
Search Tags:#accessibility#vue#tailwind#design-system#nuxt#component-library#reka-ui
One-click install
npx skills add https://github.com/seanchiuai/openclaude --skill ui-components-seanchiuai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-components
Source: https://github.com/seanchiuai/openclaude/tree/main/.claude/skills/ui-components
Command: npx skills add https://github.com/seanchiuai/openclaude --skill ui-components-seanchiuai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent UI components across projects slow development and degrade user experience; this Skill provides a centralized Vue 3 component library aligned with a shared design system to ensure consistent visuals, behavior, and accessibility.

Core Features & Use Cases

  • Vue 3 + Nuxt 3 components wrapper around Reka UI primitives with Tailwind styling and a minimalist design system.
  • Design system conventions, CVA variant patterns, and accessible components to streamline UI development and theming.
  • Use cases include building new views, updating existing components, and maintaining visual consistency across large-scale Vue applications.

Quick Start

Install the repository and start using the UI components by importing them from the common barrel and composing your UI with the design system.

Frequently Asked Questions about ui-components

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

FAQPage Schema
How do I build a Vue 3 component library with a consistent design system?▼

You can build a Vue 3 component library by wrapping Reka UI primitives with Tailwind styling and CVA variant patterns to ensure consistent visuals, behavior, and accessibility across Nuxt 3 apps.

What's the best way to enforce accessibility in a Nuxt 3 Tailwind component library?▼

Enforce accessibility in a Nuxt 3 Tailwind component library by building components on Reka UI primitives, which provide accessible behaviors and structure aligned with design system conventions.

Can I use Reka UI primitives with Tailwind CSS for Vue 3 theming?▼

Yes, you can use Reka UI primitives with Tailwind CSS to implement theming in Vue 3 by applying CVA variant patterns and design system conventions for scalable consumption.

Does this Vue 3 design system approach require YAML frontmatter?▼

Yes, this Vue 3 design system approach requires a YAML frontmatter entry to enforce clear documentation and enable safe, scalable consumption across Nuxt 3 applications.

How do I manage component variants and structure in a large-scale Vue application?▼

Manage component variants and structure in large-scale Vue applications by using CVA variant patterns and centralized design system conventions to maintain visual and behavioral consistency.

Related Skills

Explore More Software Engineering Skills→
ps-carvalhops-carvalho

spavn-ui

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

Community
Advanced
AdrianAVA9AdrianAVA9

vue-view-generator

Guide Vue developers in implementing UI views with consistent layouts and shared components.

Community
Advanced
harryy2510harryy2510

ui

Set up Tailwind v4, shadcn/ui, and base-ui primitives with CSS variable theming.

Community
Advanced
cpvasquescpvasques
4

ui-components

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

Community
Intermediate