Ui component system

Skill nilsclabb/yellowpages/skills/yellowpages/ui-component-system

Design system conventions for the shared component library built on Radix UI headless primitives, Tailwind CSS v4, and class-variance-authority (CVA). Covers component patterns, semantic color tokens, dark mode, and the full component catalog. Use when: creating a new UI component, styling a page, adding variants to a component, working with the color system, implementing dark mode, choosing which component to use, or importing from the shared UI package.From its SKILL.md

Install

npx -y skills add nilsclabb/yellowpages --skill ui-component-system

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

1.7 KB, as published. Nobody here has run it

UI Component System

Conventions for the @workspace/ui shared component library. Every component uses Radix UI headless primitives, Tailwind CSS v4 utilities, and CVA for type-safe variants.

Core Rules

Use only @workspace/ui components — never install competing UI libraries
Every component gets variant + size props via CVA
Every component accepts className for composition
Use semantic color tokens — never raw hex/rgb in components
Dark mode must work — use CSS variables, not hardcoded colors

Quick Import

import { Button, Card, Select, Input } from "@workspace/ui"
import { cn } from "@workspace/ui/utils"
import "@workspace/ui/styles"  // CSS entry point (Tailwind vars + semantic colors)

Reference Map

When you need to...	Read
Write a component with CVA variants or use the `cn()` utility	references/component-patterns.md
Use color tokens, theming, or implement dark mode	references/color-system.md
Find the right component for a UI task	references/component-catalog.md