Add blog section: 2x2 grid with search, pagination, and 8 sample posts

This commit is contained in:
Oliver
2026-06-10 05:10:08 -03:00
parent 595f32bbfa
commit 23503d8c97
11 changed files with 1043 additions and 24 deletions
+81
View File
@@ -0,0 +1,81 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://derez.ai/blog/posts/hermes-agent-custom-tools.html" />
<title>Extending Hermes Agent with Custom Tools and Skills — Derez.ai Blog</title>
<meta name="description" content="How to write your own skills, add API tools, and teach your agent new tricks." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://derez.ai/blog/posts/hermes-agent-custom-tools.html" />
<meta property="og:title" content="Extending Hermes Agent with Custom Tools and Skills" />
<meta property="og:description" content="How to write your own skills, add API tools, and teach your agent new tricks." />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Extending Hermes Agent with Custom Tools and Skills" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet" />
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #08080c;
color: #e8e8f0;
font-family: 'Inter', sans-serif;
line-height: 1.7;
padding: 40px 20px;
}
.container { max-width: 720px; margin: 0 auto; }
a { color: #00f5ff; text-decoration: none; }
a:hover { text-decoration: underline; }
.back { margin-bottom: 32px; display: inline-block; font-size: 0.9rem; color: #888; }
.back:hover { color: #00f5ff; }
h1 { font-size: 1.9rem; font-weight: 700; line-height: 1.3; margin-bottom: 12px; }
.meta { font-size: 0.85rem; color: #888; margin-bottom: 40px; display: flex; gap: 12px; align-items: center; }
.area-tag {
display: inline-block;
background: rgba(0,245,255,0.1);
color: #00f5ff;
font-size: 0.75rem;
padding: 2px 10px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
h2 { font-size: 1.3rem; font-weight: 600; margin: 36px 0 12px; color: #f0f0ff; }
p { margin-bottom: 16px; color: #c8c8d8; }
code { background: #0e0e14; padding: 2px 6px; border-radius: 4px; font-size: 0.9em; color: #00f5ff; }
strong { color: #f0f0ff; }
@media (max-width: 600px) {
body { padding: 24px 16px; }
h1 { font-size: 1.5rem; }
}
</style>
</head>
<body>
<div class="container">
<a class="back" href="https://derez.ai/#blog">&larr; Back to Blog</a>
<h1>Extending Hermes Agent with Custom Tools and Skills</h1>
<div class="meta">
<span>May 28, 2026</span>
<span class="area-tag">howto</span>
</div>
<h2>Beyond the Built-Ins</h2>
<p>Hermes Agent ships with a powerful set of tools — web search, file manipulation, terminal access, browser automation. But the real power is in extending it with your own custom skills.</p>
<h2>What Are Skills?</h2>
<p>Skills are markdown files that teach your agent how to handle specific tasks. They live in <code>~/.hermes/skills/</code> and are loaded by name when needed. A skill might define a workflow for "code review" or "deploying a static site" with exact commands and pitfalls.</p>
<h2>Writing Your First Skill</h2>
<p>Create a file at <code>~/.hermes/skills/my-skill/SKILL.md</code> with YAML frontmatter (name, description, tags) and a markdown body. The body is the instruction your agent follows when the skill is loaded. Use numbered steps, include exact commands, and add a pitfalls section.</p>
<h2>Adding API Tools</h2>
<p>For external API access (your CRM, Slack, GitHub), write a Python script and register it in the agent's config. The agent can then call it like any other tool. This is how you connect your agent to your actual business systems.</p>
<h2>Sharing Skills</h2>
<p>Skills are portable — share them between agents or with the community. A well-written skill saves hours of repeated setup and makes every agent you deploy smarter from day one.</p>
<p style="margin-top:48px;padding-top:24px;border-top:1px solid #1a1a24;font-size:0.85rem;color:#666;">
<a href="https://derez.ai" style="color:#00f5ff">Derez.ai</a> — Deploy your AI agent in 5 minutes.
</p>
</div>
</body>
</html>