（3046期）Shadcn Theme Default – shadcn/ui 默认主题一键标准化

shadcn/ui 默认主题一键标准化 为 shadcn/ui 项目强制执行默认中性主题（黑白灰），支持 OKLCH 色彩空间、Tailwind v4 集成及深色模式，确保组件样式一致性。 使用说明 shadcn-theme-default 是一款专为 shadcn/ui 生态设计的主题管理技能，核心使命是强制实施默认 Neutral 主题（纯黑/白/灰色调），确保项目视觉风格的高度统一与专业质感。 核心用法该技能通过 CSS 自定义属性（CSS Variables）与 Tailwind CSS 的深度集成实现主题管控。用户只需引用预设的语义化 token（如 --primary、--background、--border），即可在 Light/Dark 双模式下自动获得一致的色彩表现。技能内置完整的 Planning Protocol，要求在任何样式修改前必须完成六项规划步骤：理解需求、现状勘察、执行计划、风险识别、顺序执行与结果总结。 显著优点 权威色彩系统：采用 OKLCH 色彩空间（Tailwind v4 默认），相比传统 HSL 具有更好的感知均匀性，确保深色模式下色彩不"脏"不"浮"。 版本智能适配：自动检测 Tailwind 版本（v3 用 HSL，v4 用 OKLCH），避免色彩系统混用导致的渲染故障。 完整的双模式支持：Light 模式以纯白背景配深灰主色，Dark 模式自动反转为深灰背景配浅灰主色，所有 30+ 个语义 token 均有对应映射。 组件级最佳实践：提供 Button、Card、Input、Alert 等常用组件的推荐写法，强制 background/foreground 配对原则，杜绝硬编码色值。 框架无关的深色模式方案：除 Next.js + next-themes 示例外，还提供原生 JS 切换逻辑，适配 Nuxt、SvelteKit 等框架。 潜在缺点与局限性 锁定中性色调：严格限制为黑白灰+单一强调红（destructive），如需品牌色定制需覆盖大量变量，违背"default"初衷。 OKLCH 兼容性：旧版浏览器（Chrome < 111, Safari < 15.4）不支持 OKLCH，降级方案需额外配置。 学习成本：开发者需理解 background/foreground 配对逻辑，避免常见错误如 bg-primary 配 text-foreground。 Tailwind v3 遗留负担：v3 项目需维护单独的 tailwind.config.ts 扩展配置，无法完全享受 v4 的 @theme inline 简洁语法。 适合人群 追求极简、专业视觉风格的 SaaS 产品团队 需要快速启动统一设计系统的初创项目 希望减少设计决策、专注功能开发的工程师 已采用或计划采用 shadcn/ui 组件库的 React/Vue/Angular 项目 常规风险 覆盖风险：强制应用可能覆盖用户已有的自定义主题值，Planning Protocol 中的风险识别步骤正是为此而设。 版本误判：若自动检测失败，可能导致 v3 项目注入 OKLCH 变量，造成全站色彩失效。 深色模式闪烁：若 suppressHydrationWarning 配置不当，Next.js 项目可能出现主题切换时的 FOUC（无样式内容闪烁）。 Chart 色彩局限：预设 5 个图表色在复杂数据可视化场景下可能不足，需手动扩展 token。 原始说明 Enforces the default shadcn/ui Neutral theme (black/white/gray) with OKLCH CSS variables, Tailwind v4 integration, and dark mode support