ckmui-styling

Solid

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

Web & Frontend 85,227 stars 8800 forks Updated 1 months ago MIT

Install

View on GitHub

Quality Score: 94/100

Stars 20%
100
Recency 20%
75
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# UI Styling Skill Comprehensive skill for creating beautiful, accessible user interfaces combining shadcn/ui components, Tailwind CSS utility styling, and canvas-based visual design systems. ## Reference - shadcn/ui: https://ui.shadcn.com/llms.txt - Tailwind CSS: https://tailwindcss.com/docs ## When to Use This Skill Use when: - Building UI with React-based frameworks (Next.js, Vite, Remix, Astro) - Implementing accessible components (dialogs, forms, tables, navigation) - Styling with utility-first CSS approach - Creating responsive, mobile-first layouts - Implementing dark mode and theme customization - Building design systems with consistent tokens - Generating visual designs, posters, or brand materials - Rapid prototyping with immediate visual feedback - Adding complex UI patterns (data tables, charts, command palettes) ## Core Stack ### Component Layer: shadcn/ui - Pre-built accessible components via Radix UI primitives - Copy-paste distribution model (components live in your codebase) - TypeScript-first with full type safety - Composable primitives for complex UIs - CLI-based installation and management ### Styling Layer: Tailwind CSS - Utility-first CSS framework - Build-time processing with zero runtime overhead - Mobile-first responsive design - Consistent design tokens (colors, spacing, typography) - Automatic dead code elimination ### Visual Design Layer: Canvas - Museum-quality visual compositions - Philosophy-driven design approach - Sophisticated visua...

Details

Author
nextlevelbuilder
Repository
nextlevelbuilder/ui-ux-pro-max-skill
Created
6 months ago
Last Updated
1 months ago
Language
Python
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

ckm-ui-styling

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

335 Updated today
aiskillstore
Web & Frontend Listed

ui-styling

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

1 Updated 1 months ago
chef0111
Web & Frontend Listed

frontend-design

Visual design systems, UI/UX styling, Tailwind CSS, CSS variables, component libraries (shadcn/ui, Radix UI), design tokens, accessibility (WCAG), responsive layout, dark mode, and Figma-to-code workflows. NOT for React component logic, hooks, or state management (use react-development). NOT for Next.js routing, SSR, or server components (use nextjs-development).

9 Updated yesterday
viktorbezdek
Web & Frontend Listed

radix-ui-design-system

Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.

335 Updated today
aiskillstore
Web & Frontend Featured

radix-ui-design-system

Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.

39,227 Updated today
sickn33