OpenParable
Skip to content
← Back to skills

Tel Mailto

Design
tel-mailto

Tel Mailto is an Agent Skill for design published in the thedaviddias/Front-End-Checklist repository on GitHub: a SKILL.md instruction file an AI agent can load to do this task.

Use when applies to contact pages, business listing pages, headers/footers, and any page displaying a phone number or email address. Use when auditing contact UX or schema-marked LocalBusiness pages.

View on GitHub ↗
QUICK START

How to use this skill

Bring this guide into your coding agent with a prompt tailored to the tool you use.

  1. Open your project in Codex.
  2. Copy and paste the prompt below.
  3. Review files and risks before approving any action.
Prompt to paste
Inspect the Agent Skill at https://github.com/thedaviddias/Front-End-Checklist/blob/HEAD/skills/tel-mailto/SKILL.md and all supporting files. Report provenance, permissions, scripts, dependencies, and security risks. Propose an exact installation into .agents/skills/tel-mailto, but wait for my approval before writing files or running scripts.

Copying this prompt does not install or run the skill. Review third-party files before use.

Tel & Mailto Links

On mobile devices, tel: and mailto: links trigger the native phone dialer and email client with one tap; plain-text contact info forces copy-paste and measurably reduces contact conversion rates.

Quick Reference

  • Wrap phone numbers in <a href="tel:+15551234567"> for click-to-call on mobile devices
  • Wrap email addresses in <a href="mailto:[email protected]"> for one-click email compose
  • Use E.164 format for tel: links: + followed by country code and number, no spaces or dashes
  • Plain text phone numbers and emails require users to copy-paste — a UX and conversion friction point

Check

Scan the HTML for phone numbers (patterns like \+?[0-9\s\-().]{7,}) and email addresses ([\w.-]+@[\w.-]+\.[a-z]{2,}). Verify that phone numbers are wrapped in <a href="tel:..."> and emails in <a href="mailto:...">. Flag any that appear as plain text.

Fix

Wrap each phone number in an anchor tag: <a href="tel:+15551234567">+1 (555) 123-4567</a>. Wrap each email in: <a href="mailto:[email protected]">[email protected]</a>. Format tel: values using E.164 (+[country][number]) without spaces.

Explain

Explain how tel: and mailto: URI schemes work in HTML, why E.164 format is required for international compatibility, and how these links improve mobile UX and contact conversion rates.

Code Review

Review metadata generation, rendered HTML, structured data, and response headers related to Tel & Mailto Links. Flag exact routes or templates where search-facing output violates the rule, and describe how to verify the final page output.

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/seo/tel-mailto