Does this skill support Tailwind CSS?

Yes, the UI Styling Assistant can output styles as standard CSS, Tailwind utility classes, CSS Modules, or styled-components.

Does it handle responsive design automatically?

Yes, it provides pre-configured responsive breakpoints and media query patterns for grids, containers, and typography.

Can I use hardcoded values with this skill?

No, the skill enforces a strict rule to never output hardcoded values, ensuring your codebase remains maintainable via CSS custom properties.

What design system does this skill use?

It uses the Universal Design System (v0.4.0), which features 9 palettes, 600 tokens, and is optimized for AI-native reasoning.

Are the styles generated by this skill accessible?

Absolutely. All tokens and components are validated against WCAG 2.1 AA standards for color contrast and usability.

UI Styling Assistant

Name: UI Styling Assistant
Author: mkatogui

bymkatogui

•

Design Tools

Generates production-grade CSS and frontend styles using standardized Universal Design System tokens and accessible patterns.

The UI Styling Assistant is a specialized Claude Code skill designed to streamline frontend development by enforcing a token-driven architecture. It eliminates hardcoded values by strictly utilizing the Universal Design System's W3C DTCG-compliant tokens for colors, spacing, radius, and motion. Ideal for developers building modern, accessible interfaces, this skill provides instant, copy-paste snippets for CSS, Tailwind, and various component frameworks, ensuring all outputs include dark mode variants, responsive breakpoints, and WCAG 2.1 AA validated accessibility.

Key Features

011 GitHub stars

02Advanced UI recipes including glassmorphism, scroll reveals, and high-performance animations

03Strict enforcement of design system variables to prevent technical debt from hardcoded values

04Token-driven styling using W3C Design Token Community Group (DTCG) standards

05Automatic dark mode variants and responsive breakpoint logic for all snippets

06Multi-framework support for Tailwind CSS, CSS Modules, and styled-components

Use Cases

01Rapidly prototyping accessible UI components like cards, buttons, and form inputs with consistent spacing

02Converting legacy hardcoded CSS into a scalable, token-based design system architecture

03Implementing complex visual effects and responsive grids without manually calculating breakpoints or color mixes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mkatogui/universal-design-system ui-styling

For use in Claude.ai and ChatGPT

Key Features

011 GitHub stars

02Advanced UI recipes including glassmorphism, scroll reveals, and high-performance animations

03Strict enforcement of design system variables to prevent technical debt from hardcoded values

04Token-driven styling using W3C Design Token Community Group (DTCG) standards

05Automatic dark mode variants and responsive breakpoint logic for all snippets

06Multi-framework support for Tailwind CSS, CSS Modules, and styled-components

Use Cases

01Rapidly prototyping accessible UI components like cards, buttons, and form inputs with consistent spacing

02Converting legacy hardcoded CSS into a scalable, token-based design system architecture

03Implementing complex visual effects and responsive grids without manually calculating breakpoints or color mixes