Name: design-system-export
Availability: InStock
Author: ricardocidale

System Documentation

What problem does it solve?

This Skill allows you to replicate the established Hospitality Business Group (HBG) design system in a new project, ensuring UI consistency across applications.

Core Features & Use Cases

UI Replication: Copy components, themes, icons, charts, and animations.
Dependency Management: Provides a comprehensive list of necessary npm packages.
Configuration Guidance: Offers instructions for Vite config and CSS theme setup.
Use Case: When starting a new Replit project that needs to visually align with the HBG portal, use this Skill to quickly import and configure the design system.

Quick Start

Copy the client/src/index.css file to your target project's root.

Dependency Matrix

Required Modules

reactreact-domwoutertailwindcsstw-animate-cssclass-variance-authoritytailwind-mergeclsx@radix-ui/react-dialog@radix-ui/react-dropdown-menu@radix-ui/react-popover@radix-ui/react-tooltip@radix-ui/react-tabs@radix-ui/react-select@radix-ui/react-checkbox@radix-ui/react-switch@radix-ui/react-label@radix-ui/react-separator@radix-ui/react-scroll-area@radix-ui/react-slot@radix-ui/react-avatar@radix-ui/react-accordion@radix-ui/react-progress@radix-ui/react-toggle@radix-ui/react-toggle-group@radix-ui/react-slider@radix-ui/react-radio-grouplucide-reactsonnercmdkvaulnext-themesrechartsmermaidframer-motion@tanstack/react-query@tanstack/react-tablezustandreact-hook-form@hookform/resolvers/zod@tailwindcss/vitetypescript@types/reactvite

Components

references

Please help me install this Skill: Name: design-system-export Download link: https://github.com/ricardocidale/hbg-screens/archive/main.zip#design-system-export Please download this .zip file, extract it, and install it in the .claude/skills/ directory.

design-system-export