skills.rest
hidonguyen
hidonguyenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ck:ui-styling

Generate shadcn/ui component libraries with Tailwind CSS themes.

Updated Apr 2, 2026
Search Tags:#theming#accessibility#react#tailwind#design-system#shadcn#ui-styling
One-click install
npx skills add https://github.com/hidonguyen/trade-ops --skill ck-ui-styling-hidonguyen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:ui-styling
Source: https://github.com/hidonguyen/trade-ops/tree/main/.opencode/skills/ui-styling
Command: npx skills add https://github.com/hidonguyen/trade-ops --skill ck-ui-styling-hidonguyen

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Many projects struggle to build accessible, themeable, and consistent UI components quickly; this Skill removes friction by combining shadcn/ui, Radix primitives, and Tailwind CSS patterns so teams can ship polished interfaces faster.

Core Features & Use Cases

  • Accessible component library: ready-made Radix-based components (dialogs, forms, tables, toasts) with best-practice ARIA and keyboard handling.
  • Theming & dark mode: CSS-variable driven themes, next-themes integration, and Tailwind mappings for runtime theme switching.
  • Automation & config: helper scripts to add shadcn components and generate tailwind.config (shadcn_add.py, tailwind_config_gen.py) to speed project setup.
  • Use Case: Build a multi-theme Next.js dashboard with accessible forms, responsive layouts, and an opinionated design system that can be bootstrapped in minutes.

Quick Start

Initialize the shadcn UI and Tailwind setup with the shadcn CLI in your project, then run the included installer script to add components and generate a Tailwind config.

Frequently Asked Questions about ck:ui-styling

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

FAQPage Schema
How do I build accessible React components with Tailwind CSS and shadcn/ui?▼

To build accessible React components with Tailwind CSS and shadcn/ui, use Radix-based primitives that provide best-practice ARIA support and keyboard handling. This approach allows you to ship polished, themeable interfaces quickly without struggling with manual accessibility implementations.

What is the best way to set up a multi-theme dark mode dashboard in Next.js?▼

Setting up a multi-theme dark mode dashboard in Next.js is best achieved using CSS-variable driven themes and next-themes integration. This configuration enables runtime theme switching and generates Tailwind mappings for an opinionated, responsive design system.

Can I use shadcn/ui components with Vite, Remix, or Astro?▼

Yes, you can use shadcn/ui components with Vite, Remix, and Astro. The styling process applies to these React-based frameworks by utilizing the shadcn CLI and Tailwind CSS configuration to generate responsive layouts and component libraries.

How do I generate a Tailwind config and add shadcn components automatically?▼

You can generate a Tailwind config and add shadcn components automatically by running helper scripts like shadcn_add.py and tailwind_config_gen.py. These scripts speed up project setup by initializing the UI and outputting the required configuration files.

Do I need Node.js and the shadcn CLI to style UIs with Tailwind CSS?▼

Yes, you need Node.js and the shadcn CLI to style UIs with Tailwind CSS using this method. The CLI initializes the shadcn UI setup and generates component files, while Node.js runs the helper scripts to automate the Tailwind configuration process.

Related Skills

Explore More Design & Creative Skills→
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate
JordiNodeJSJordiNodeJS

component-development

Create accessible React 19 UI components with Shadcn UI and Tailwind CSS 4.

Community
Intermediate
hamzashakoor119hamzashakoor119

Theme Customizer - Docusaurus Styling Skill

Customize Docusaurus themes by editing CSS and theme configuration.

Community
Intermediate
MajesteitBartMajesteitBart
2

shadcn-ui-expert

Build accessible React UI components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate