Skip to main content 首页 创作者 lennney gate-all-skills ckm-ui-styling
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.
跳到安装 Skills Marketplace 发现并探索由社区构建的 Agent Skills
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/lennney/gate-all-skills --skill ckm-ui-styling命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
下载 Zip 下载中... name ckm:ui-styling description 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. argument-hint [component or layout] license MIT metadata {"author":"claudekit","version":"1.0.0"} trigger 需要创建美观的用户界面 input 设计需求 output UI 组件和样式 next 无 dependencies 无
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
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 visual communication
Minimal text, maximum visual impact
Systematic patterns and refined aesthetics
Quick Start
Component + Styling Setup
Install shadcn/ui with Tailwind:
npx shadcn@latest init
CLI prompts for framework, TypeScript, paths, and theme preferences. This configures both shadcn/ui and Tailwind CSS.
Add components:
npx shadcn@latest add button card dialog form
Use components with utility styling:
import { Button
from
"@/components/ui/button"
import
Card
CardHeader
CardTitle
CardContent
from
"@/components/ui/card"
export
function
Dashboard
return
<div className ="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3" >
<Card className ="hover:shadow-lg transition-shadow" >
<CardHeader >
<CardTitle className ="text-2xl font-bold" > Analytics</CardTitle >
</CardHeader >
<CardContent className ="space-y-4" >
<p className ="text-muted-foreground" > View your metrics</p >
<Button variant ="default" className ="w-full" >
View Details
</Button >
</CardContent >
</Card >
</div >
Alternative: Tailwind-Only Setup npm install -D tailwindcss @tailwindcss/vite
import tailwindcss from '@tailwindcss/vite'
export default { plugins : [tailwindcss ()] }
Component Library Guide Comprehensive component catalog with usage patterns, installation, and composition examples.
See: references/shadcn-components.md
Form & input components (Button, Input, Select, Checkbox, Date Picker, Form validation)
Layout & navigation (Card, Tabs, Accordion, Navigation Menu)
Overlays & dialogs (Dialog, Drawer, Popover, Toast, Command)
Feedback & status (Alert, Progress, Skeleton)
Display components (Table, Data Table, Avatar, Badge)
Theme & Customization Theme configuration, CSS variables, dark mode implementation, and component customization.
See: references/shadcn-theming.md
Dark mode setup with next-themes
CSS variable system
Color customization and palettes
Component variant customization
Theme toggle implementation
Accessibility Patterns ARIA patterns, keyboard navigation, screen reader support, and accessible component usage.
See: references/shadcn-accessibility.md
Radix UI accessibility features
Keyboard navigation patterns
Focus management
Screen reader announcements
Form validation accessibility
Tailwind Utilities Core utility classes for layout, spacing, typography, colors, borders, and shadows.
See: references/tailwind-utilities.md
Layout utilities (Flexbox, Grid, positioning)
Spacing system (padding, margin, gap)
Typography (font sizes, weights, alignment, line height)
Colors and backgrounds
Borders and shadows
Arbitrary values for custom styling
Responsive Design Mobile-first breakpoints, responsive utilities, and adaptive layouts.
See: references/tailwind-responsive.md
Mobile-first approach
Breakpoint system (sm, md, lg, xl, 2xl)
Responsive utility patterns
Container queries
Max-width queries
Custom breakpoints
Tailwind Customization Config file structure, custom utilities, plugins, and theme extensions.
See: references/tailwind-customization.md
@theme directive for custom tokens
Custom colors and fonts
Spacing and breakpoint extensions
Custom utility creation
Custom variants
Layer organization (@layer base, components, utilities)
Apply directive for component extraction
Visual Design System Canvas-based design philosophy, visual communication principles, and sophisticated compositions.
See: references/canvas-design-system.md
Design philosophy approach
Visual communication over text
Systematic patterns and composition
Color, form, and spatial design
Minimal text integration
Museum-quality execution
Multi-page design systems
Utility Scripts Python automation for component installation and configuration generation.
shadcn_add.py Add shadcn/ui components with dependency handling:
python scripts/shadcn_add.py button card dialog
tailwind_config_gen.py Generate tailwind.config.js with custom theme:
python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter
Best Practices
Component Composition : Build complex UIs from simple, composable primitivesUtility-First Styling : Use Tailwind classes directly; extract components only for true repetitionMobile-First Responsive : Start with mobile styles, layer responsive variantsAccessibility-First : Leverage Radix UI primitives, add focus states, use semantic HTMLDesign Tokens : Use consistent spacing scale, color palettes, typography systemDark Mode Consistency : Apply dark variants to all themed elementsPerformance : Leverage automatic CSS purging, avoid dynamic class namesTypeScript : Use full type safety for better DXVisual Hierarchy : Let composition guide attention, use spacing and color intentionallyExpert Craftsmanship : Every detail matters - treat UI as a craft
Reference Navigation
references/shadcn-components.md - Complete component catalogreferences/shadcn-theming.md - Theming and customizationreferences/shadcn-accessibility.md - Accessibility patterns
references/tailwind-utilities.md - Core utility classesreferences/tailwind-responsive.md - Responsive designreferences/tailwind-customization.md - Configuration and extensions
references/canvas-design-system.md - Design philosophy and canvas workflows
scripts/shadcn_add.py - Component installationscripts/tailwind_config_gen.py - Config generation
Common Patterns import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Form , FormField , FormItem , FormLabel , FormControl , FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
const schema = z.object ({
email : z.string ().email (),
password : z.string ().min (8 )
})
export function LoginForm (const form = useForm ({
resolver : zodResolver (schema),
defaultValues : { email : "" , password : "" }
})
return (
<Form {...form }>
<form onSubmit ={form.handleSubmit(console.log)} className ="space-y-6" >
<FormField control ={form.control} name ="email" render ={({ field }) => (
<FormItem >
<FormLabel > Email</FormLabel >
<FormControl >
<Input type ="email" {...field } />
</FormControl >
<FormMessage />
</FormItem >
)} />
<Button type ="submit" className ="w-full" > Sign In</Button >
</form >
</Form > Responsive layout with dark mode:
<div className="min-h-screen bg-white dark:bg-gray-900" >
<div className ="container mx-auto px-4 py-8" >
<div className ="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" >
<Card className ="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700" >
<CardContent className ="p-6" >
<h3 className ="text-xl font-semibold text-gray-900 dark:text-white" >
Content
</h3 >
</CardContent >
</Card >
</div >
</div >
Resources 