Back to Details

cmd-setup-phoenix-duskmoon

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

/setup-phoenix-duskmoon

/setup-phoenix-duskmoon

Agent skill wrapper for the Claude command 
/setup-phoenix-duskmoon
.
When the original command text references 
{{INPUT}}
, 
$1
, or named arguments, map them from the user's current request.
Claude命令
/setup-phoenix-duskmoon
的Agent技能封装。
当原始命令文本引用
{{INPUT}}
、
$1
或命名参数时，请从用户当前请求中映射对应内容。

Command Instructions

命令说明

Set up the DuskMoon UI system in the current Phoenix project. Use the skills 
duskmoon-dev-core
, 
duskmoon-dev-css-art
, 
duskmoon-elements
, and 
phoenix-duskmoon-ui
as needed throughout these tasks.
在当前Phoenix项目中搭建DuskMoon UI系统。在整个任务过程中，根据需要使用
duskmoon-dev-core
、
duskmoon-dev-css-art
、
duskmoon-elements
和
phoenix-duskmoon-ui
技能。

Tasks

任务

1. Update CLAUDE.md with UI constitution

1. 用UI配置规范更新CLAUDE.md

Add or update a 
## UI Library
section in 
./CLAUDE.md
with the following constitution:
markdown
undefined
在
./CLAUDE.md
中添加或更新
## UI Library
章节，内容如下：
markdown
undefined

UI Library

UI Library

This project uses the DuskMoon UI system:
  • phoenix_duskmoon
     — Phoenix LiveView UI component library (primary web UI)
  • @duskmoon-dev/core
     — Core Tailwind CSS plugin and utilities
  • @duskmoon-dev/css-art
     — CSS art utilities
  • @duskmoon-dev/elements
     — Base web components
  • @duskmoon-dev/art-elements
     — Art/decorative web components
Do NOT use DaisyUI or other CSS component libraries. Do NOT use 
core_components.ex
— use 
phoenix_duskmoon
components instead. Use 
@duskmoon-dev/core/plugin
as the Tailwind CSS plugin.
本项目使用DuskMoon UI系统：
  • phoenix_duskmoon
     — Phoenix LiveView UI组件库（主要网页UI）
  • @duskmoon-dev/core
     — 核心Tailwind CSS插件与工具集
  • @duskmoon-dev/css-art
     — CSS艺术工具集
  • @duskmoon-dev/elements
     — 基础网页组件
  • @duskmoon-dev/art-elements
     — 艺术/装饰性网页组件
请勿使用DaisyUI或其他CSS组件库。请勿使用
core_components.ex
——请改用
phoenix_duskmoon
组件。 使用
@duskmoon-dev/core/plugin
作为Tailwind CSS插件。

Reporting issues or feature requests

问题反馈或功能请求

If you encounter missing features, bugs, or need functionality not yet available in any DuskMoon package, open a GitHub issue in the appropriate repository with the label 
internal request
:

If `./CLAUDE.md` does not exist, create it with this section.
如果遇到功能缺失、bug，或者需要任何DuskMoon包尚未提供的功能，请在对应仓库的GitHub Issues中创建带有
internal request
标签的问题：

如果`./CLAUDE.md`不存在，请创建该文件并添加此章节。

2. Update CSS to Tailwind CSS v4 with DuskMoon

2. 将CSS更新为带有DuskMoon的Tailwind CSS v4

  • Upgrade to Tailwind CSS v4 (remove v3 config if present)
  • Remove DaisyUI from all config and dependencies if present
  • Set 
    @duskmoon-dev/core/plugin
    as the primary Tailwind CSS plugin
  • Update the main CSS entry file to use Tailwind v4 
    @import "tailwindcss"
    syntax and import 
    @duskmoon-dev/core/plugin
  • Remove any 
    tailwind.config.js
    / 
    tailwind.config.ts
    (v3 config files); v4 is configured via CSS
  • 升级至Tailwind CSS v4（如果存在v3配置则移除）
  • 如果存在DaisyUI，请从所有配置和依赖中移除
  • 将
    @duskmoon-dev/core/plugin
    设置为主要Tailwind CSS插件
  • 更新主CSS入口文件，使用Tailwind v4的
    @import "tailwindcss"
    语法，并导入
    @duskmoon-dev/core/plugin
  • 删除所有
    tailwind.config.js
    / 
    tailwind.config.ts
    （v3配置文件）；v4通过CSS进行配置

3. Replace core_components.ex with phoenix_duskmoon

3. 用phoenix_duskmoon替换core_components.ex

  • Add 
    phoenix_duskmoon
    to 
    mix.exs
    dependencies if not already present
  • If 
    core_components.ex
    exists anywhere in the project:
    • Identify all callers of functions it exports
    • Replace those calls with equivalent 
      phoenix_duskmoon
      components (use the 
      phoenix-duskmoon-ui
      skill to map the equivalents)
    • Delete 
      core_components.ex
      after migrating all references
  • Add 
    import PhoenixDuskmoon.Components
    (or the appropriate import) to the web module helpers so components are available everywhere
  • If you find components or patterns that 
    phoenix_duskmoon
    does not yet support, open a GitHub issue at https://github.com/gsmlg-dev/phoenix_duskmoon/issues with the label 
    internal request
    describing the needed component
  • 如果
    phoenix_duskmoon
    尚未存在于
    mix.exs
    依赖中，请添加
  • 如果项目中存在
    core_components.ex
    ：
    • 找出所有调用其导出函数的地方
    • 将这些调用替换为等效的
      phoenix_duskmoon
      组件（使用
      phoenix-duskmoon-ui
      技能映射等效组件）
    • 迁移所有引用后删除
      core_components.ex
  • 在Web模块助手类中添加
    import PhoenixDuskmoon.Components
    （或适当的导入语句），以便组件在所有地方都可用
  • 如果发现
    phoenix_duskmoon
    尚不支持的组件或模式，请在https://github.com/gsmlg-dev/phoenix_duskmoon/issues创建带有`internal request`标签的GitHub Issue，描述所需组件

4. Add bunfig.toml

4. 添加bunfig.toml

Check if 
bunfig.toml
exists at the project root.
  • If the project is an umbrella (has 
    apps/
    directory), add:
    toml
    [install]
optional = true

[workspaces]
packages = ["apps/*"]
  • If the project is a standard Phoenix project, add a minimal 
    bunfig.toml
    :
    toml
    [install]
optional = true
检查项目根目录是否存在
bunfig.toml
。
  • 如果项目是umbrella项目（包含
    apps/
    目录），添加：
    toml
    [install]
optional = true

[workspaces]
packages = ["apps/*"]
  • 如果是标准Phoenix项目，添加一个极简的
    bunfig.toml
    ：
    toml
    [install]
optional = true

5. Add root package.json if missing

5. 添加缺失的根目录package.json

Check if 
package.json
exists at the project root.
  • If the project is an umbrella, add a workspace-aware root 
    package.json
    :
    json
    {
  "private": true,
  "workspaces": ["apps/*"]
}
  • If it is a standard Phoenix project and 
    package.json
    is missing at the root (assets may have one under 
    assets/
    ), add one at the project root pointing to the assets workspace or leave it minimal as needed for bun to resolve packages.
检查项目根目录是否存在
package.json
。
  • 如果是umbrella项目，添加一个支持工作区的根目录
    package.json
    ：
    json
    {
  "private": true,
  "workspaces": ["apps/*"]
}
  • 如果是标准Phoenix项目且根目录缺少
    package.json
    （资源文件可能在
    assets/
    目录下有一个），请在项目根目录添加一个指向资源工作区的
    package.json
    ，或根据bun解析包的需要保留极简版本。

6. Switch JS bundler from esbuild to bun + tailwind standalone CLI

6. 将JS打包工具从esbuild切换为bun + tailwind独立CLI

In 
mix.exs
deps, replace 
{:esbuild, ...}
with:
elixir
{:bun, "~> 1.4", runtime: Mix.env() == :dev},
{:tailwind, "~> 0.2", runtime: Mix.env() == :dev},
In 
config/config.exs
, replace the 
config :esbuild
block with (use the actual app name, not 
my_app
):
elixir
config :bun,
  version: "1.3.4",
  my_app: [
    args: ~w(build assets/js/app.js --outdir=priv/static/assets --external /fonts/* --external /images/*),
    cd: Path.expand("../", __DIR__)
  ]

config :tailwind,
  version: "4.1.11",
  my_app: [
    args: ~w(--input=assets/css/app.css --output=priv/static/assets/app.css),
    cd: Path.expand("../", __DIR__)
  ]
For umbrella apps, use 
Path.expand("../apps/my_app", __DIR__)
for 
cd:
.
In 
config/dev.exs
, replace the esbuild watcher with:
elixir
watchers: [
  tailwind: {Tailwind, :install_and_run, [:my_app, ~w(--watch)]},
  bun: {Bun, :install_and_run, [:my_app, ~w(--sourcemap=inline --watch)]}
]
Update 
mix.exs
aliases:
elixir
"assets.deploy": [
  "phx.digest.clean",
  "tailwind my_app --minify",
  "bun my_app --minify",
  "phx.digest"
]
在
mix.exs
依赖中，将
{:esbuild, ...}
替换为：
elixir
{:bun, "~> 1.4", runtime: Mix.env() == :dev},
{:tailwind, "~> 0.2", runtime: Mix.env() == :dev},
在
config/config.exs
中，将
config :esbuild
块替换为（使用实际应用名称，而非
my_app
）：
elixir
config :bun,
  version: "1.3.4",
  my_app: [
    args: ~w(build assets/js/app.js --outdir=priv/static/assets --external /fonts/* --external /images/*),
    cd: Path.expand("../", __DIR__)
  ]

config :tailwind,
  version: "4.1.11",
  my_app: [
    args: ~w(--input=assets/css/app.css --output=priv/static/assets/app.css),
    cd: Path.expand("../", __DIR__)
  ]
对于umbrella应用，
cd:
使用
Path.expand("../apps/my_app", __DIR__)
。
在
config/dev.exs
中，将esbuild监视器替换为：
elixir
watchers: [
  tailwind: {Tailwind, :install_and_run, [:my_app, ~w(--watch)]},
  bun: {Bun, :install_and_run, [:my_app, ~w(--sourcemap=inline --watch)]}
]
更新
mix.exs
中的别名：
elixir
"assets.deploy": [
  "phx.digest.clean",
  "tailwind my_app --minify",
  "bun my_app --minify",
  "phx.digest"
]

7. Set NODE_PATH for Phoenix dependency resolution

7. 为Phoenix依赖解析设置NODE_PATH

Set 
NODE_PATH
to the project root's 
deps/
directory so Bun resolves Phoenix JS packages (
phoenix
, 
phoenix_html
, 
phoenix_live_view
, etc.) directly from Elixir's 
deps/
without needing 
npm install
.
In 
devenv.nix
(if present), this is already set via:
nix
env.NODE_PATH = "${config.git.root}/deps";
For non-devenv setups, export in shell or CI:
bash
export NODE_PATH="$(pwd)/deps"
No 
npm install
or symlinks needed for Phoenix's own JS packages.
将
NODE_PATH
设置为项目根目录的
deps/
目录，以便Bun直接从Elixir的
deps/
中解析Phoenix JS包（
phoenix
、
phoenix_html
、
phoenix_live_view
等），无需执行
npm install
。
如果存在
devenv.nix
，已通过以下方式设置：
nix
env.NODE_PATH = "${config.git.root}/deps";
对于非devenv环境，在shell或CI中导出：
bash
export NODE_PATH="$(pwd)/deps"
无需为Phoenix自身的JS包执行
npm install
或创建符号链接。

8. Configure runtime.exs for devenv binary paths

8. 配置runtime.exs以使用devenv二进制路径

In 
config/runtime.exs
, add so devenv-provided system binaries are used instead of downloaded ones:
elixir
if System.get_env("MIX_BUN_PATH") do
  config :bun, path: System.get_env("MIX_BUN_PATH")
end

if System.get_env("MIX_TAILWIND_PATH") do
  config :tailwind, path: System.get_env("MIX_TAILWIND_PATH")
end
在
config/runtime.exs
中添加以下内容，以便使用devenv提供的系统二进制文件，而非下载的版本：
elixir
if System.get_env("MIX_BUN_PATH") do
  config :bun, path: System.get_env("MIX_BUN_PATH")
end

if System.get_env("MIX_TAILWIND_PATH") do
  config :tailwind, path: System.get_env("MIX_TAILWIND_PATH")
end

9. Update assets/package.json for DuskMoon JS packages

9. 更新assets/package.json以添加DuskMoon JS包

Ensure 
assets/package.json
(or the relevant workspace 
package.json
) lists the DuskMoon packages as dependencies:
json
{
  "dependencies": {
    "@duskmoon-dev/core": "latest",
    "@duskmoon-dev/css-art": "latest",
    "@duskmoon-dev/elements": "latest",
    "@duskmoon-dev/art-elements": "latest"
  }
}
Remove any 
esbuild
or 
daisyui
entries from the package.json.
确保
assets/package.json
（或相关工作区的
package.json
）将DuskMoon包列为依赖：
json
{
  "dependencies": {
    "@duskmoon-dev/core": "latest",
    "@duskmoon-dev/css-art": "latest",
    "@duskmoon-dev/elements": "latest",
    "@duskmoon-dev/art-elements": "latest"
  }
}
从package.json中移除所有
esbuild
或
daisyui
条目。

10. Install dependencies

10. 安装依赖

After all file changes are made:
  1. Run 
    mix deps.get
    to fetch new hex packages
  2. Run 
    bun install
    (from project root) to install JS packages
完成所有文件修改后：
  1. 运行
    mix deps.get
    获取新的hex包
  2. 运行
    bun install
    （从项目根目录）安装JS包

11. Report missing features as internal requests

11. 将缺失功能报告为内部请求

After completing the migration, review any gaps encountered:
  • If a DuskMoon package is missing a feature, component, or has a bug that blocked or complicated this migration, open a GitHub issue in the relevant repository with the label 
    internal request
    :
  • Include in the issue: a clear description of the missing/broken functionality, the use case, and (if possible) a suggested API or workaround
完成迁移后，检查遇到的任何缺口：
  • 如果某个DuskMoon包缺少功能、组件，或存在阻碍/复杂化本次迁移的bug，请在对应仓库的GitHub Issues中创建带有
    internal request
    标签的问题：
  • 在问题中包含：缺失/损坏功能的清晰描述、使用场景，以及（如有可能）建议的API或解决方案

Important Notes

重要提示

  • Always read files before modifying them
  • Use the relevant DuskMoon skills for precise API details: 
    • duskmoon-dev-core
      for Tailwind plugin setup and core utilities
    • duskmoon-dev-css-art
      for CSS art package usage
    • duskmoon-elements
      for base web component APIs
    • phoenix-duskmoon-ui
      for Phoenix component mappings
  • Preserve all existing business logic — only replace UI infrastructure
  • After migration, do a project-wide search for any remaining references to 
    esbuild
    , 
    DaisyUI
    , or 
    CoreComponents
    and clean them up
  • 修改文件前请先阅读文件内容
  • 使用相关DuskMoon技能获取精确的API细节： 
    • duskmoon-dev-core
      用于Tailwind插件设置和核心工具
    • duskmoon-dev-css-art
      用于CSS art包的使用
    • duskmoon-elements
      用于基础网页组件API
    • phoenix-duskmoon-ui
      用于Phoenix组件映射
  • 保留所有现有业务逻辑——仅替换UI基础设施
  • 迁移完成后，在项目范围内搜索所有剩余的
    esbuild
    、
    DaisyUI
    或
    CoreComponents
    引用并清理