Which frameworks are compatible with this skill?

This skill is optimized for React-based frameworks including Next.js, Vite, Remix, and Astro, focusing on shadcn/ui and Tailwind CSS integrations.

Does it support custom design tokens?

Absolutely. It provides guidance and automation for extending Tailwind's theme configuration with custom colors, typography, and spacing scales.

Can I use this for dark mode implementation?

Yes, the skill includes patterns for next-themes integration and Tailwind dark mode variants to provide a consistent themed experience.

How does the skill handle web accessibility?

It utilizes Radix UI primitives and strictly follows WAI-ARIA patterns to ensure all components support keyboard navigation and screen readers.

UI Styling & Design Systems

Name: UI Styling & Design Systems
Author: piotroq

bypiotroq

0•

设计工具

Architects professional, accessible, and responsive user interfaces using shadcn/ui, Tailwind CSS, and philosophy-driven design systems.

This skill provides Claude with advanced capabilities for building production-grade frontends by integrating shadcn/ui components, Radix UI accessibility primitives, and Tailwind CSS utility styling. It is designed for developers working with React-based frameworks who need to implement consistent design tokens, sophisticated dark mode themes, and mobile-first responsive layouts. Beyond standard UI components, it incorporates a canvas-based design philosophy for creating museum-quality visual compositions, ensuring that applications are both functionally accessible and aesthetically refined.

主要功能

01Utility-first styling for responsive, mobile-first web layouts

02Automated component installation and Tailwind configuration scripts

030 GitHub stars

04Rapid component deployment using shadcn/ui and Radix UI primitives

05Comprehensive dark mode and theme customization via CSS variables

06Implementation of accessible ARIA patterns for complex UI elements

使用场景

01Developing accessible forms and data-heavy dashboards with shadcn/ui

02Building a custom design system for Next.js or Vite applications

03Refactoring static HTML templates into modern, dynamic CSS-in-JS or utility-based styles

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add piotroq/adwokat-trzebnica-html-to-php-com ui-styling

For use in Claude.ai and ChatGPT

主要功能

01Utility-first styling for responsive, mobile-first web layouts

02Automated component installation and Tailwind configuration scripts

030 GitHub stars

04Rapid component deployment using shadcn/ui and Radix UI primitives

05Comprehensive dark mode and theme customization via CSS variables

06Implementation of accessible ARIA patterns for complex UI elements

使用场景

01Developing accessible forms and data-heavy dashboards with shadcn/ui

02Building a custom design system for Next.js or Vite applications

03Refactoring static HTML templates into modern, dynamic CSS-in-JS or utility-based styles

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add piotroq/adwokat-trzebnica-html-to-php-com ui-styling

For use in Claude.ai and ChatGPT