skills.rest
lukebaze
lukebazeCOMMUNITY
Explore all skills by this author →
𝕏@0xkerminiGitHub

ui-styling

Create accessible React UI component libraries with shadcn/ui and Tailwind CSS.

Updated Jan 20, 2026
Search Tags:#theming#react#design-system#shadcn-ui#ui-styling#tailwind-css
One-click install
npx skills add https://github.com/lukebaze/forex-rebate-bot --skill ui-styling-lukebaze
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-styling
Source: https://github.com/lukebaze/forex-rebate-bot/tree/main/.opencode/skill/ui-styling
Command: npx skills add https://github.com/lukebaze/forex-rebate-bot --skill ui-styling-lukebaze

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Style UIs with shadcn/ui components (Radix UI + Tailwind CSS). Use for accessible components, themes, dark mode, responsive layouts, design systems, color customization. Enable consistent UI outcomes across projects by leveraging a tokenized design approach and a canvas-driven visual system.

Core Features & Use Cases

  • Component Library: Pre-built, accessible components powered by Radix UI primitives.
  • Theming & Tokens: Centralized color tokens and CSS variables for dark mode and design system consistency.
  • Canvas Design System: Canvas-based visual language for communicating and implementing cohesive UI patterns.
  • Use Case: Rapidly prototype React interfaces for Next.js, Vite, Remix with a unified design system and theme customization.

Quick Start

Install shadcn/ui with Tailwind; configure your project and start adding components.

Frequently Asked Questions about ui-styling

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

FAQPage Schema
How do I set up a shadcn/ui component library with Tailwind CSS and theming?▼

Set up shadcn/ui with Tailwind CSS by installing the dependencies, configuring your project, and adding components. This provides pre-built accessible components powered by Radix UI primitives with centralized color tokens for dark mode.

Can I use shadcn/ui and Tailwind CSS theming in Next.js, Vite, or Remix?▼

Yes, shadcn/ui and Tailwind CSS theming target React-based projects, specifically supporting Next.js, Vite, and Remix to deliver consistent design tokens, dark mode, and responsive layouts across different frameworks.

What is a canvas-based design system for React UI components?▼

A canvas-based design system provides a visual language for communicating and implementing cohesive UI patterns. It combines tokenized design approaches with shadcn/ui to ensure visual consistency and accessible component implementation.

How do I implement dark mode and responsive layouts using Tailwind CSS tokens?▼

Implement dark mode using centralized CSS variables and color tokens configured within Tailwind CSS. This tokenized approach automatically handles responsive layouts and theme customization across your React application.

Does this approach require manually styling Radix UI primitives for accessibility?▼

No, shadcn/ui pre-builds accessible components using Radix UI primitives and Tailwind CSS. It provides end-to-end guidance for accessibility patterns, eliminating the need to manually style base primitives for keyboard and screen reader support.

Why use a tokenized design approach instead of hardcoding Tailwind CSS colors?▼

A tokenized design approach uses centralized CSS variables instead of hardcoded colors, ensuring design system consistency. It enables seamless dark mode transitions and consistent UI outcomes across multiple React projects.

Related Skills

Explore More Software Engineering Skills→
mikkelkrogsholmmikkelkrogsholm
5

shadcn-ui

Integrate copy-owned React components with Radix UI and Tailwind CSS.

Community
Intermediate
gileckgileck

shadcn-usage

Enforce shadcn/ui as the exclusive UI component library in Next.js and React projects.

Community
Basic
locnbk2002locnbk2002
1

ui-styling

Style React interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
Ben1821Ben1821

ui-styling

Automate UI component installation, styling, and theming with shadcn/ui and Tailwind CSS.

Community
Advanced