skills.rest
dthuy62
dthuy62COMMUNITY
Explore all skills by this author →
GitHub

ck:ui-styling

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

Updated May 10, 2026
Search Tags:#accessibility#responsive design#design system#shadcn/ui#tailwind css#dark mode#ui styling
One-click install
npx skills add https://github.com/dthuy62/kollet-app --skill ck-ui-styling-dthuy62
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:ui-styling
Source: https://github.com/dthuy62/kollet-app/tree/main/.opencode/skills/ui-styling
Command: npx skills add https://github.com/dthuy62/kollet-app --skill ck-ui-styling-dthuy62

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

It removes the friction of designing, composing, and consistently styling modern user interfaces by giving you a complete system for accessible components, theme control, responsive layouts, and polished visual patterns.

Core Features & Use Cases

  • Component-driven UI building: Compose interfaces with shadcn/ui primitives for buttons, cards, dialogs, forms, tables, menus, and other common app patterns.
  • Theme and style customization: Adapt colors, dark mode, CSS variables, spacing, typography, and component variants to match a product’s design system.
  • Responsive and accessible layouts: Build mobile-first interfaces that respect keyboard navigation, screen readers, focus states, and contrast requirements.
  • Use case: Turn a rough product screen or dashboard idea into a production-ready layout with consistent spacing, accessible controls, and responsive behavior.

Quick Start

Ask the AI to style your React screen with shadcn/ui components, Tailwind utility classes, accessible interactions, responsive behavior, and a cohesive theme.

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?▼

Build accessible React components by composing shadcn/ui primitives and applying Tailwind utility classes. This approach ensures responsive layouts, proper keyboard navigation, and screen reader support for forms, dialogs, and navigation patterns.

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

Implement dark mode and theme customization by adapting CSS variables, colors, spacing, and typography with Tailwind CSS. This allows you to match component variants to your product's design system requirements quickly.

Can I use shadcn/ui to create responsive and accessible layouts for mobile-first interfaces?▼

Yes, shadcn/ui combined with Radix accessibility practices creates responsive mobile-first interfaces. It respects focus states, contrast requirements, and screen reader behaviors for common application patterns.

How do I structure a production-ready dashboard with consistent spacing and accessible controls?▼

Structure a production-ready dashboard by composing shadcn/ui components like cards, tables, and menus with Tailwind utility conventions. This provides consistent spacing, accessible controls, and responsive behavior across the interface.

Does styling forms and dialogs with Tailwind CSS require Radix UI accessibility patterns?▼

Yes, styling forms and dialogs with shadcn/ui relies on Radix UI accessibility patterns. This ensures proper keyboard navigation, focus management, and screen reader compatibility for complex interactive components.

Why does my Tailwind CSS theme customization break when modifying shadcn/ui component variants?▼

Tailwind CSS theme customization breaks when shadcn/ui component variants conflict with global CSS variables. Maintain a cohesive design system by adapting colors, spacing, and typography consistently across all component primitives.

Related Skills

Explore More Software Engineering Skills→
snake-dev-teamsnake-dev-team

ck:ui-styling

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

Official
Intermediate
MinhAnh-CorpMinhAnh-Corp

frontend-design

Generates frontend interfaces with production-ready code from user requirements.

Official
Advanced
shishiv30shishiv30

import-comp-cms

Synchronize component data between local JavaScript files and a CMS database.

Community
Intermediate
lengo0951lengo0951

ui-styling

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

Community
Advanced