skills.rest
tonamson
tonamsonCOMMUNITY
Explore all skills by this author →
GitHub

ck:ui-styling

Combine shadcn/ui components, Radix primitives, and Tailwind utilities to style React UIs.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Style UIs quickly and consistently by combining pre-built shadcn/ui components, Radix primitives, and Tailwind utilities to enforce accessibility and design-system coherence.

Core Features & Use Cases

  • Accessible, composable UI components ready for React-based frameworks
  • Theming and design tokens for dark mode and responsive layouts
  • Rapid prototyping and iterative design using CLI-driven component installation

Quick Start

Install shadcn/ui and Tailwind, run the CLI to initialize the design system, and then add components to begin styling your UI.

Frequently Asked Questions about ck:ui-styling

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

FAQPage Schema
How do I style accessible React UIs quickly using shadcn and Tailwind?▼

Style accessible React UIs by combining pre-built shadcn/ui components, Radix primitives, and Tailwind utilities to enforce design-system coherence. This approach ensures accessibility while enabling rapid prototyping and iterative design across dashboards and apps.

What is the best way to set up theming and dark mode in a React design system?▼

Set up theming and dark mode by applying design tokens and Tailwind utilities within your React project. Using shadcn/ui components ensures consistent responsive layouts and coherent visual styling across your application.

How do I install and add shadcn/ui components using the CLI?▼

Install shadcn/ui and Tailwind, then run the CLI to initialize the design system. After initialization, you can use the CLI to add accessible, composable UI components and begin styling your interface immediately.

Does this UI styling approach work for rapid prototyping in React-based projects?▼

Yes, this UI styling approach works for rapid prototyping in React-based projects. It leverages pre-built shadcn/ui components and Tailwind utilities to quickly build accessible, composable interfaces for iterative design workflows.

Can I use Tailwind utilities to enforce accessibility and design-system coherence?▼

Yes, you can use Tailwind utilities alongside Radix primitives and shadcn/ui components to strictly enforce accessibility and design-system coherence. This combination ensures your UIs remain consistent and accessible across various dashboards and apps.

Related Skills

Explore More Software Engineering Skills→
carlos3gcarlos3g
2

expo-tailwind-setup

Automates Tailwind CSS v4 setup in Expo with react-native-css and NativeWind v5 for iOS, Android, Web.

Community
Intermediate
fusenginefusengine
1

nextjs-shadcn

Builds accessible UI components for Next.js App Router using shadcn/ui, Radix UI, and Tailwind CSS.

Community
Advanced
MajesteitBartMajesteitBart
2

shadcn-ui-expert

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

Community
Intermediate
kraftvaerkkraftvaerk

umbraco-search-result-item

Generate custom search result item components for the Umbraco backoffice.

Official
Intermediate