Please help me install this Agent Skill. Skill: ui-styling Source: https://github.com/hanthienduc/myprotocol-stack/tree/main/.claude/skills/ui-styling Command: npx skills add https://github.com/hanthienduc/myprotocol-stack --skill ui-styling-hanthienduc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Setting up and maintaining a consistent UI styling system, especially with modern tools like Tailwind CSS and shadcn/ui, can be intricate. This skill automates the generation of Tailwind configurations, simplifies the addition of UI components, and manages custom fonts, streamlining frontend development.

Core Features & Use Cases

Tailwind CSS Configuration Generation: Automatically generate or customize tailwind.config.js files, including responsive breakpoints, color palettes, and utility classes.
shadcn/ui Component Integration: Simplify the process of adding and configuring shadcn/ui components, ensuring accessibility and theming best practices.
Canvas Font Management: Access and manage a curated collection of canvas-ready fonts, enabling unique typographic designs.
Use Case: You're starting a new React project and want to use Tailwind CSS with shadcn/ui. Use this skill to generate a custom tailwind.config.js with your brand colors, then easily add a Button and DatePicker component from shadcn/ui, ensuring a consistent and accessible design from the start.

Quick Start

Generate a Tailwind CSS configuration file with a custom primary color palette and responsive breakpoints for mobile and tablet.