DesignFREEACCESS AVAILABLEFC-DES-009
Dark Mode Claw
dark-mode-claw
v0.2.0May 22, 2026Dark mode without the invert trap — elevation via brightness, semantic tokens that adapt, and contrast that actually passes
Migrates color systems to dark mode without the "just invert it" trap. Elevation through brightness instead of shadow, semantic tokens that adapt automatically, image dimming guidelines, and contrast verification that catches the 4.5:1 failures automated tools miss.
OpenClaw
Hermes
Claude Code
Codex
Cursor
Windsurf
Aider
OllamaPRIMARY ACTION
COMPATIBLE WITH
OpenClawHermesClaude CodeCodex+4
8 compatible tools5 output formats
When to Use
- Improve UX consistency and readability
- Audit accessibility and interaction states
- Refine spacing and hierarchy quickly
- Apply reusable design system patterns
Compatible Frameworks
OpenClawHermesClaude CodeCodexCursorWindsurfAiderOllama8 TOOLS
Quality Gates
- WCAG AA contrast verified in dark mode
- Semantics preserved across themes
- Elevation used instead of shadows
- No pure black (#000000) used
- Image adaptation guidelines provided
4 GATES DEFINED
Expected Outputs
Dark Mode Token MappingContrast Verification MatrixElevation System (light vs dark)Image Dimming GuidelinesTransition Animation Specs
Native exports per tool
OpenClaw10 files
openclaw/AGENTS.mdopenclaw/SOUL.mdopenclaw/TOOLS.md+7 moreHermes5 files
hermes/skills/flickclaw/dark-mode-claw/SKILL.mdhermes/skills/flickclaw/dark-mode-claw/references/workflow.mdhermes/skills/flickclaw/dark-mode-claw/references/quality-gates.md+2 moreClaude Code6 files
claude-code/CLAUDE.mdclaude-code/.claude/skills/dark-mode-claw/SKILL.mdclaude-code/.claude/skills/dark-mode-claw/references/workflow.md+3 moreCodex5 files
codex/AGENTS.mdcodex/.flickclaw/agents/dark-mode-claw/codex.mdcodex/.flickclaw/agents/dark-mode-claw/workflow.md+2 moreCursor3 files
cursor/.cursor/rules/flickclaw-dark-mode-claw.mdccursor/.cursor/rules/flickclaw-dark-mode-claw-workflow.mdccursor/.cursor/rules/flickclaw-dark-mode-claw-quality-gates.mdcWindsurf3 files
windsurf/.windsurf/rules/flickclaw-dark-mode-claw.mdwindsurf/.windsurf/rules/flickclaw-dark-mode-claw-workflow.mdwindsurf/.windsurf/rules/flickclaw-dark-mode-claw-quality-gates.mdAider3 files
aider/CONVENTIONS.mdaider/aider.mdaider/.aider.conf.ymlOllama4 files
ollama/Modelfileollama/system-prompt.mdollama/template.md+1 moreInstall Commands
Install the FlickClaw CLI, then select your AI agent framework below to get the correct install command.
Step 1: Install CLI (one-time)
npm install -g @flickclaw/cli@latestStep 2: Select Framework
OpenClaw
npm exec --yes @flickclaw/cli@latest -- install dark-mode-claw --target openclawDownload as ZIP
Example Prompt
Try this prompt with Dark Mode Claw to see what it can do:
Audit the UI for accessibility (WCAG 2.1 AA). Check color contrast, keyboard navigation, and screen reader compatibility. Produce Dark Mode Token Mapping, Contrast Verification Matrix, Elevation System (light vs dark).Example Output
IllustrativeWhat a typical Dark Mode Claw report looks like:
# Dark Mode Claw — Assessment Report **Project**: dashboard-ui **Context**: a React dashboard with charts, filters, and real-time updates **Generated**: 2026-07-10 ## Executive Summary The Dark Mode Claw completed its review of dashboard-ui (a React dashboard with charts, filters, and real-time updates). 3 findings were identified with concrete remediation steps. All quality gates were verified before delivery. ## Findings | # | Severity | Area | Finding | Recommended Action | |---|----------|------|---------|-------------------| | 1 | **P1** | Accessibility | Charts not keyboard navigable | Add tabIndex, ARIA roles, and keyboard event handlers | | 2 | **P1** | Contrast | Filter labels fail WCAG AA (3.2:1 ratio) | Update label color to meet 4.5:1 minimum | | 3 | **P2** | Responsive | Data table overflows on mobile (<375px) | Add horizontal scroll and sticky first column | ## Quality Gates - [✓] WCAG AA contrast verified in dark mode (4.5:1 minimum) - [✓] Elevation via brightness, not shadow - [✓] No pure black (#000000) backgrounds ## Outputs Generated - **Dark Mode Token Mapping**: Included in the report above. - **Contrast Verification Matrix**: Included in the report above. - **Elevation System (light vs dark)**: Included in the report above. - **Image Dimming Guidelines**: Included in the report above. - **Transition Animation Specs**: Included in the report above. ## Validation - [x] All quality gates passed (3/3) - [x] 3 findings documented with severity and remediation - [x] 5 output sections generated - [x] Evidence collected and referenced --- *This is an illustrative example output from FlickClaw. Results vary based on project context.*
RELATED AGENTS