这项技能指导创建独特的、生产级的前端界面，避免通用的“AI slop”美学。实施真正的工作代码，特别注重美学细节和创意选择。

基于 Emil Kowalski 的教学、开源库（Sonner、Vaul）和他的animations.dev 课程的 Web 界面综合动画指南。包含 7 个类别的 43 条规则，按影响优先顺序。

这项技能指导创建独特的、生产级的前端界面，避免通用的“AI slop”美学。实施真正的工作代码，特别注重美学细节和创意选择。

此技能从 Phoenix 项目中删除 DaisyUI，同时保留 Tailwind CSS 并保留所有组件结构和逻辑作为无样式示例。

示例工作流程（6 个块的依赖关系图）：

对迁移的代码运行全面的验证检查，以确保正确性并捕获常见的迁移问题。

将特定页面从pages/目录转换为app/目录，处理数据获取迁移、元数据提取和文件结构更改。

由 AST 支持的分析和转换工具，用于 Next.js Pages Router 到 App Router 的迁移。此技能是所有其他迁移技能的依赖项 - 将其与它们一起安装。

根据评估数据创建详细的分阶段迁移计划。该计划首先优先考虑低风险路线，并处理组件之间的依赖关系。

分析 Next.js Pages Router 代码库以确定迁移复杂性、识别阻碍因素并生成执行/不执行建议。

分析所有项目依赖项并使用迁移说明创建到其 App Router 等效项的映射。

将数据获取模式（getStaticProps、getServerSideProps、getStaticPaths）和 API 路由迁移到 App Router 等效项。

迁移组件以实现 RSC（React 服务器组件）兼容性。确定哪些组件需要“使用客户端”指令，哪些组件可以保留为服务器组件。

将模板复制到项目：

通过 XcodeBuildMCP 服务器构建、测试、运行和管理 Xcode 项目和 Swift 包。

将您的 AI 代理连接到真实的浏览器选项卡。与 Playwright 类似，但适用于当前选项卡。

用于汇总 URL、本地文件和 YouTube 链接的快速 CLI。

对代码更改进行红队风格的安全审查。像攻击者一样思考。

⚠️ 重要提示：切勿手动编辑 nb git repos ( ~/.nb/* ) 中的文件！始终使用 nb CLI 以确保正确的索引和 Git 提交。

仓库：https://github.com/tw93/Mole 命令：mo（不是mol！） 安装：brew installmole