An AI skill is a structured system prompt or set of custom instructions that gives AI assistants like ChatGPT, Claude, and Gemini specialized capabilities. It includes a clear role definition, specific knowledge areas, step-by-step processes, and quality criteria that help AI perform specific professional tasks.

How does Skill This work?

Simply describe your professional expertise in plain text. Our free AI skill generator analyzes your input and transforms it into a structured system prompt. The skill is then graded on clarity, specificity, and usefulness. You can share your skill via a unique URL or copy it to use as custom instructions with any AI assistant like ChatGPT, Claude, or Gemini.

Is Skill This free to use?

Yes, Skill This is completely free. No account or payment is required. You can create unlimited skills and share them with anyone.

How is my skill graded?

Skills are graded on a scale from A+ to F (0-100 points). The grade reflects how clear, specific, and actionable your skill is. Higher grades indicate skills that AI assistants can use more effectively.

How do I use my skill with an AI assistant?

Copy your generated skill and paste it into the system prompt or custom instructions of any AI assistant. For ChatGPT, use Personalization > Custom Instructions. For Claude, add it to a Project's instructions. For Cursor or other IDEs, save it as a .cursorrules or CLAUDE.md file. The AI will then adopt that skill and perform tasks according to your expertise.

AI Skill Report Card

Designing B2B HTML Emails

A-82·Feb 26, 2026·Source: Web

YAML
---
name: designing-b2b-html-emails
description: Creates HTML email templates for B2B campaigns using table-based layouts, inline CSS, and responsive design patterns. Use when building marketing emails, newsletters, or campaign templates that need cross-client compatibility.
---

B2B HTML Email Template Design

Quick Start15 / 15

HTML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="x-apple-disable-message-reformatting">
    <title>Email Title</title>
    <!--[if mso]>
    <xml>
        <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
    <style>
        /* Dark mode styles */
        @media (prefers-color-scheme: dark) {
            .dark-mode-bg { background-color: #1a1a1a !important; }
            .dark-mode-text { color: #ffffff !important; }
        }
        [data-ogsc] .dark-mode-bg { background-color: #1a1a1a !important; }
        [data-ogsc] .dark-mode-text { color: #ffffff !important; }
    </style>
</head>
<body width="100%" style="margin: 0; padding: 0 !important; background-color: #f4f4f4;">
    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
        <tr>
            <td>
                <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" style="margin: 0 auto;" class="email-container">
                    <!-- Content here -->
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Recommendation▾

Condense the workflow section - the 7-step checklist could be streamlined to 4-5 essential steps

Workflow14 / 15

Progress:

Structure Setup: Create table-based layout with 600px max width
Content Planning: Ensure 60% text minimum, 40% images maximum
Responsive Implementation: Apply fluid-hybrid method for mobile
Dark Mode Integration: Add color scheme detection and Outlook overrides
CTA Implementation: Build bulletproof buttons with VML fallbacks
ESP Integration: Add platform-specific template tags
Testing: Validate with Email on Acid or Litmus across 20+ clients

Step-by-Step Process

Base Structure
- Use nested tables for layout control
- Set role="presentation" on layout tables
- Include Outlook-specific XML namespaces
- Add meta tags for mobile optimization

Responsive Design (Fluid-Hybrid)

HTML
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 600px;">
    <tr>
        <td width="50%" style="padding: 10px; vertical-align: top;">
            <!--[if mso]>
            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="300">
            <tr><td>
            <![endif]-->
            Content block 1
            <!--[if mso]>
            </td></tr></table>
            <![endif]-->
        </td>
        <td width="50%" style="padding: 10px; vertical-align: top;">
            Content block 2
        </td>
    </tr>
</table>

Bulletproof CTA Button

HTML
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td style="border-radius: 4px; background: #007bff;">
            <!--[if mso]>
            <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="https://example.com" style="height:44px;v-text-anchor:middle;width:200px;" arcsize="10%" stroke="f" fillcolor="#007bff">
            <v:textbox inset="0,0,0,0">
            <![endif]-->
            <a href="https://example.com" style="background-color: #007bff; border: none; border-radius: 4px; color: #ffffff; display: inline-block; font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; line-height: 44px; text-align: center; text-decoration: none; width: 200px; -webkit-text-size-adjust: none;">Call to Action</a>
            <!--[if mso]>
            </v:textbox>
            </v:roundrect>
            <![endif]-->
        </td>
    </tr>
</table>

Recommendation▾

Make examples more specific with actual code snippets showing the complete template structure, not just descriptions

Examples16 / 20

Example 1: B2B Newsletter Template Input: Company newsletter with header, 3 articles, CTA section Output:

Header: Logo + navigation (text links only)
Content: 60% text articles, 40% supporting images
CTA: Bulletproof button with "Read More" action
Footer: Unsubscribe + company info

Example 2: Product Launch Email Input: New feature announcement for SaaS platform Output:

Hero section: Feature benefit headline + hero image (30% width)
Body: Feature explanation (70% text content)
Proof: Customer testimonial block
CTA: "Try New Feature" button
Secondary CTA: "Learn More" text link

Recommendation▾

Reduce redundancy between 'Best Practices' and 'Common Pitfalls' sections - combine overlapping content

Best Practices

Content Ratio

Maintain 60% text minimum for deliverability
Use alt text for all images (40-125 characters)
Include text version of key messages

CSS Guidelines

All styles inline on elements
Use !important sparingly (dark mode overrides only)
Fallback fonts: Arial, sans-serif minimum
Font sizes: 14px minimum for body text

Cross-Client Compatibility

Use cellspacing="0" cellpadding="0" border="0" on all tables
Set explicit widths on table cells
Use mso-table-lspace: 0pt; mso-table-rspace: 0pt; for Outlook
Include VML for Outlook 2007-2019

ESP Integration

Mailchimp:

HTML
*|MC:SUBJECT|* <!-- Subject line -->
*|FNAME|* <!-- First name -->
*|UNSUBSCRIBE|* <!-- Unsubscribe link -->

HubSpot:

HTML
{{ content.subject }} <!-- Subject line -->
{{ contact.firstname }} <!-- First name -->
{{ unsubscribe_link }} <!-- Unsubscribe link -->

Common Pitfalls

External CSS: Never link external stylesheets - many clients strip them
Div-based layouts: Tables provide better cross-client consistency
Background images: Use sparingly, always with fallback colors
Custom fonts: Stick to web-safe fonts or provide fallbacks
JavaScript: Never include - email clients block it entirely
Form elements: Most clients disable forms in emails
Video: Use animated GIFs or linked thumbnails instead
Single image emails: Will be flagged as spam by most filters
Missing preheader: Include preview text after opening body tag
Untested templates: Always validate across major email clients before sending

Testing Checklist

Gmail (web, iOS, Android)
Outlook (2019, 365, web)
Apple Mail (macOS, iOS)
Yahoo Mail
Thunderbird
Dark mode variations
Mobile responsive behavior