skills.rest
bbvch-ai
bbvch-aiOFFICIAL
Explore all skills by this author →
GitHub

design-system

Provide Vue.js, Tailwind CSS, and PrimeVue design tokens and component patterns.

9|2|Updated Nov 29, 2024
Search Tags:#design-system#dark-mode#component-patterns#ui-consistency#tailwind-css#primevue#swiss-ai-hub
One-click install
npx skills add https://github.com/bbvch-ai/aihub-core --skill design-system-bbvch-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/bbvch-ai/aihub-core/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/bbvch-ai/aihub-core --skill design-system-bbvch-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building frontend components for the Swiss AI Hub often leads to visual inconsistency, missing dark mode variants, and deviation from established patterns, wasting development time and creating a fragmented user experience.

Core Features & Use Cases

  • Authoritative Token Reference: Instant access to the official surface color scale, semantic severity colors, typography hierarchy, spacing values, border radius rules, and dark mode variants pulled directly from the production codebase.
  • Validated Component Patterns: Copy-paste ready Tailwind class examples for cards, dialogs, data tables, buttons, forms, panels, and dashboard widgets, all sourced from real, in-use components.
  • Visual Verification Workflow: Step-by-step Playwright guidance to screenshot and inspect rendered components to confirm correct token application and dark mode compatibility.
  • Use Case: When building a new agent management interface, use this Skill to pull the exact card layout, status tag severity mapping, and navigation sidebar styling to match the rest of the Swiss AI Hub platform.

Quick Start

Use the design-system skill to look up the correct Tailwind classes and dark mode variants for a new resource card component.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I ensure UI consistency when building new Vue.js components with Tailwind CSS?▼

To ensure UI consistency, use validated design tokens and Tailwind CSS class patterns extracted directly from the production codebase. This provides exact surface colors, typography, and spacing rules to prevent visual fragmentation in Vue.js components.

What is the best way to implement dark mode variants in a PrimeVue component?▼

The best way to implement dark mode variants is by applying official semantic severity colors and surface scale tokens. This provides exact dark mode styling mappings to ensure PrimeVue components match established visual standards across the application.

Can I use this design system skill for dashboard widgets and data tables?▼

Yes, you can use this design system skill for dashboard widgets and data tables. It supplies copy-paste ready Tailwind class examples and validated component patterns sourced directly from real, in-use cards, data tables, and dashboard widget implementations.

How do I visually verify that my Tailwind CSS classes match the design system?▼

To visually verify Tailwind CSS classes match the design system, follow step-by-step Playwright guidance to screenshot and inspect rendered components. This workflow confirms correct token application and validates dark mode compatibility during development.

Does this skill work without installing extra dependencies in my Vue.js project?▼

Yes, this skill works without installing extra dependencies. It operates by referencing existing production codebase tokens, semantic severity colors, and Tailwind CSS class patterns directly, providing styling guidance without requiring new component installations.

Related Skills

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

tailwind-patterns

Guide Tailwind CSS v4 architecture and responsive styling patterns.

Community
Intermediate
AO-Cyber-SystemsAO-Cyber-Systems

df:frontend-design

Build, review, and visually test Eden UI components with Playwright.

Official
Advanced
mklozmkloz

tailwind-design-system

Implement Tailwind CSS v4 design systems with design tokens and theming.

Community
Intermediate
habrahgithubhabrahgithub

tailwind-design-system

Create Tailwind CSS design tokens and component variants for consistent theming.

Community
Intermediate