skills.rest
quanganh208
quanganh208COMMUNITY
Explore all skills by this author →
GitHub

ck:ui-styling

Style React UI components with shadcn/ui, Tailwind CSS, and design tokens.

1|Updated Mar 6, 2026
Search Tags:#theming#ui#accessibility#styling#tailwind#shadcn#radix
One-click install
npx skills add https://github.com/quanganh208/cookmate --skill ck-ui-styling-quanganh208
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:ui-styling
Source: https://github.com/quanganh208/cookmate/tree/main/.opencode/skills/ui-styling
Command: npx skills add https://github.com/quanganh208/cookmate --skill ck-ui-styling-quanganh208

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.

Core Features & Use Cases

  • Comprehensive component library integration: combines shadcn/ui primitives, Tailwind utilities, and a design system approach to deliver cohesive, accessible interfaces.
  • Theming and accessibility: supports dark mode, color tokens, tokenized design systems, and ARIA-compliant components for inclusive experiences.
  • Rapid prototyping and production-ready UI: enables fast iteration from concept to polished UI across Next.js, Vite, Remix, and Astro projects.

Quick Start

Get started by wiring shadcn/ui with Tailwind in a React project, then compose pages using the prebuilt components and theming utilities.

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 React UI components with shadcn/ui and Tailwind CSS?▼

You can style React components by wiring shadcn/ui with Tailwind CSS to compose pages using prebuilt components. This combines Radix UI primitives and Tailwind utilities to deliver cohesive, accessible interfaces with tokenized design systems.

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

Implement dark mode and theming by applying tokenized color systems and Tailwind utilities within your React components. This approach uses shadcn/ui theming capabilities to support responsive layouts and consistent color customization across your application.

Does shadcn/ui styling work with Vite, Remix, and Astro projects?▼

shadcn/ui styling works across Next.js, Vite, Remix, and Astro React projects. You can wire the shadcn/ui tooling with Tailwind in any of these environments to compose accessible interfaces from concept to production-ready UI.

How do I ensure UI components are accessible and ARIA-compliant when styling?▼

Ensure accessibility by using shadcn/ui components built on Radix UI primitives, which provide ARIA-compliant interactions out of the box. You apply Tailwind styling on top of these accessible foundations to maintain inclusive experiences.

Can I customize color tokens for a consistent design system across React apps?▼

You can customize color tokens to build a consistent design system across React apps. The styling process leverages tokenized design configurations within Tailwind and shadcn/ui to manage color schemes and themed interfaces effectively.

Related Skills

Explore More Design & Creative Skills→
AbdullahMalik17AbdullahMalik17
9

styling-with-shadcn

Set up shadcn/ui components, forms, and dark mode in Next.js projects.

Community
Intermediate
jasonmichaelbell78-creatorjasonmichaelbell78-creator

frontend-design

Generate production-grade frontend interfaces from design concepts.

Community
Advanced
dthuy62dthuy62

ck:ui-styling

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

Community
Advanced
s0lci700s0lci700
1

svelte-native

Convert bits-ui or shadcn-svelte components into native Svelte 5 with CSS and design tokens.

Community
Advanced