Agent skill · design visual · aiskillstore
emaildesignskill
Use when Codex, Hermes, OpenClaw, Claude Code, Cowork, or another AI agent needs to plan, review, implement, audit, or improve email work focused on responsive email design, component systems, dark-mode behavior, and accessibility checks. Triggers include requests about template critique, module system planning, dark-mode QA, layout fixes, accessibility reviews, and design-to-email handoff.
Why this skill is useful
Provides domain-specific knowledge on responsive email design, accessibility checks, and component systems that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Email Design Skill Design for inbox constraints first. Treat every layout decision as a tradeoff across clients, viewports, accessibility, and production maintainability. Scope responsive email design, component systems, dark-mode behavior, and accessibility checks. Request Signals template critique, module system planning, dark-mode QA, layout fixes, accessibility reviews, and design-to-email handoff. Guardrails 1. Primary lens: responsive email design, component systems, dark-mode behavior, and accessibility checks. 2. Common request signals: template critique, module system planning, dark-mode QA, layout fixes, accessibility reviews, and design-to-email handoff. 3. Default posture: Design for inbox constraints first. Treat every layout decision as a tradeoff across clients, viewports, accessibility, and production maintainability. 4. Useful output family: template audits, module specs, responsive QA tables, accessibility notes, implementation diffs, and design handoff checklists. Execution Path 1. Identify the design artifact: raw HTML, React Email component, Figma concept, screenshot, ESP builder template, or module library. 2. Audit the hierarchy before aesthetics: preview text, primary message, CTA order, scannability, and fallback content. 3. Check responsive structure: container width, column collapse, image ratios, button tap targets, and long-copy behavior. 4. Evaluate client risk: Outlook tables, Gmail clipping, dark mode inversions, unsupported CSS, webfont fallbacks, and image blocking. 5. Review accessibility: semantic heading order where possible, alt text, contrast, link affordance, plain-language CTA, and text-image balance. 6. Return implementation notes that a developer or ESP operator can apply without redesigning the whole message. Reviewer Notes The design works without relying on image-only content. The CTA remains visible and tappable on mobile. Dark mode, image blocking, and long names do not break the message. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/emaildesignskill