skills.rest
verivend
verivendOFFICIAL
Explore all skills by this author →
Website𝕏@verivendGitHub

design-system

Document design tokens and shadcn-vue component mappings for Tailwind CSS.

Updated Mar 10, 2026
Search Tags:#design system#design tokens#tailwind css#ui components#shadcn-vue#vue 3
One-click install
npx skills add https://github.com/verivend/verivend-vue3-template --skill design-system-verivend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/verivend/verivend-vue3-template/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/verivend/verivend-vue3-template --skill design-system-verivend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a centralized reference for all design tokens, component mappings, and best practices, ensuring consistency and efficiency in UI development.

Core Features & Use Cases

  • Token Reference: Access color palettes, typography scales, radius values, and shadows.
  • Component Mapping: Understand how UI elements map to shadcn-vue components and their usage.
  • Responsive Design: Implement layouts using defined breakpoints and patterns.
  • Use Case: When designing a new feature, quickly look up the correct Tailwind classes for brand colors and find the appropriate shadcn-vue component for a data table.

Quick Start

Show me the Tailwind classes for the primary brand color.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I map design tokens to shadcn-vue components in Vue 3?▼

Mapping design tokens to shadcn-vue components involves using this reference to link color palettes, typography scales, and radius values directly to their corresponding UI elements in Vue 3. It provides component mappings to ensure consistent styling.

What Tailwind CSS classes should I use for responsive design breakpoints and dark mode?▼

For responsive design and dark mode, use defined Tailwind CSS breakpoints and patterns specified in the design system reference. It details responsive layouts and dark mode implementation to maintain visual consistency across different screen sizes.

How do I find the correct UI components and Tailwind classes for a new feature?▼

Finding the correct UI components and Tailwind classes requires checking the central reference for brand color mappings and shadcn-vue elements. You can quickly look up tokens for data tables and other features to ensure UI consistency.

Can I use this design system reference to standardize color palettes and typography scales?▼

Yes, you can use this design system reference to standardize color palettes and typography scales. It provides comprehensive documentation on design tokens, including shadows and radius values, to facilitate consistent UI development.

Related Skills

Explore More Design & Creative Skills→
ag47-ptag47-pt
1

tailwind-patterns

Guide Tailwind CSS v4 architecture and responsive styling patterns.

Community
Intermediate
yashvinthanyashvinthan

ui-styling

Create user interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
shelbeelyshelbeely
4

m3-web-tailwind

Map Material Design 3 tokens into Tailwind CSS theme configuration.

Community
Intermediate
s0lci700s0lci700
1

svelte-native

Convert bits-ui or shadcn-svelte components into native Svelte 5 with CSS and design tokens.

Community
Advanced