skills.rest
jc180105
jc180105COMMUNITY
Explore all skills by this author →
GitHub

ckm:ui-styling

Apply shadcn/ui styling patterns with Radix primitives and Tailwind utilities.

Updated Apr 16, 2026
Search Tags:#accessibility#tailwind#tokens#shadcn-ui#responsive-design#design-systems#ui-styling
One-click install
npx skills add https://github.com/jc180105/.opencode --skill ckm-ui-styling-jc180105
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:ui-styling
Source: https://github.com/jc180105/.opencode/tree/main/.opencode/skills/design-ui-styling
Command: npx skills add https://github.com/jc180105/.opencode --skill ckm-ui-styling-jc180105

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Create beautiful, accessible user interfaces by combining shadcn/ui components (Radix UI primitives), Tailwind CSS utilities, and canvas-based visual design patterns to ensure consistency, accessibility, and rapid UI system development across projects.

Core Features & Use Cases

  • Accessible component library setup: dialogs, forms, tables, navigation, and patterns built on Radix primitives with Tailwind styling.
  • Design system enablement: tokens, theming, dark mode, and color palettes to maintain visual consistency across apps.
  • Rapid prototyping and theming: guidelines for responsive layouts, design tokens, and visual design workflows suitable for brand posters and UI systems.

Quick Start

Install shadcn/ui and Tailwind in your project, then initialize components and styling using the included patterns to begin building your UI.

Frequently Asked Questions about ckm:ui-styling

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

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

Build accessible UI components by combining shadcn/ui with Radix UI primitives and Tailwind utilities to ensure consistency. This approach provides pre-styled dialogs, forms, and tables with built-in accessibility support across React frameworks.

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

Yes, shadcn/ui works across React-based frameworks including Vite, Remix, and Astro. You can apply the styling patterns to implement dialogs, forms, tables, and theming consistently regardless of your specific React framework choice.

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

The best way to implement dark mode and design tokens is using shadcn/ui theming patterns combined with Tailwind CSS. This enables visual consistency through defined color palettes and tokens that can be toggled for dark mode across your application.

Can I use Radix primitives to create responsive navigation and table layouts?▼

Yes, you can use Radix primitives styled with Tailwind utilities to create responsive navigation and table layouts. The patterns support responsive design workflows suitable for rapid prototyping and building accessible data interfaces.

How do I install shadcn/ui to start building a design system?▼

Install shadcn/ui and Tailwind CSS in your project, then initialize the components and styling using the included patterns. This setup enables rapid UI system development with accessible dialogs, forms, and tables built on Radix primitives.

Related Skills

Explore More Design & Creative Skills→
luicabref97luicabref97

ckm:ui-styling

Generate accessible Tailwind-styled React UI components and responsive layouts.

Community
Intermediate
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
yashvinthanyashvinthan

ui-styling

Create user interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
HieubkavHieubkav

ui-styling

Create accessible UI styling with shadcn/ui and Tailwind CSS for React applications.

Community
Advanced