Skills
.Work. You
Rest

ui-styling-assistant

Community

Token-driven CSS snippets for rapid styling.

Design & Creative#frontend#responsive#tailwind#dark-mode#design-tokens#css-tokens#ui-styling
Authormkatogui
Version1.0.0
Installs0

System Documentation

What problem does it solve?

A focused CSS/styling helper that delivers copy-paste snippets built on Universal Design System tokens. It always uses var() custom properties, includes dark mode variants, and showcases responsive breakpoints.

Core Features & Use Cases

  • Compact CSS recipes for common components (cards, buttons, inputs) using UD tokens
  • Framework-output ready: Tailwind classes, CSS Modules, and styled-components (all powered by tokens)
  • Quick-start guidance for immediate production-ready styles across themes and breakpoints

Quick Start

Ask the assistant to generate a ready-to-paste CSS snippet for a card using design tokens with dark mode and responsive breakpoints.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ui-styling-assistant
Download link: https://github.com/mkatogui/universal-design-system/archive/main.zip#ui-styling-assistant

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.