cmd-check-flutter-duskmoon-design

Original：🇺🇸 English
Translated

Run the /check-flutter-duskmoon-design Claude command workflow in Codex.

13installs
Sourcegsmlg-dev/code-agent
Added on

NPX Install

npx skill4agent add gsmlg-dev/code-agent cmd-check-flutter-duskmoon-design

Tags

Translated version includes tags in frontmatter
flutter-design-auditphoenix-duskmoonui-compliance-checkagent-skilltailwind-css-audit

SKILL.md Content

View Translation Comparison →

/check-flutter-duskmoon-design

Agent skill wrapper for the Claude command 
/check-flutter-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)

Search 
.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"
or 
variant="info"
on 
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"
on 
dm_btn
. Flag if more than one appears outside conditional blocks.

9. Raw HTML Over Components

Flag 
<button>
, 
<input>
, 
<select>
, 
<table>
in 
.heex
files where a 
dm_*
equivalent exists. Exclude 
lib/phoenix_duskmoon/
(component definitions) and 
type="hidden"
.

10. Icon Color Override

Flag 
dm_mdi
or 
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.