Builds accessible, responsive UIs with shadcn/ui (Radix + Tailwind), utility-first Tailwind styling, dark mode and theming, plus canvas-based visual design - including CLI scripts for component installation.
---
name: ui-styling
description: Create beautiful, accessible user interfaces with shadcn/ui (Radix UI + Tailwind), utility-first Tailwind CSS, and canvas-based visual designs. Use when building UIs, adding accessible components, customizing themes and dark mode, or establishing consistent styling.
---
# UI Styling
Combine shadcn/ui components, Tailwind utility styling, and canvas-based visual design into accessible, responsive interfaces.
## How to use
1. Initialize the stack: `npx shadcn@latest init` (configures shadcn/ui + Tailwind), then add components with `npx shadcn@latest add button card dialog form`.
2. Compose UIs from accessible Radix primitives and style them directly with Tailwind utility classes; extract components only for true repetition.
3. Implement dark mode and theme customization via CSS variables (next-themes) per the theming reference.
4. Follow accessibility patterns - keyboard navigation, focus management, ARIA, and form-validation feedback.
5. Build responsive, mobile-first layouts with the breakpoint system; use the canvas design system for posters/visual compositions.
6. Automate with helper scripts: `python scripts/shadcn_add.py ...` and `tailwind_config_gen.py`.
Full skill & source: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/5e2c0a2b5ec81bf5733ddcee2d7db4c34dc71aa3/.claude/skills/ui-styling