用途：为 TailwindCSS 项目提供具体实现规范，把 Refactoring UI 的设计原则翻译成可直接使用的工具类。它是 web-design-mastery 的配套（COMPANION）技能，提供 Tailwind 专属语法；设计理论与决策仍应参考 web-design-mastery。
主要能力：1）颜色优先级：使用前必须先检查 tailwind.config.js 是否定义了 primary、secondary、brand、accent 等自定义色，若有则优先使用（如 bg-primary-600、hover:text-primary-700），通用色（zinc、gray、slate）仅作回退；主色用于 CTA、激活态、链接、焦点环，副色用于次要操作，中性色用于结构、文字与边框。2）间距：以 4px 网格为基准，1=4px、2=8px、3=12px、4=16px、6=24px、8=32px、12=48px、16=64px；默认使用对称内边距。3）排版：从 text-xs 到 text-5xl 的字号选择，字重（正文 normal、标签 medium、标题 semibold），标题用 tracking-tight、全大写用 tracking-wide。4）色彩层级：四级文字色系统（主、次、弱、极弱），含明暗两种模式与成功/警告/错误/信息状态色。5）阴影与层次：每项目只选一种策略（边框扁平、轻微浮起、分层、表面位移），并按 shadow-sm 到 shadow-xl 分场景使用。6）组件配方：卡片、按钮（主/次/幽灵）、输入框、导航项等成套类名。7）动画：150/200/300ms 时长与错峰延迟写法。8）暗色模式：暗色下多用边框、弱化状态色、降低次要元素对比度。
使用方式：按技能文档中的类名组合直接应用到元素上，先确认项目配置色，再选择间距、排版、阴影与层次策略，保持整套界面一致；动画与过渡按其规定时长与缓动使用。
适用场景：使用 TailwindCSS 构建界面、需要把设计原则落地为工具类、维护品牌配色与统一视觉的团队协作项目。
限制：技能明确列出了应避免的反模式，如滥用 shadow-2xl、尺寸不匹配的大圆角、无理由的非对称内边距、过厚的装饰边框、企业界面中的 animate-bounce，应改用 shadow-sm、rounded-md、p-4、border border-zinc-200、transition-all duration-200。文中还引用了 depth-strategies.md、components.md、responsive.md 参考文件，但其具体内容暂未提供。该技能依赖 web-design-mastery 提供设计理论，本技能仅负责 Tailwind 语法层面。