用途
该技能用于在当前 Phoenix 项目中搭建 DuskMoon UI 系统,主要面向需要把前端构建工具链和组件库统一到 DuskMoon 生态的开发者。它覆盖从依赖替换、CSS 配置、组件迁移到开发与生产构建设置的完整流程。
主要能力
- 在 ./CLAUDE.md 中添加或更新 UI 库约定,明确使用 phoenix_duskmoon、duskmoon_bundler、@duskmoon-dev/core 等 DuskMoon 包,不使用 DaisyUI、core_components.ex 或 esbuild/tailwind/bun 依赖。
- 将 CSS 升级到 Tailwind CSS v4,移除 DaisyUI 与 v3 配置文件,使用 @duskmoon-dev/core/plugin 作为主插件,并示范 assets/css/app.css 的写法。
- 用 phoenix_duskmoon 组件替换 core_components.ex:识别调用方、映射等价组件、迁移后删除旧文件。
- 在 mix.exs 中把 esbuild/tailwind/bun 依赖替换为 duskmoon_bundler_runtime 和 duskmoon_bundler,并说明不要用 only: :dev。
- 配置 config/config.exs 中的 duskmoon_bundler,包括 resolve_dirs、target、sourcemap、entry、outdir、tailwind 和 server 等键。
- 在 endpoint 的 code_reloading? 块内添加 DuskmoonBundler.DevServer 插件,并在 config/dev.exs 中配置 watcher。
- 更新 mix.exs 的 assets.build / assets.deploy 别名为 duskmoon_bundler.build --tailwind。
- 在根布局中使用 DuskmoonBundler.static_path/2 与 DuskmoonBundler.Preload.tags/2 替代硬编码资源路径。
- 在项目根添加 package.json,声明 @duskmoon-dev/core、css-art、elements、art-elements 等依赖。
- 运行 mix deps.get 与 mix npm.install 安装依赖。
- 对缺失功能,按对应仓库打开带 internal request 标签的 GitHub issue。
使用方式
按技能列出的任务顺序执行:先更新 CLAUDE.md,再改 CSS 与组件,随后切换依赖、配置 bundler、加插件与 watcher、更新别名与布局标签、添加 package.json、安装依赖,最后整理遗留引用并清理缓存。若 igniter 可用,可运行 mix igniter.install duskmoon_bundler 自动完成部分步骤,但仍需对照任务 5–8 验证,尤其是含多端点的 umbrella 应用。
适用场景
适用于标准 Phoenix 项目以及含多个端点的 umbrella 应用;umbrella 场景下需为每个端点配置独立的 named profile 和 watcher 名称。也适用于从 esbuild/tailwind/bun 迁移、并希望移除 Node.js 工具链的项目。
限制
技能强调修改文件前先读取,只替换 UI 基础设施并保留业务逻辑。duskmoon_bundler 替代 esbuild/tailwind/bun/Node.js,因此不再需要 NODE_PATH 与相关缓存二进制。具体收费、价格、平台支持范围等资料未提供。