skills.rest
hontauadrian
hontauadrianCOMMUNITY
Explore all skills by this author →
GitHub

ckm:ui-styling

Build accessible UI components and responsive layouts with shadcn/ui and Tailwind CSS.

Updated Apr 7, 2026
Search Tags:#accessibility#react#responsive design#shadcn/ui#tailwind css#ui components#dark mode
One-click install
npx skills add https://github.com/hontauadrian/sfx-app-empty-test --skill ckm-ui-styling-hontauadrian
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:ui-styling
Source: https://github.com/hontauadrian/sfx-app-empty-test/tree/main/.overstory/claude-profiles/reviewer/skills/ui-styling
Command: npx skills add https://github.com/hontauadrian/sfx-app-empty-test --skill ckm-ui-styling-hontauadrian

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building consistent, accessible user interfaces requires coordinating component libraries, utility CSS, theming, and responsive design, which is time-consuming to set up and easy to get wrong. ## Core Features & Use Cases - Component Library Guidance: Covers shadcn/ui components (dialogs, forms, tables, navigation) built on Radix UI primitives with TypeScript support. - Tailwind CSS Styling: Provides utility-first styling patterns for layout, spacing, typography, responsive breakpoints, dark mode, and theme customization. - Automation Scripts: Includes Python scripts for installing shadcn/ui components and generating tailwind.config.js files with custom themes. - Use Case: When building a dashboard in Next.js, use this Skill to scaffold accessible cards, forms with validation, and a responsive grid layout with dark mode support. ## Quick Start Ask the AI to build a responsive login form with validation using shadcn/ui components and Tailwind CSS styling.

Frequently Asked Questions about ckm:ui-styling

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

FAQPage Schema
How do I install shadcn/ui components in a Next.js project?▼

Run npx shadcn@latest init to configure the project, then add components with npx shadcn@latest add button card dialog. The included shadcn_add.py script can also install multiple components with dependency handling.

How to implement dark mode with Tailwind CSS and shadcn/ui?▼

Use next-themes for theme switching combined with Tailwind's dark variant classes like dark:bg-gray-900. The theming reference covers CSS variable configuration and a theme toggle implementation.

Does shadcn/ui work with frameworks other than Next.js?▼

Yes, shadcn/ui supports Vite, Remix, and Astro in addition to Next.js. For Vite, install tailwindcss with the @tailwindcss/vite plugin and import Tailwind in your CSS entry file.

Are shadcn/ui components accessible for screen readers?▼

Yes, shadcn/ui components are built on Radix UI primitives which provide ARIA patterns, keyboard navigation, and focus management. The accessibility reference covers screen reader announcements and form validation accessibility.

How do I customize Tailwind theme colors and fonts?▼

Use the @theme directive or tailwind.config.js to define custom colors, fonts, and spacing. The tailwind_config_gen.py script generates a config file from arguments like --colors brand:blue --fonts display:Inter.

Related Skills

Explore More Software Engineering Skills→
getprobe-devgetprobe-dev
4

shadcn-ui

Install and customize React UI components via a CLI with Tailwind CSS and Radix UI.

Official
Advanced
abcnutsabcnuts
60

search-implementation

Set up hosted search backends and frontend components with typo tolerance.

Community
Intermediate
LambdaTestLambdaTest
350

playwright-skill

Generate Playwright E2E tests in TypeScript, JavaScript, Python, Java, or C#.

Official
Advanced
DagimAlemayehuuDagimAlemayehuu

shadcn-ui

Integrates and customizes shadcn/ui components in React applications with Tailwind CSS.

Community
Intermediate