cmd-check-phoenix-duskmoon-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

/check-phoenix-duskmoon-design

Agent skill wrapper for the Claude command

/check-phoenix-duskmoon-design

When the original command text references

{{INPUT}}

$1

, or named arguments, map them from the user's current request.

Claude命令

/check-phoenix-duskmoon-design

的Agent技能封装。

当原始命令文本引用

{{INPUT}}

、

$1

或命名参数时，从用户当前请求中映射这些参数。

Command Instructions

命令说明

Read

phoenix-duskmoon-design

skill first to understand all design rules, then audit this project for compliance. Report every violation with file path, line number, the offending code, and the correct fix.

首先阅读

phoenix-duskmoon-design

技能以了解所有设计规则，然后审核此项目的合规性。报告每一项违规内容，包括文件路径、行号、违规代码以及正确的修复方案。

Checks

检查项

1. Hardcoded Colors (Critical)

1. 硬编码颜色（严重）

.ex

.exs

.heex

.css

.js

files for:

Hex colors:
```
#[0-9a-fA-F]{3,8}
```
Color functions:
```
rgb(
```
,
```
rgba(
```
,
```
hsl(
```
,
```
hsla(
```
(skip if inside
```
var(--
```
)
Named CSS colors in properties:
```
color: white
```
,
```
background: black
```
, etc.
Tailwind palette classes:
```
bg-blue-500
```
,
```
text-red-600
```
,
```
border-gray-300
```
, etc.

Exclude: comments, test files,

.claude/

skill reference files,

mix.exs

version strings, SVG

fill

stroke

using

currentColor

在

.ex

、

.exs

、

.heex

、

.css

、

.js

文件中搜索：

十六进制颜色：
```
#[0-9a-fA-F]{3,8}
```
颜色函数：
```
rgb(
```
、
```
rgba(
```
、
```
hsl(
```
、
```
hsla(
```
（如果在
```
var(--
```
内则跳过）
属性中的CSS命名颜色：
```
color: white
```
、
```
background: black
```
等
Tailwind调色板类：
```
bg-blue-500
```
、
```
text-red-600
```
、
```
border-gray-300
```
等

排除：注释、测试文件、

.claude/

技能参考文件、

mix.exs

版本字符串、使用

currentColor

的SVG

fill

stroke

。

2. Theme Setup

2. 主题配置

CSS entry has

@plugin "@duskmoon-dev/core/plugin"

and

@import "phoenix_duskmoon/components"

Root layout has
```
data-theme=
```
on
```
<html>
```
element
```
<body>
```
has
```
bg-surface text-on-surface
```
or equivalent

CSS入口文件包含

@plugin "@duskmoon-dev/core/plugin"

和

@import "phoenix_duskmoon/components"

根布局的
```
<html>
```
元素带有
```
data-theme=
```
属性
```
<body>
```
元素包含
```
bg-surface text-on-surface
```
或等效类

3. Appbar Uses Primary

3. 应用栏使用主色调

Find all

<.dm_appbar

and raw appbar HTML. Verify primary color convention:

Phoenix component should render with
```
appbar-primary
```
class
Raw HTML appbar should have
```
appbar appbar-primary appbar-sticky
```

Flag if appbar uses default surface or any other color.

查找所有

<.dm_appbar>

和原生应用栏HTML。验证主色调约定：

Phoenix组件应渲染带有
```
appbar-primary
```
类
原生HTML应用栏应包含
```
appbar appbar-primary appbar-sticky
```
类

如果应用栏使用默认表面色或其他任何颜色，则标记违规。

4. Sidebar & Drawer Use Secondary

4. 侧边栏与抽屉使用次色调

Find all

<aside>

<.dm_left_menu>

<.dm_drawer>

, and sidebar containers. Verify they use secondary color:

Should have
```
bg-secondary text-secondary-content
```
Flag if sidebar uses
```
bg-surface-container
```
or any surface token instead of secondary

查找所有

<aside>

、

<.dm_left_menu>

、

<.dm_drawer>

和侧边栏容器。验证它们使用次色调：

应包含
```
bg-secondary text-secondary-content
```
类
如果侧边栏使用
```
bg-surface-container
```
或任何表面令牌而非次色调，则标记违规

5. Background-Text Pairing

5. 背景-文本颜色配对

Search for background color classes without their paired text color:

```
bg-primary
```
without
```
text-primary-content
```
```
bg-secondary
```
without
```
text-secondary-content
```
```
bg-tertiary
```
without
```
text-tertiary-content
```
```
bg-error
```
without
```
text-error-content
```

bg-inverse-surface

without

text-inverse-on-surface

bg-primary-container

without

text-on-primary-container

Flag as warnings (text may inherit from parent).

搜索未搭配对应文本颜色的背景色类：

```
bg-primary
```
未搭配
```
text-primary-content
```
```
bg-secondary
```
未搭配
```
text-secondary-content
```
```
bg-tertiary
```
未搭配
```
text-tertiary-content
```
```
bg-error
```
未搭配
```
text-error-content
```

bg-inverse-surface

未搭配

text-inverse-on-surface

bg-primary-container

未搭配

text-on-primary-container

标记为警告（文本可能从父元素继承颜色）。

6. Surface Elevation Order

6. 表面层级嵌套顺序

Check for nesting violations — higher-elevation surface containing lower:

surface-container-highest

wrapping

surface-container-low

```
surface-container-high
```
wrapping plain
```
surface
```

检查嵌套违规——高层级表面包含低层级表面：

surface-container-highest

包裹

surface-container-low

```
surface-container-high
```
包裹普通
```
surface
```

7. Semantic Color Misuse

7. 语义颜色误用

Flag

variant="success"

variant="info"

dm_btn

— buttons use

primary

secondary

tertiary

error

ghost

outline

, not semantic state colors.

标记

dm_btn

上的

variant="success"

或

variant="info"

——按钮仅使用

primary

secondary

tertiary

error

ghost

outline

变体，不使用语义状态颜色。

8. Multiple Primary Buttons Per View

8. 每个视图中多个主按钮

In each

.heex

template, count

variant="primary"

dm_btn

. Flag if more than one appears outside conditional blocks.

在每个

.heex

模板中，统计

dm_btn

上的

variant="primary"

数量。如果在条件块外出现多个，则标记违规。

9. Raw HTML Over Components

9. 原生HTML替代组件

Flag

<button>

<input>

<select>

<table>

.heex

files where a

dm_*

equivalent exists. Exclude

lib/phoenix_duskmoon/

(component definitions) and

type="hidden"

在

.heex

文件中标记存在

dm_*

等效组件却使用原生

<button>

、

<input>

、

<select>

、

<table>

的情况。排除

lib/phoenix_duskmoon/

（组件定义目录）和

type="hidden"

的元素。

10. Icon Color Override

10. 图标颜色覆盖

Flag

dm_mdi

dm_bsi

with explicit

color=

set to anything other than

"currentcolor"

标记

dm_mdi

或

dm_bsi

中显式设置

color=

为

"currentcolor"

以外值的情况。

11. Tailwind Color Scale

11. Tailwind颜色体系

Flag any Tailwind default color scale usage:

bg-blue-*

text-slate-*

border-zinc-*

, etc.

标记任何使用Tailwind默认颜色体系的情况：

bg-blue-*

、

text-slate-*

、

border-zinc-*

等。

12. Typography

12. 排版

Check if project defines custom font variables (
```
--font-display
```
,
```
--font-body
```
,
```
--font-mono
```
) in CSS
Flag if
```
<body>
```
uses
```
font-family: system-ui
```
or
```
Inter
```
or
```
Roboto
```
without a project-specific override
Check headings use a display font class or variable, not the same as body text

检查项目是否在CSS中定义自定义字体变量（
```
--font-display
```
、
```
--font-body
```
、
```
--font-mono
```
）
如果
```
<body>
```
使用
```
font-family: system-ui
```
或
```
Inter
```
或
```
Roboto
```
但未进行项目特定覆盖，则标记违规
检查标题是否使用显示字体类或变量，而非与正文相同的字体

13. Layout Depth

13. 布局层级

Check
```
<main>
```
or primary content area uses
```
bg-surface
```
Check sidebar/aside uses
```
bg-secondary text-secondary-content
```
Check drawer uses
```
bg-secondary text-secondary-content
```
Flag pages that are entirely flat (only one surface level used across the whole template)

检查
```
<main>
```
或主内容区域是否使用
```
bg-surface
```
检查侧边栏/aside是否使用
```
bg-secondary text-secondary-content
```
检查抽屉是否使用
```
bg-secondary text-secondary-content
```
标记整个模板仅使用一个表面层级的扁平化页面

14. Spacing Consistency

14. 间距一致性

In each

.heex

template, check gap/padding classes. Flag if a single template mixes more than 2 gap scales (e.g.,

gap-2

gap-4

gap-8

in the same view suggests inconsistency).

在每个

.heex

模板中，检查间距/内边距类。如果单个模板混合使用超过2种间距尺度（例如同一视图中同时使用

gap-2

、

gap-4

、

gap-8

，表明不一致），则标记违规。

15. Reduced Motion

15. 减少动画

Check project CSS for

@media (prefers-reduced-motion: reduce)

rule. Flag as warning if absent and animations/transitions are used.

检查项目CSS中是否存在

@media (prefers-reduced-motion: reduce)

规则。如果存在动画/过渡效果但缺少该规则，则标记为警告。

Output

输出格式

Phoenix DuskMoon Design Compliance
====================================
[✓|✗] Hardcoded colors:        N violations
[✓|✗] Theme setup:             OK | missing X
[✓|✗] Appbar color:            primary | wrong default
[✓|✗] Sidebar/drawer color:    secondary | wrong default
[✓|⚠] BG-text pairing:        N warnings
[✓|✗] Surface elevation:       OK | N violations
[✓|✗] Semantic color misuse:   N violations
[✓|⚠] Multiple primary btns:  N warnings
[✓|✗] Raw HTML over components: N instances
[✓|⚠] Icon color override:    N warnings
[✓|✗] Tailwind color scale:   N violations
[✓|⚠] Typography:             OK | N warnings
[✓|⚠] Layout depth:           OK | N warnings
[✓|⚠] Spacing consistency:    OK | N warnings
[✓|⚠] Reduced motion:         OK | missing

Total: N errors, N warnings

List each violation grouped by check with file:line, code snippet, and suggested fix.

Phoenix DuskMoon Design Compliance
====================================
[✓|✗] Hardcoded colors:        N violations
[✓|✗] Theme setup:             OK | missing X
[✓|✗] Appbar color:            primary | wrong default
[✓|✗] Sidebar/drawer color:    secondary | wrong default
[✓|⚠] BG-text pairing:        N warnings
[✓|✗] Surface elevation:       OK | N violations
[✓|✗] Semantic color misuse:   N violations
[✓|⚠] Multiple primary btns:  N warnings
[✓|✗] Raw HTML over components: N instances
[✓|⚠] Icon color override:    N warnings
[✓|✗] Tailwind color scale:   N violations
[✓|⚠] Typography:             OK | N warnings
[✓|⚠] Layout depth:           OK | N warnings
[✓|⚠] Spacing consistency:    OK | N warnings
[✓|⚠] Reduced motion:         OK | missing

Total: N errors, N warnings

按检查项分组列出每一项违规内容，包含文件:行号、代码片段和建议修复方案。