# Cmd Check Flutter Duskmoon Design > 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. - Skill: `gsmlg-dev/cmd-check-flutter-duskmoon-design` (Agent Skill) - Install (CLI): `npx skillmds@latest add gsmlg-dev/cmd-check-flutter-duskmoon-design` - Raw SKILL.md: https://api.skillmd.com/api/skills/gsmlg-dev/cmd-check-flutter-duskmoon-design/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Security - Author: gsmlg-dev (https://skillmd.com/u/gsmlg-dev) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/gsmlg-dev/cmd-check-flutter-duskmoon-design --- 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 `` element - `` 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 `

`, `<.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 `