SuperAPI AI 工具集

shadcn-theming

前端与建站

查看项目

更新于 10-15 21:49

技能介绍

用途:在定义或审计 shadcn/ui 设计令牌、OKLCH 颜色、明暗模式 CSS 变量时使用。

主要能力:记录令牌层级(组件 → 语义 → 原始 OKLCH 值)与校验清单,涵盖暗色模式覆盖、图表/侧边栏变量、禁止硬编码 hex。支持 CSS 变量(--background、--foreground、--primary 等)、OKLCH 广色域 P3、暗色模式(.dark 类或 prefers-color-scheme)、Tailwind v4 的 @theme inline 指令与 @custom-variant dark。基础色包括 neutral、stone、zinc、mauve、olive、mist、taupe,初始化时设定,可用 migrate base-color --to <c> 切换。预设可打包样式、基础色、主题、图表色、图标、字体、圆角、菜单色/强调色。--radius 通过 @theme inline 驱动 --radius-sm 至 --radius-4xl。

使用方式:工作流要求先并行启动代理,各以名称调用一次:fuse-ai-pilot:explore-codebase 查找现有主题令牌;fuse-ai-pilot:research-expert 通过 Context7 验证 OKLCH 模式;之后运行 fuse-ai-pilot:sniper 校验。主题 CLI(已在 shadcn 4.21.0 验证):{runner} shadcn@latest init --preset <code>;{runner} shadcn@latest apply --preset <code>(可加 --only theme 或 --only font,theme);{runner} shadcn@latest preset decode <code>(另有 resolve、url、open);{runner} shadcn@latest migrate base-color --to zinc --yes;{runner} shadcn@latest init --no-css-variables;{runner} shadcn@latest init --pointer;{runner} shadcn@latest eject。

关键规则:所有令牌始终使用 OKLCH;每个令牌始终定义暗色模式覆盖;组件中绝不硬编码 hex 或 rgb;使用 @theme inline 集成 Tailwind v4;将语义令牌映射到原始 OKLCH 值。

校验清单::root 中定义 CSS 变量;.dark 中定义暗色覆盖;使用 OKLCH;图表变量 --chart-1 至 --chart-5;适用时含侧边栏变量;新令牌在 :root 与 .dark 中定义并在 @theme inline 中以 --color-* 暴露;组件中无硬编码 hex。

适用场景与限制:适用于 shadcn/ui 主题令牌的定义与审计。资料未提供收费、价格、平台或效果信息。