skills.rest
FacundoSu1986
FacundoSu1986COMMUNITY
Explore all skills by this author →
GitHub

ckm:ui-styling

Build React UIs with shadcn/ui, Radix UI, and Tailwind theming.

1|Updated Mar 30, 2026
Search Tags:#ui#accessibility#tailwind#shadcn-ui#dark-mode#design-systems
One-click install
npx skills add https://github.com/FacundoSu1986/Sky-Claw --skill ckm-ui-styling-facundosu1986
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:ui-styling
Source: https://github.com/FacundoSu1986/Sky-Claw/tree/main/.agents/skills/ui-styling
Command: npx skills add https://github.com/FacundoSu1986/Sky-Claw --skill ckm-ui-styling-facundosu1986

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Building consistent, accessible user interfaces across projects is time-consuming and error-prone without a cohesive design system and tooling.

Core Features & Use Cases

  • Pre-built accessible components using shadcn/ui built on Radix UI primitives, paired with Tailwind utility classes for rapid UI assembly.
  • Design tokens and theming support to implement dark mode and consistent branding across apps.
  • Use cases include rapidly prototyping dashboards, forms, and design system documentation with a canvas-based design language.

Quick Start

Initialize a new UI styling project by configuring shadcn/ui with Tailwind and your design tokens.

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 React UIs using Tailwind and shadcn/ui?▼

Set up dark mode by configuring design tokens and theming variables within Tailwind. The skill provides support for design tokens and theming to implement dark mode and consistent branding across React applications using shadcn/ui.

What's the best way to create a consistent design system for a React dashboard?▼

Initialize a new UI styling project by configuring shadcn/ui with Tailwind and your design tokens. This setup provides pre-built accessible components and theming support to rapidly prototype dashboards, forms, and design system documentation.

Do I need external runtime dependencies to use Radix UI primitives with Tailwind?▼

No external runtime dependencies beyond standard tooling are required to use this skill. It validates integration points for scripts and references to support reproducible setups when building accessible UIs with shadcn/ui and Tailwind.

Can I use shadcn/ui components for forms and design system documentation?▼

Yes, shadcn/ui components are applicable for rapidly prototyping forms and design system documentation. The skill covers React-based UI styling with these components, paired with Tailwind utility classes for rapid UI assembly.

Related Skills

Explore More Design & Creative Skills→
ChenYCLChenYCL

web-artifacts-builder

Generate HTML artifacts with React, Tailwind CSS, and shadcn/ui components.

Community
Intermediate
lilbom32lilbom32

design-system-management

Coordinate design tokens, component libraries, and patterns across product teams.

Community
Advanced
MolcajeteAIMolcajeteAI
2

radix-ui-patterns

Generate accessible Radix UI component patterns with TypeScript examples.

Official
Intermediate
s0lci700s0lci700
1

svelte-native

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

Community
Advanced