標籤：css

daisyUI 官方技能，让 agent 编写 HTML 或 JSX 时使用 daisyUI 5 的组件类名、语义色与主题：先按功能挑选合适的组件并阅读对应文档，再按其结构与约束写代码，附带安装、用法、配置与颜色等子指南。基于 Tailwind CSS 4。

daisyUI 5 的配置说明：在 CSS 的 daisyUI 插件块中设置启用哪些主题、默认主题与深色模式主题、根选择器、包含或排除的模块、类名前缀和控制台日志，并附完整示例。daisyUI 官方技能的子指南。

用 HTML 与 CSS 排版并导出 PDF 的渲染引擎，支持分页等打印样式标准，适合批量生成统计报告、发票与票据。Python 实现，依赖系统的 Pango 库。

用多层 backdrop-filter 与渐变遮罩在页面顶部或底部做出由弱到强的渐进模糊，提供可直接粘贴的 HTML 与 CSS，可调整高度、模糊层级、方向与 z-index，且不拦截点击。

用 Tailwind CSS 实现界面的通用指南：响应式与状态变体、深色模式、克制使用任意值、优先拆组件再用 @apply，以及动态拼接类名导致生产环境缺样式等常见问题，附按钮与首屏版式示例。

在页面内容容器左右边缘画 1px 低透明度的竖向参考线，并在区块角落加小方块，营造精确、有结构感的版式；提供 CSS 变量与伪元素写法，参考线不拦截点击与选中。

实现无缝循环的跑马灯，用于滚动展示标识、用户评价、截图或标签：复制一份元素序列，用线性 transform 从 0 平移到 -50%，固定元素宽度、边缘渐隐，并照顾 prefers-reduced-motion。

用 IntersectionObserver 加 Tailwind 任意值动画类实现元素进入视口时的入场动画，给出关键帧与观察器代码片段，可调整触发阈值、rootMargin、时长、延迟以及是否只播放一次。

提供 sm、md、lg 三档现成的 Tailwind 任意值阴影类，用于卡片、表单控件、浮层、主视觉等表面，做出分层的中性灰阴影，并规定不与默认阴影混用、不染色、不叠加多个阴影。

UnoCSS 原子化 CSS 引擎的参考：配置、规则、快捷方式、主题与变体，Wind3、Wind4（兼容 Tailwind）、Icons、Attributify 等预设，转换器以及 Vite 与 Nuxt 集成。提醒 agent 写样式前先看项目的 uno.config，配置不明时只用普通 class。由 Anthony Fu 从官方文档生成。

transitions.dev 时间线检查器里 Refine 按钮的对话内后备方案：agent 轮询本地中继服务领取任务，按 transitions.dev 的动效令牌调整时长、缓动、缩放与模糊，或推荐整套过渡方案，也能扫描源码分组并把接受的修改写回代码。闲置轮询也会消耗对话额度，作者更推荐用 npx transitions-refine live 常驻运行。

打磨已有的动效而不是新增过渡：按 transitions.dev 的动效令牌检查时长、位移、缩放、模糊与缓动五个维度，先判断动画用途再匹配令牌，并给出开合不对称、悬停进出、错开间隔与意图延迟等规则。是 transitions-dev 技能的配套，也可单独用于动效审计。

按需给 agent 提供现代 Web 平台的实践指南，涵盖 View Transitions、容器查询、Popover、INP 优化、无障碍等，并附浏览器兼容数据，避免写出过时的代码。由 Google Chrome 团队官方维护，目前是预览版。

按《Refactoring UI》书中的具体规则设计和改进界面：间距、字号、颜色、阴影都从事先定好的刻度里取值，用字重与颜色而不是字号建立层级，用模拟光源营造层次；适合界面看着不对劲、显得业余或杂乱时使用。

在网页项目中使用 OKLCH 色彩空间：把 hex、rgb、hsl 转成 oklch，生成没有色相漂移的色阶与暗色模式配色，用 APCA 或 WCAG 检查对比度并只调亮度来修正，处理 P3 色域与 sRGB 回退，以及 Tailwind v4 的 @theme 配置；修改结果以前后对照表呈现。

按新工业、编辑式粗野主义风格设计或改造网页界面：先定模式、主视觉动作、网格与单一强调色，再从宏观到细节确定版式、字体层级与图形元素，保留语义 HTML、键盘操作与对比度，并在宽屏与手机宽度下检查渲染效果。只用于明确要求这种风格时。

用 Tailwind CSS 实现瑞士国际主义风格的设计系统：12 栏网格与 8px 基准间距、IBM Plex Sans 字体与细字重标题、stone 色板，用不透明度而不是换色区分层级，每个项目只用一种强调色，正文宽度不超过 60ch，移动端优先并支持深色模式。

给卡片、对话框、下拉菜单、提示框等浮起的元素加阴影时，用 smooth-shadow-ring 系列工具类代替边框或 ring 加阴影的写法，避免出现两道边线，并说明描边与阴影的着色、暗色模式和覆盖方式。需要项目里装了 shadow-plugin 这个 Tailwind 插件。

写或评审响应式 Tailwind 代码时，让组件按所在容器的宽度而不是视口宽度调整布局：用 @container 与 @md: 等变体替换 sm:/md:/lg:，说明哪些页面级布局仍应保留视口断点，给出迁移步骤与评审时的常见错误。Tailwind v3 需要额外插件。

提供十二种可直接粘贴的 CSS 过渡：卡片尺寸变化、数字跳入、通知角标、文字切换、下拉菜单、弹窗开合、面板滑入、页面左右切换、图标切换、成功对勾、头像组悬停与错误抖动，用统一的 CSS 变量配置，不依赖框架，均带减少动态效果的处理。

修复卡顿的网页动画：把对 width、height、top、left、box-shadow 等会触发重排或重绘的属性动画改成只动 transform 与 opacity，用伪元素的透明度实现阴影过渡，用 FLIP 技术平滑过渡布局变化与 height: auto，达到 60/120fps。

让网页动画尊重系统的「减少动态效果」设置：把动画分为直接移除（视差、大范围位移、接管滚动）、减弱缩短、始终保留三档，而不是一刀切全部关掉；给出 CSS 媒体查询与 JS matchMedia 的写法，覆盖 GSAP、Framer Motion、Lenis 等库，对应 WCAG 2.3.3。

做毛玻璃与「液态玻璃」风格的界面：用 backdrop-filter 模糊、半透明底色、高光边线与多层阴影组成玻璃质感，用 SVG 位移滤镜做折射效果，给悬停、滚动与出现过程加动效，并为「降低透明度」设置提供可读的降级样式。

给界面加功能性的微动效：悬停与按下反馈、开关、点赞按钮、提示条、抽屉、弹窗、列表增删与排序、共享元素过渡，规定 100–250ms 的时长、进入慢退出快的节奏与缓动曲线，只动 transform 与 opacity，并尊重减少动态效果设置。基于 Framer Motion（motion/react）与现代 CSS。