Skip to content
cccskills
FreePublished on GitHub

html-email

Create a single HTML email file for use in an email tool, with layouts designed for Gmail, Outlook, and Apple Mail. Include preview text, accessible links, and appropriate footer details for marketing messages.

OriginalShow the original description

Send-ready single-file email

Works withGmailOutlook
See how to install

Good for

  • Create a promotional email
  • Prepare an announcement email
  • Adapt a layout for major email clients
  • Deliver an email as a single HTML file

Files included (1)

  • SKILL.md2.6 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

HTML email

Design an HTML email as ONE self-contained .html file that survives real email clients. Email rendering is not browser rendering — Gmail, Outlook, and Apple Mail each strip or mangle different things, and the rules below are what reliably survives all three. When a rule here conflicts with normal web-design instincts, the rule wins.

Layout and styling:

  • Structure with nested <table role="presentation" cellpadding="0" cellspacing="0" border="0"> — no flexbox, no grid, no floats, no position. One centered wrapper table, max-width 600px, single-column flow (stacked rows beat side-by-side columns).
  • Inline EVERY style on the element it styles. A <style> block in <head> may additionally carry only what can't inline (media queries, dark-mode tweaks) — several clients drop it entirely, so the email must read correctly from inline styles alone.
  • No JavaScript anywhere (universally stripped). No external stylesheets. No web fonts — use email-safe stacks (Arial, Helvetica, Georgia, Verdana, Tahoma, 'Courier New') with generic fallbacks.
  • Build the visual design out of colored table cells, borders, spacer cells, and type — not images. There is nowhere to host project images from here: a referenced project file will not exist for recipients. If imagery is essential, leave a clearly-marked placeholder cell with alt text and tell the user to swap in a hosted https URL before sending.
  • Buttons are "bulletproof": a padded <td> with bgcolor and inline border-radius, the <a> filling it with display:block and inline color — never an image, never a styled <button>.

Client quirks that matter:

  • Outlook (Word engine): give every table/cell explicit widths; set line-height with mso-line-height-rule:exactly; wrap Outlook-only fixes in <!--[if mso]> … <![endif]--> conditionals.
  • Gmail clips messages beyond ~100KB of HTML — stay well under.
  • Add <meta name="color-scheme" content="light dark"> and pick colors that survive dark-mode inversion (avoid pure #000/#fff backgrounds; test text on mid-tone fills).

Deliverability and accessibility:

  • First element in <body>: a hidden preheader span (~85 chars) that previews next to the subject line.
  • alt text on any image, lang on <html>, real <a href> links (no dead # anchors), and a footer with a plausible unsubscribe line and postal address for anything marketing-shaped.

Show the design at 600px; mention in your reply that the file is send-ready HTML the user can drop into their email tool.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

3d-object

FreeSummary

Create a 3D object with three.js, inspect it from every angle in an interactive viewer, and download it as OBJ + MTL or GLB for use in other 3D applications.

  • Create a 3D object and inspect it from every angle
  • Export a model for further editing in Blender
  • Review an object's silhouette and materials
asgeirtj/system_prompts_leaks70KUpdated Oct 20, 2026

action-items

FreeSummary

Maintain a private task list with deadlines, next steps, waiting parties, and blockers. Update progress and dependencies, merge duplicate items, and archive closed tasks so ongoing commitments stay clear and easy to follow.

  • Record tasks and commitments with deadlines
  • Track pending replies and reasons work cannot proceed
  • Update task dependencies when prerequisites are completed
asgeirtj/system_prompts_leaks70KUpdated Oct 20, 2026

agents

FreeSummary

Coordinate a task from a verifiable goal through completion. Handle work directly or split independent tasks across separate agent sessions, track progress, verify results, and arrange pull request merging when included in the goal.

  • Split independent tasks across agents
  • Check progress across ongoing tasks
  • Resume a previously started project
asgeirtj/system_prompts_leaks70KUpdated Oct 20, 2026

animated-video

FreeSummary

Create animated HTML pages with smooth scene transitions and playback controls. An editable timeline lets users adjust scene lengths and speeds, with fixed landscape or portrait layouts prepared for video export.

  • Create an animated product walkthrough
  • Explain a message through moving text and graphics
  • Build a portrait animation for video export
asgeirtj/system_prompts_leaks70KUpdated Oct 20, 2026

apple_healthkit

FreeSummary

Review synced Apple Health records, including steps, heart rate, sleep, and workouts. Retrieve daily summaries or detailed samples for a chosen period, and check sync status and missing data before interpreting the results.

  • Review daily steps and heart rate over time
  • Check sleep stages, duration, and awakenings
  • Review workout duration, distance, and calories
asgeirtj/system_prompts_leaks70KUpdated Oct 20, 2026

Create and edit Word documents and templates, reorganize text, replace images, and work with tracked changes or comments. Apply proper headings and lists, then render every page to check its appearance before delivery.

  • Create a structured Word document
  • Reorganize content in an existing document
  • Replace images or text in a document
asgeirtj/system_prompts_leaks70KUpdated Oct 20, 2026

See all skills by asgeirtj

Report a problem with this skill