vue

Build token-driven Vue 3 components with the Composition API and TypeScript.

38|3|Updated Dec 29, 2025

Search Tags:#typescript #vue #nuxt #design-tokens #composition-api #component-patterns

Ready to run

npx skills add https://github.com/dylantarre/design-system-skills --skill vue-dylantarre

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vue
Source: https://github.com/dylantarre/design-system-skills/tree/main/skills/frameworks/vue
Command: npx skills add https://github.com/dylantarre/design-system-skills --skill vue-dylantarre

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building scalable Vue 3 UI components that consume design tokens and integrate token-driven styling across apps.

Core Features & Use Cases

Token-driven Vue 3 components using the Composition API and TypeScript, enabling consistent theming via design tokens.
A modular pattern library with primitives, composites, and layout components that consume tokens for color, typography, spacing, and state.
Use cases include creating a Vue component library, integrating tokens in Nuxt apps, and building accessible UI patterns with token-driven styling.

Quick Start

Install Vue 3 with TypeScript support, install the design system package, scaffold a new project, and begin importing and registering components (e.g., VButton, VInput, VStack) to render token-driven UI.

Frequently Asked Questions about vue

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

FAQPage Schema

How do I build Vue 3 components that consume design tokens?▼

Build token-driven Vue 3 components by using the Composition API with TypeScript, integrating styling via CSS variables or provide/inject to ensure consistent theming across your application.

What is the best way to create a Nuxt design system with TypeScript?▼

Create a Nuxt design system with TypeScript by scaffolding a modular pattern library using primitives, composites, and layout components that consume tokens for color, typography, spacing, and state.

Do I need the Composition API to build a token-driven Vue component library?▼

Yes, building a token-driven Vue component library requires Vue 3 with the Composition API and TypeScript to properly map design tokens to component styling and state.

Can I use CSS variables for design tokens in a Vue component library?▼

Yes, you can use CSS variables for design tokens in a Vue component library, or alternatively use provide/inject, to enable token-driven styling and consistent UI theming across your Vue 3 application.

How does token-driven styling work with Vue UI patterns?▼

Token-driven styling works with Vue UI patterns by mapping design tokens for color, typography, spacing, and state directly to component primitives, ensuring accessible and visually consistent UI rendering.