skills.rest
luicabref97
luicabref97COMMUNITY
Explore all skills by this author →
GitHub

ckm:ui-styling

Generate accessible Tailwind-styled React UI components and responsive layouts.

Updated Apr 6, 2026
Search Tags:#theming#ui#accessibility#components#responsive#tailwind#shadcn
One-click install
npx skills add https://github.com/luicabref97/sushi-jungle-web --skill ckm-ui-styling-luicabref97
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:ui-styling
Source: https://github.com/luicabref97/sushi-jungle-web/tree/main/.agents/skills/ckm-ui-styling
Command: npx skills add https://github.com/luicabref97/sushi-jungle-web --skill ckm-ui-styling-luicabref97

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Reduces the friction of building production-quality, accessible user interfaces by combining shadcn/ui components, Tailwind utility styling, and canvas-based visual systems so teams can ship consistent, responsive UI faster.

Core Features & Use Cases

  • Accessible Components: Copy-pasteable, Radix-based components for dialogs, menus, forms, tables, toasts, and command palettes with ARIA and keyboard patterns.
  • Utility-First Styling: Tailwind-driven utilities and a CSS-variable theming system for dark mode, color palettes, and consistent design tokens.
  • Theming & Configuration: Helpers and examples for generating tailwind.config, CSS variable mappings, and theme toggles for Next.js, Vite, Remix, or Astro projects.
  • Visual Canvas System: Guidance and assets for high-quality canvas-based visual design compositions and curated font assets.
  • Automation Scripts: Python scripts to automate shadcn component installation and to generate Tailwind configuration tailored to your tokens.
  • Guides & Accessibility Patterns: Reference documents covering component usage, responsive patterns, ARIA, focus management, color contrast, and form accessibility.

Quick Start

Initialize shadcn/ui and Tailwind, add the components you need, then run the included tailwind_config_gen.py script to generate a tailored tailwind.config file.

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 UI components with Tailwind CSS?▼

To build accessible React UI components with Tailwind CSS, use Radix-based shadcn/ui patterns that provide built-in ARIA attributes and keyboard navigation for dialogs, forms, and tables. This ensures compliance while maintaining utility-first styling.

What is the best way to set up dark mode and theming using Tailwind CSS variables?▼

Setting up dark mode and theming with Tailwind CSS variables involves mapping design tokens to CSS variables and configuring your tailwind.config file. This approach allows consistent color palettes and easy theme toggling across your application.

Can I use shadcn/ui components with Vite, Remix, or Astro?▼

Yes, you can use shadcn/ui components with Vite, Remix, or Astro. The Skill provides specific configuration helpers and automation scripts to initialize and install components seamlessly across these React frameworks.

How do I automate shadcn component installation and generate a Tailwind config?▼

You can automate shadcn component installation and generate a Tailwind config by running the included Python automation scripts. The tailwind_config_gen.py script produces a tailored configuration file based on your specific design tokens.

What accessibility patterns should I follow when creating React dialogs and forms?▼

When creating React dialogs and forms, follow accessibility patterns that include proper ARIA roles, focus management, color contrast compliance, and keyboard navigation. Reference documents provide specific guidance for implementing these features correctly.

Related Skills

Explore More Design & Creative Skills→
jubalmjubalm
1

shadcn-init

Initialize shadcn/ui in React projects with Tailwind CSS v4 configuration.

Community
Advanced
WalshingtonWalshington

tanstack-start

Build and deploy TanStack Start full-stack React apps on Cloudflare Workers.

Community
Advanced
HollowvynHollowvyn

presentational-container-pattern

Separate data fetching and state from React view rendering.

Official
Basic
MacPhobosMacPhobos

DaisyUI Component Library

Provides 50+ pre-styled semantic UI components with theming and dark mode for Tailwind CSS.

Community
Intermediate