ckm%3Aui-styling by nextlevelbuilder/ui-ux-pro-max-skill
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ckm:ui-styling结合 shadcn/ui 组件、Tailwind CSS 实用样式和基于画布的可视化设计系统,创建美观、可访问用户界面的综合技能。
在以下情况下使用:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
使用 Tailwind 安装 shadcn/ui:
npx shadcn@latest init
CLI 会提示您选择框架、TypeScript、路径和主题偏好。这将配置 shadcn/ui 和 Tailwind CSS。
添加组件:
npx shadcn@latest add button card dialog form
使用带有实用样式的组件:
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>
)
}
Vite 项目:
npm install -D tailwindcss @tailwindcss/vite
// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }
/* src/index.css */
@import "tailwindcss";
包含使用模式、安装和组合示例的完整组件目录。
参见:references/shadcn-components.md
涵盖:
主题配置、CSS 变量、深色模式实现和组件自定义。
参见:references/shadcn-theming.md
涵盖:
ARIA 模式、键盘导航、屏幕阅读器支持和可访问组件使用。
参见:references/shadcn-accessibility.md
涵盖:
用于布局、间距、排版、颜色、边框和阴影的核心实用类。
参见:references/tailwind-utilities.md
涵盖:
移动优先的断点、响应式实用工具和自适应布局。
参见:references/tailwind-responsive.md
涵盖:
配置文件结构、自定义实用工具、插件和主题扩展。
参见:references/tailwind-customization.md
涵盖:
基于画布的设计理念、视觉传达原则和复杂的构图。
参见:references/canvas-design-system.md
涵盖:
用于组件安装和配置生成的 Python 自动化脚本。
添加 shadcn/ui 组件并处理依赖关系:
python scripts/shadcn_add.py button card dialog
生成带有自定义主题的 tailwind.config.js:
python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter
组件库
references/shadcn-components.md - 完整组件目录references/shadcn-theming.md - 主题和自定义references/shadcn-accessibility.md - 可访问性模式样式系统
references/tailwind-utilities.md - 核心实用类references/tailwind-responsive.md - 响应式设计references/tailwind-customization.md - 配置和扩展视觉设计
references/canvas-design-system.md - 设计理念和画布工作流自动化
scripts/shadcn_add.py - 组件安装scripts/tailwind_config_gen.py - 配置生成带验证的表单:
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>
)
}
带深色模式的响应式布局:
<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>
</div>
每周安装数
2.9K
仓库
GitHub 星标数
48.9K
首次出现
14 天前
安装于
codex2.6K
gemini-cli2.6K
cursor2.6K
opencode2.6K
github-copilot2.6K
cline2.6K
Comprehensive skill for creating beautiful, accessible user interfaces combining shadcn/ui components, Tailwind CSS utility styling, and canvas-based visual design systems.
Use when:
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>
)
}
Vite projects:
npm install -D tailwindcss @tailwindcss/vite
// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }
/* src/index.css */
@import "tailwindcss";
Comprehensive component catalog with usage patterns, installation, and composition examples.
See: references/shadcn-components.md
Covers:
Theme configuration, CSS variables, dark mode implementation, and component customization.
See: references/shadcn-theming.md
Covers:
ARIA patterns, keyboard navigation, screen reader support, and accessible component usage.
See: references/shadcn-accessibility.md
Covers:
Core utility classes for layout, spacing, typography, colors, borders, and shadows.
See: references/tailwind-utilities.md
Covers:
Mobile-first breakpoints, responsive utilities, and adaptive layouts.
See: references/tailwind-responsive.md
Covers:
Config file structure, custom utilities, plugins, and theme extensions.
See: references/tailwind-customization.md
Covers:
Canvas-based design philosophy, visual communication principles, and sophisticated compositions.
See: references/canvas-design-system.md
Covers:
Python automation for component installation and configuration generation.
Add shadcn/ui components with dependency handling:
python scripts/shadcn_add.py button card dialog
Generate tailwind.config.js with custom theme:
python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter
Component Library
references/shadcn-components.md - Complete component catalogreferences/shadcn-theming.md - Theming and customizationreferences/shadcn-accessibility.md - Accessibility patternsStyling System
references/tailwind-utilities.md - Core utility classesreferences/tailwind-responsive.md - Responsive designreferences/tailwind-customization.md - Configuration and extensionsVisual Design
references/canvas-design-system.md - Design philosophy and canvas workflowsAutomation
scripts/shadcn_add.py - Component installationscripts/tailwind_config_gen.py - Config generationForm with validation:
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>
</div>
Weekly Installs
2.9K
Repository
GitHub Stars
48.9K
First Seen
14 days ago
Installed on
codex2.6K
gemini-cli2.6K
cursor2.6K
opencode2.6K
github-copilot2.6K
cline2.6K
99,500 周安装