tailwind-design-system by giuseppe-trisciuoglio/developer-kit
npx skills add https://github.com/giuseppe-trisciuoglio/developer-kit --skill tailwind-design-system使用 Tailwind CSS (v4.1+) 和 shadcn/ui 创建和管理集中式设计系统的专家指南。此技能提供了结构化的工作流程,用于定义设计令牌、使用 CSS 变量配置主题,以及基于 shadcn/ui 基础组件构建一致的 UI 组件库。
与其他技能的关系:
globals.css@theme 指令 (v4.1+) 或 (v3)广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
tailwind.config.js设计令牌是基础。在 globals.css 中将它们定义为 CSS 自定义属性:
设置浅色/深色模式支持,并通过 @theme inline 将令牌暴露给 Tailwind。
创建强制使用令牌并提供一致 API 的设计系统基础组件。
创建动态样式指南,并验证整个代码库中的令牌使用情况。
查看 references/globals.css.example 获取一个完整的、可用于生产的 globals.css 示例,其中配置了所有设计令牌。
添加自定义令牌的快速示例:
:root {
--warning: oklch(0.84 0.16 84);
--warning-foreground: oklch(0.28 0.07 46);
}
.dark {
--warning: oklch(0.41 0.11 46);
--warning-foreground: oklch(0.99 0.02 95);
}
@theme inline {
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
}
用法:<div className="bg-warning text-warning-foreground">警告</div>
创建强制使用令牌的受约束设计系统组件。查看 references/component-wrapping.md 获取完整示例,包括 Button、Text 和 Stack 基础组件。
快速示例:
import { Button as ShadcnButton } from "@/components/ui/button";
export function Button({ variant = "primary", size = "md", ...props }) {
const variantMap = { primary: "default", secondary: "secondary" };
const sizeMap = { sm: "sm", md: "default", lg: "lg" };
return (
<ShadcnButton
variant={variantMap[variant]}
size={sizeMap[size]}
{...props}
/>
);
}
对于需要超越浅色/深色的多个品牌主题的应用程序:
[data-theme="ocean"] {
--primary: oklch(0.55 0.18 230);
--primary-foreground: oklch(0.985 0 0);
}
[data-theme="forest"] {
--primary: oklch(0.50 0.15 145);
--primary-foreground: oklch(0.985 0 0);
}
const [theme, setTheme] = useState("light");
useEffect(() => {
document.documentElement.setAttribute("data-theme", theme);
}, [theme]);
验证所有必需的令牌是否已定义:
#!/bin/bash
REQUIRED=("--background" "--foreground" "--primary" "--primary-foreground")
for token in "${REQUIRED[@]}"; do
grep -q "$token:" src/styles/globals.css || echo "Missing: $token"
done
--primary、--primary-foreground)以实现无缝集成@theme inline 与 @theme:将 CSS 变量桥接到 Tailwind 实用程序时使用 @theme inline;直接定义令牌时使用 @theme:root 中的每个令牌定义深色模式值。缺少深色令牌会导致视觉回归:root 中定义的令牌是全局的。使用 [data-theme] 选择器实现多主题且无冲突var() 查找都会增加最小但非零的开销@theme 指令和 @theme inline 是 v4.1+ 的功能。对于 v3 项目,请使用带有 theme.extend 的 tailwind.config.jsglobals.css 中。切勿在组件中硬编码颜色值--primary、--destructive),而不是基于外观的名称(--blue-500、--red-600)-foreground 令牌以确保对比度合规index.ts 导出所有设计系统组件以实现简洁的导入gap-2、gap-4、gap-6),而不是任意值每周安装数
155
代码仓库
GitHub 星标数
173
首次出现
2026年2月26日
安全审计
安装于
gemini-cli136
codex136
github-copilot133
cursor132
opencode132
amp131
Expert guide for creating and managing a centralized Design System using Tailwind CSS (v4.1+) and shadcn/ui. This skill provides structured workflows for defining design tokens, configuring themes with CSS variables, and building a consistent UI component library based on shadcn/ui primitives.
Relationship with other skills:
globals.css with a centralized theming system (light/dark mode)@theme directive (v4.1+) or tailwind.config.js (v3)Design tokens are the foundation. Define them as CSS custom properties in globals.css:
Set up light/dark mode support and expose tokens to Tailwind via @theme inline.
Create design system primitives that enforce token usage and provide consistent API.
Create a living style guide and validate token usage across the codebase.
See references/globals.css.example for a complete, production-ready globals.css with all design tokens configured.
Quick example for adding custom tokens:
:root {
--warning: oklch(0.84 0.16 84);
--warning-foreground: oklch(0.28 0.07 46);
}
.dark {
--warning: oklch(0.41 0.11 46);
--warning-foreground: oklch(0.99 0.02 95);
}
@theme inline {
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
}
Usage: <div className="bg-warning text-warning-foreground">Warning</div>
Create constrained design system components that enforce token usage. See references/component-wrapping.md for complete examples including Button, Text, and Stack primitives.
Quick example:
import { Button as ShadcnButton } from "@/components/ui/button";
export function Button({ variant = "primary", size = "md", ...props }) {
const variantMap = { primary: "default", secondary: "secondary" };
const sizeMap = { sm: "sm", md: "default", lg: "lg" };
return (
<ShadcnButton
variant={variantMap[variant]}
size={sizeMap[size]}
{...props}
/>
);
}
For applications requiring multiple brand themes beyond light/dark:
[data-theme="ocean"] {
--primary: oklch(0.55 0.18 230);
--primary-foreground: oklch(0.985 0 0);
}
[data-theme="forest"] {
--primary: oklch(0.50 0.15 145);
--primary-foreground: oklch(0.985 0 0);
}
const [theme, setTheme] = useState("light");
useEffect(() => {
document.documentElement.setAttribute("data-theme", theme);
}, [theme]);
Verify all required tokens are defined:
#!/bin/bash
REQUIRED=("--background" "--foreground" "--primary" "--primary-foreground")
for token in "${REQUIRED[@]}"; do
grep -q "$token:" src/styles/globals.css || echo "Missing: $token"
done
--primary, --primary-foreground) for seamless integration@theme inline vs @theme: Use @theme inline when bridging CSS variables to Tailwind utilities; use @theme for direct token definition:root. Missing dark tokens cause visual regressions:root are global. Use selectors for multi-theme without conflictsglobals.css. Never hardcode color values in components--primary, --destructive) not appearance-based (--blue-500, --red-600)-foreground token for contrast complianceindex.ts for clean importsWeekly Installs
155
Repository
GitHub Stars
173
First Seen
Feb 26, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli136
codex136
github-copilot133
cursor132
opencode132
amp131
TanStack Table 中文指南:React 无头表格库,实现排序过滤分页
500 周安装
[data-theme]var() lookup adds minimal but non-zero overhead@theme directive and @theme inline are v4.1+ features. For v3 projects, use tailwind.config.js with theme.extendgap-2, gap-4, gap-6) through DS components rather than arbitrary values