/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.

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.

Checks

1. Hardcoded Colors (Critical)

.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

2. Theme Setup

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

3. Appbar Uses Primary

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.

4. Sidebar & Drawer Use Secondary

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

5. Background-Text Pairing

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).

6. Surface Elevation Order

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

surface-container-highest

wrapping

surface-container-low

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

7. Semantic Color Misuse

Flag

variant="success"

variant="info"

dm_btn

— buttons use

primary

secondary

tertiary

error

ghost

outline

, not semantic state colors.

8. Multiple Primary Buttons Per View

In each

.heex

template, count

variant="primary"

dm_btn

. Flag if more than one appears outside conditional blocks.

9. Raw HTML Over Components

Flag

<button>

<input>

<select>

<table>

.heex

files where a

dm_*

equivalent exists. Exclude

lib/phoenix_duskmoon/

(component definitions) and

type="hidden"

10. Icon Color Override

Flag

dm_mdi

dm_bsi

with explicit

color=

set to anything other than

"currentcolor"

11. Tailwind Color Scale

Flag any Tailwind default color scale usage:

bg-blue-*

text-slate-*

border-zinc-*

, etc.

12. Typography

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

13. Layout Depth

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)

14. Spacing Consistency

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).

15. Reduced Motion

Check project CSS for

@media (prefers-reduced-motion: reduce)

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

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.

cmd-check-phoenix-duskmoon-design

NPX Install

Tags

SKILL.md Content

/check-phoenix-duskmoon-design

Command Instructions

Checks

1. Hardcoded Colors (Critical)

2. Theme Setup

3. Appbar Uses Primary

4. Sidebar & Drawer Use Secondary

5. Background-Text Pairing

6. Surface Elevation Order

7. Semantic Color Misuse

8. Multiple Primary Buttons Per View

9. Raw HTML Over Components

10. Icon Color Override

11. Tailwind Color Scale

12. Typography

13. Layout Depth

14. Spacing Consistency

15. Reduced Motion

Output