skills.rest
Stonelukas
StonelukasCOMMUNITY
Explore all skills by this author →
GitHub

ui-styling

Standardize React UI styling with shadcn/ui, Radix primitives, and Tailwind CSS.

Updated Jun 16, 2025
Search Tags:#theming#accessibility#components#tailwind#shadcn-ui#design-systems#ui-styling
One-click install
npx skills add https://github.com/Stonelukas/Mouse-on-Numpad --skill ui-styling-stonelukas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-styling
Source: https://github.com/Stonelukas/Mouse-on-Numpad/tree/main/.opencode/skill/ui-styling
Command: npx skills add https://github.com/Stonelukas/Mouse-on-Numpad --skill ui-styling-stonelukas

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Style and standardize frontend UI development by providing a ready-to-use UI styling skill with shadcn/ui, Radix primitives, and Tailwind CSS.

Core Features & Use Cases

  • Accessible component patterns built on shadcn/ui and Radix UI primitives.
  • Theme customization and design token guidance for dark mode and responsive layouts.
  • References and scripts to automate UI scaffolding, configuration, and visual design system concepts.

Quick Start

Install and configure a UI styling setup for a React project using shadcn/ui and Tailwind.

Frequently Asked Questions about ui-styling

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize UI styling with Tailwind CSS and shadcn/ui in a React project?▼

Standardize UI styling by applying accessible component patterns, theming, and tooling packaged under a single skill unit. This skill provides ready-to-use configuration for React projects using shadcn/ui, Radix primitives, and Tailwind CSS across dark mode and responsive layouts.

Can I use this to add dark mode and responsive layouts to my design system?▼

Yes, you can implement dark mode and responsive layouts within your design system. The skill provides theme customization and design token guidance specifically for managing these visual states across accessible component patterns.

What is the best way to scaffold accessible components using Radix UI primitives?▼

The best way to scaffold accessible components is by using the included references and scripts. These automate UI scaffolding, configuration, and visual design system concepts built on top of shadcn/ui and Radix UI primitives.

Does this skill require specific dependencies to configure Tailwind CSS?▼

No specific external dependencies are required to configure Tailwind CSS. The skill operates independently, supplying the necessary scripts and references to set up and validate your UI styling environment without relying on external skill dependencies.

Are there limitations when applying design tokens across shadcn/ui components?▼

The skill avoids unsafe content and relies on deterministic scripts and references for design token application. It is limited to React-based projects utilizing shadcn/ui, Radix primitives, and Tailwind CSS, ensuring safe and standardized theming configurations.

Related Skills

Explore More Design & Creative Skills→
netprtonynetprtony

shadcn-ui

Automate shadcn/ui component setup and usage in React and Next.js projects.

Community
Advanced
skatedduskateddu
27

frontend-design

Generate frontend interfaces with HTML/CSS/JS for React, Vue, or plain websites.

Community
Advanced
obada-jarasobada-jaras

shadcn-ui

Provide reusable React UI components built with Tailwind CSS and Radix UI.

Community
Intermediate
guideopsguideops

ui-styling

Create and style user interfaces with shadcn/ui, Tailwind CSS, and canvas-based designs.

Community
Advanced