skills.rest
Grupo-6-ADS-B
Grupo-6-ADS-BOFFICIAL
Explore all skills by this author →
GitHub

ckm:ui-styling

Build accessible React interfaces with shadcn/ui components and Tailwind CSS utilities.

2|Updated Aug 15, 2025
Search Tags:#accessibility#react#responsive design#shadcn/ui#tailwind css#ui components#dark mode
One-click install
npx skills add https://github.com/Grupo-6-ADS-B/FittNutri --skill ckm-ui-styling-grupo-6-ads-b
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:ui-styling
Source: https://github.com/Grupo-6-ADS-B/FittNutri/tree/main/.claude/skills/ui-styling
Command: npx skills add https://github.com/Grupo-6-ADS-B/FittNutri --skill ckm-ui-styling-grupo-6-ads-b

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 from scratch requires deep knowledge of ARIA patterns, responsive design, and design tokens. This Skill provides structured guidance for composing production UIs with shadcn/ui (Radix UI primitives) and Tailwind CSS, eliminating guesswork around component installation, theming, dark mode, and responsive layouts. ## Core Features & Use Cases - Component Library Guidance: Covers the full shadcn/ui catalog including forms with react-hook-form and zod validation, dialogs, data tables, navigation, and feedback components. - Tailwind Styling System: References for utility classes, mobile-first responsive breakpoints, dark mode with CSS variables, and custom theme configuration via the @theme directive. - Automation Scripts: Includes Python scripts to install shadcn/ui components with dependency handling and generate tailwind.config.js files with custom colors and fonts. - Use Case: When building a dashboard in a Vite + React project, use this Skill to scaffold Cards, Buttons, and Forms with proper dark mode variants and responsive grid layouts. ## Quick Start Ask the AI to build a responsive login form with shadcn/ui components, Tailwind styling, and dark mode support.

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

Run npx shadcn@latest init to configure your framework, TypeScript, and theme, then add components with npx shadcn@latest add button card dialog. Components are copied into your codebase rather than installed as a dependency.

How do I add dark mode with Tailwind CSS and shadcn/ui?▼

Dark mode uses CSS variables defined in your theme configuration, toggled with a class strategy via next-themes. Apply dark: variants to themed elements, such as bg-white dark:bg-gray-900, for consistent appearance.

Does shadcn/ui work with Vite or only Next.js?▼

shadcn/ui works with Vite, Next.js, Remix, and Astro. For Vite, install tailwindcss and @tailwindcss/vite, add the plugin to vite.config.ts, and import Tailwind in your CSS entry file.

How do I build a validated form with shadcn/ui?▼

Combine the Form component with react-hook-form and zodResolver for schema validation. Define a zod schema, pass it to useForm, and wire FormField, FormItem, FormLabel, FormControl, and FormMessage for accessible error display.

Are shadcn/ui components accessible for screen readers?▼

Yes, shadcn/ui components are built on Radix UI primitives which implement ARIA patterns, keyboard navigation, and focus management out of the box. The skill's accessibility reference covers focus states and screen reader announcements.

What are the limitations of utility-first Tailwind styling?▼

Utility classes can make markup verbose for highly repeated patterns, and dynamic class names break Tailwind's build-time purging. Extract repeated patterns into components and avoid constructing class names at runtime.

Related Skills

Explore More Design & Creative Skills→
chicanoandres702chicanoandres702

javascript-typescript-typescript-scaffold

Generate TypeScript project scaffolds for Next.js, React + Vite, Node.js APIs, and libraries.

Community
Advanced
HouseGarofaloHouseGarofalo
3

azure-static-web-apps

Deploy and manage static web apps on Azure Static Web Apps.

Official
Intermediate
soofi-xyzsoofi-xyz
2

responsive-design-tests

Run Playwright-based tests to verify UI layout across device sizes.

Official
Intermediate
google-labs-codegoogle-labs-code
8.2k

shadcn-ui

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

Official
Advanced