高能动性前端审美

要解决什么问题

用 AI 写 React/Next 界面时，输出往往在对称度、动效强度、信息密度上飘忽不定：有时过于呆板，有时堆满 framer-motion 却和项目栈不一致。更常见的是直接 import 第三方库，而当前 package.json 里根本没有对应依赖，或把需要客户端的交互塞进 Server Component，在 Next App Router 下直接报错。

技能如何工作

技能把三类全局变量当作生成约束的主动基线（默认 DESIGN_VARIANCE=8、MOTION_INTENSITY=6、VISUAL_DENSITY=4）：你在对话里明确要求时，Agent 会按你的描述覆盖这些值，并据此驱动后续布局、动效与视觉密度逻辑。

在工程侧，它默认 React / Next.js + RSC，并强调几条硬规则：

• 依赖校验：引入任何第三方库前必须先查 package.json；缺失则先给出安装命令，再写代码，禁止假设已安装。
• 交互隔离：动效、Liquid Glass 等交互 UI 必须拆成带 'use client' 的叶子组件；服务端组件只负责静态骨架。
• 样式与版本：以 Tailwind CSS 为主；先确认 v3 还是 v4，避免混用语法。
• 状态：局部用 useState / useReducer；全局状态仅用于避免深层 prop drilling，且只能挂在 Client 侧的 Provider 上。

适用边界与注意点

技能描述的是生成规范与架构默认值，不是设计系统组件库；若你指定了非 React 技术栈，应以你的栈为准。基线数值写在技能说明里，正常对话中不必改文件；需要更静、更密或更乱的界面时，在 prompt 里说清楚即可。截断章节之外的细节（如完整动效配方）以 SKILL 全文为准。